可视化地图 Visual Map

可视化三维中国地图

如何使用

安装

$ npm install @yhsoft/visual-map

$ pnpm add @yhsoft/visual-map

$ yarn add @yhsoft/visual-map

导入

import { VisualMap } from "@yhsoft/visual-map";

代码演示

基本用法

最基本的用法

API

属性

Visual Map 的属性说明如下：

属性	说明	类型	默认值	版本
options	参数	Object

options 的属性说明如下：

属性	说明	类型	默认值	版本
camera	摄像机	Object
controls	控制器	Object
copyright	版权信息	Object
map	地图参数	object

camera 的属性说明如下：

属性	说明	类型	默认值	版本
fov	摄像机视锥体垂直视野角度	number	75
near	摄像机视锥体近端面	number	0.1
far	摄像机视锥体远端面	number	2500
position	摄像机位置	Object	{ x: 0, y: -10, z: 70 }

controls 的属性说明如下：

属性	说明	类型	默认值	版本
autoRotateSpeed	自动旋转速度	float	1.0
enableRotate	启动或禁用摄像机旋转	boolean
enablePan	启用或禁用平移	boolean	true
enableZoom	启用或禁用缩放	boolean	true

copyright 的属性说明如下：

属性	说明	类型	默认值	版本
visible	是否显示地面	boolean	true

map 的属性说明如下：

属性	说明	类型	默认值	版本
adCode	地址编码	string,number	100000
center	地图中心点	Array	[104.0, 37.5]
scale	缩放倍数	number	100
colors	地图颜色	Array	["#1E90FF"]
opacity	地图透明度	number 0~1 之间	1
depth	地图厚度	number	2
edge	行政区边缘	object	{ visible: true, color: '#ffffff' }
label	行政区名称	object	{ visible: true, color: '#fff', fontSize: '12px' }
active	鼠标滑过样式	object	{ color: '#007FFF', opacity: 1 }

事件

名称	说明	回调参数
click	点击行政区时触发	({name, adCode}) => void
dbClick	双击行政区时触发	({ name, adCode, centroid, scale }) => void