可视化地图 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 |