Leaflet中通过leaflet-measure插件实现测距测面效果
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中通过leaflet-measure插件实现测距测面效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
Leaflet中原生方式實現測距：
Leaflet中原生方式實現測距_BADAO_LIUMANG_QIZHI的博客-CSDN博客
Leaflet中原生方式實現測量面積：
Leaflet中原生方式實現測量面積_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面原生方式實現測距測面的效果下，怎樣通過插件的方式實現效果。
leaflet-measure插件地址：
GitHub - ljagis/leaflet-measure: Coordinate, linear, and area measure control for Leaflet maps
官方示例地址:
Leaflet Measure Path - example
本地運行效果
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
1、按照官方示例引入所需的js、css文件等
2、新建html，參考其官方代碼修改如下
? <!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>leaflet-measure插件測距測面</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" /><link rel="stylesheet" href="./css/leaflet-measure-path.css"><style>body {padding: 0;margin: 0;font-family: sans-serif;font-size: 10px;}#map {position: absolute;width: 100%;height: 100%;}</style> </head><body><div id="map"></div><script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet-src.js"></script><script src="./js/leaflet-measure-path.js"></script><script src="./js/Leaflet.Editable.js"></script><script type="text/javascript">//實例化地圖并添加osm地圖//注意這里設置editable為truevar map = L.map('map', {editable: true}).setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: ''}).addTo(map);//新建多邊形并添加到地圖var polygon = L.polygon([[36.208, 120.181],[36.194, 120.359],[36.105, 120.317],[36.014, 120.250],[36.107, 120.110]], { showMeasurements: true }).addTo(map);//激活多邊形的編輯功能polygon.enableEdit();map.on('editable:vertex:drag editable:vertex:deleted', polygon.updateMeasurements, polygon);</script> </body></html>?總結
以上是生活随笔為你收集整理的Leaflet中通过leaflet-measure插件实现测距测面效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中原生方式实现测量面积
- 下一篇： Leaflet中使用MovingMark