ThreeMap
three.js地图
例子
<three-map
:width="1200"
:height="610"
:isLegend="false"
:maxLevel="3"
mapServerUrl="http://127.0.0.1:5500/examples/mock/map"
:coverageAreas="[350000]"
:coverageCityAreas="[350100, 350200, 350300, 350400, 350500, 350600, 350700, 350800, 350900]"
:loadData="getMapData"
@change="switchProvince"
>
<template v-slot:tooltip="data">
<map-tooltip :data="data"></map-tooltip>
</template>
</three-map>API
| 属性 | 说明 | 类型 | 默认值 | 必需 |
|---|---|---|---|---|
| width | 宽度 | number | 0 | true |
| height | 高度 | number | 0 | true |
| scale | 缩放比例 | number | 1 | |
| locationX | 距离屏幕左边的距离 | number | 0 | |
| locationY | 距离屏幕顶部的距离 | number | 0 | |
| autoSwitchAreaTime | 自动切换有数据地区的时间 | number | 20000 | |
| level | 地图级数，默认全国，0：全国，1：省份，2：城市，3：县区 | number | 0 | |
| maxLevel | 地图最大级数 | number | 2 | |
| isToolTip | 是否显示提示框 | boolean | true | |
| isLegend | 是否显示图例 | boolean | true | |
| defaultAreaInfo | 如果level不为0，即不是全国，则需要设置当前的地区数据 | object | - | |
| coverageAreas | 可以下钻的省adcode | array | - | |
| coverageCityAreas | 可以下钻的市adcode | array | - | |
| selectColor | 选中地区的颜色 | string | #151391 | |
| mapServerUrl | 地图数据服务器地址 | string | - | true |
| valueKey | 数据的key值 | string | - | true |
| loadData | 获取数据，必须返回Promise | function | - | true |
事件
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 地区选中change事件 | function(areaInfo) |
| back | 地图从下一层级返回上一层级事件 | function(areaCode) |
slot
| slot名称 | 说明 |
|---|---|
| tooltip | 弹窗 |
| legend | 图例 |
更新时间
该文档最后更新于： 2022-12-28 PM 14:32