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