地图组件

一个基于 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