0.1.11 • Published 9 days ago
tianheng-map-vue2 v0.1.11
地图组件
一个基于 leaflet 封装的地图组件
组件属性
| prop | type | description |
|---|---|---|
crs | Object | 地图的 crs 坐标系统 |
zoom | Number | 缩放级别 |
center | Array | 地图中心点 |
zoomConfig | Object | 缩放组件配置 {"control":true,"doubleClickZoom":false,"position":"bottomright"} |
drawConfig | Object | 绘制配置 {"color":"#409EFF","fillColor":"#409EFF","fillOpacity":0.5} |
measureConfig | Object | 测量配置 {"weight":3,"color":"#039bec","showTip":true,"showResult":true,"unitDistance":"kilometer","unitArea":"kilometer","precisionDistance":2,"precisionArea":2,"precisionCoord":6,"customTip":{"step1":"单击开始绘制","step2":"单机继续绘制","step3":"右键单击结束绘制"}} |
事件
| Event | Data | Description |
|---|---|---|
mapReady | Map | 初始化完成后返回地图对象 |
drawResult | {type: String, data: Object} | 返回绘制的类型和数据 |
方法
| Method | Args | Returns | Description | |
|---|---|---|---|---|
addLayer | Layer | void | 在地图上添加 layer | |
removeLayer | Layer | void | 地图移除掉 layer | |
createPane | Pane | void | 创建Pane并设置其 z-index | |
enableDraw | String | void | 开启绘制并在绘制结束调用drawResult，参数类型为'Line', 'Polygon', 'Rectangle', 'Circle'与事件 drawResult里的 type 对应 | |
clearDraw | 无 | void | 关闭绘制，清除绘制结果 | |
setTiandituMap | String | void | 添加一个天地图底图，参数为天地图的tk | |
enableSideBySide | Tilelayer,Tilelayer | void | 启用左右卷帘功能，参数为左图和右图 | |
setSideLeftLayer | Tilelayer | void | void | 替换左图图层 |
setSideRightLayer | Tilelayer | void | void | 替换右图图层 |
disableSideBySide | 无 | void | void | 禁用左右卷帘功能 |
enableMeasure | String | void | 开启测量功能并在结束调用measureResult，参数类型为'distance', 'area', 'coord' | |
disableMeasure | 无 | void | 禁用测量功能并清除绘制的内容 |
使用
vue3 npm install
npm i tianheng-map -Smain.js 里 import
import TianhengMap from 'tianheng-map'
import 'tianheng-map/index.css'
app.use(TianhengMap)然后使用组件放到对应的界面中
<th-map></th-map>License
MIT