@dzv/three-map NPM

基于ThreeJs封装的地图组件

安装

npm install @dzv/three-map --save

如何使用

import ThreeMap from "@dzv/three-map";

// 初始化地图
const dom = document.getElementById('myMap');
const map = new ThreeMap({}, geojson);
map.init(dom);

地图config配置

参数	说明	类型	默认值
background	背景颜色	string	#11182f
center	地图中心点经纬度	array	103.754443, 30.544037
scale	地图缩放	number	80
translate	地图平移	array	0, 0
depth	地图深度	number	2
line.color	轮廓线颜色	string	#5a77c5
area.color	区域颜色	string	#344e85
area.opacity	区域透明度	float	0.7
area.hover	是否开启区域hover效果	boolean	true
area.hoverColor	区域鼠标悬浮颜色	string	#5576bb
area.upHover	是否开启区域悬浮凸起效果	boolean	false
area.upHoverDepth	区域凸起深度	number	2
controls.enableZoom	启用或禁用摄像机的缩放	boolean	true
controls.zoomSpeed	缩放速度	number	1
controls.minDistance	缩放最小	number	10
controls.maxDistance	缩放最大	number	1000
camera.position	相机x,y,z 对象三维坐标	array	80, 5, 100
camera.lookAt	x,y,z相机看的位置	array	0, 0, 0
camera.fov	摄像机视锥体垂直视野角度	number	35
camera.near	摄像机视锥体近端面	number	1
camera.far	摄像机视锥体远端面	number	10000
text.show	地名是否显示	boolean	false
text.color	字体颜色	string	#fff
text.fontSize	字体大小	number	12

Method方法

参数	说明	例子
map.scene.add()	接入外部组件的方法	map.scene.add(group)
map.lnglatToVector3()	经纬度转地图三维坐标	map.lnglatToVector3(Array[])
map.destroy()	销毁	map.destroy()

内置地图数据

import china from "@dzv/three-map/lib/mapData/china.json"; // 中国地图
import shanghai from "@dzv/three-map/lib/mapData/shanghai.json"; // 上海市
import yunnan from "@dzv/three-map/lib/mapData/yunnan.json"; // 云南省
import neimenggu from "@dzv/three-map/lib/mapData/neimenggu.json"; // 内蒙古自治区
import beijing from "@dzv/three-map/lib/mapData/beijing.json"; // 北京市
import taiwan from "@dzv/three-map/lib/mapData/taiwan.json"; // 台湾省
import jilin from "@dzv/three-map/lib/mapData/jilin.json"; // 吉林省
import sichuan from "@dzv/three-map/lib/mapData/sichuan.json"; // 四川省
import tianjin from "@dzv/three-map/lib/mapData/tianjin.json"; // 天津市
import ningxia from "@dzv/three-map/lib/mapData/ningxia.json"; // 宁夏回族自治区
import anhui from "@dzv/three-map/lib/mapData/anhui.json"; // 安徽省
import shandong from "@dzv/three-map/lib/mapData/shandong.json"; // 山东省
import shanxi from "@dzv/three-map/lib/mapData/shanxi.json"; // 山西省
import guangdong from "@dzv/three-map/lib/mapData/guangdong.json"; // 广东省
import guangxi from "@dzv/three-map/lib/mapData/guangxi.json"; // 广西壮族自治区
import xinjiang from "@dzv/three-map/lib/mapData/xinjiang.json"; // 新疆维吾尔族自治区
import jiangsu from "@dzv/three-map/lib/mapData/jiangsu.json"; // 江苏省
import jiangxi from "@dzv/three-map/lib/mapData/jiangxi.json"; // 江西省
import hebei from "@dzv/three-map/lib/mapData/hebei.json"; // 河北省
import henan from "@dzv/three-map/lib/mapData/henan.json"; // 河南省
import zhejiang from "@dzv/three-map/lib/mapData/zhejiang.json"; // 浙江省
import hainan from "@dzv/three-map/lib/mapData/hainan.json"; // 海南省
import hubei from "@dzv/three-map/lib/mapData/hubei.json"; // 湖北省
import hunan from "@dzv/three-map/lib/mapData/hunan.json"; // 湖南省
import anmen from "@dzv/three-map/lib/mapData/aomen.json"; // 澳门特别行政区
import gansu from "@dzv/three-map/lib/mapData/gansu.json"; // 甘肃省
import fujian from "@dzv/three-map/lib/mapData/fujian.json"; // 福建省
import xizang from "@dzv/three-map/lib/mapData/xizang.json"; // 西藏自治区
import guizhou from "@dzv/three-map/lib/mapData/guizhou.json"; // 贵州省
import liaoning from "@dzv/three-map/lib/mapData/liaoning.json"; // 辽宁省
import chongqing from "@dzv/three-map/lib/mapData/chongqing.json"; // 重庆市
import shanxisheng from "@dzv/three-map/lib/mapData/shanxisheng.json"; // 陕西省
import qinghai from "@dzv/three-map/lib/mapData/qinghai.json"; // 青海省
import xianggang from "@dzv/three-map/lib/mapData/xianggang.json"; // 香港特别行政区
import heilongjiang from "@dzv/three-map/lib/mapData/heilongjiang.json"; // 黑龙江省

import encoder from "geojson-decoder"; // geojson解码工具
const heilongjiangGeojson = encoder.decode(heilongjiang); // 解码 -- 所有内置地图数据都需要解码

@dzv @dzv/three-map three-map

@tntd/utils d3-geo docz file-saver gatsby-plugin-less geojson-decoder less lodash.throttle react react-dom three

@infinitebrahmanuniverse/nolb-_dz @everything-registry/sub-chunk-272

1.0.0

3 years ago