0.1.7 • Published 11 days ago
tianheng-map v0.1.7
地图组件
一个基于 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 -S
main.js 里 import
import TianhengMap from 'tianheng-map'
import 'tianheng-map/index.css'
app.use(TianhengMap)
然后使用组件放到对应的界面中
<th-map></th-map>
License
MIT