场景

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.draw插件实现图形交互绘制和编辑(修改图形坐标点)
场景 Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1224 ...
Leaflet中使用Leaflet.Path.Transform插件实现旋转图形
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 前面所引用的 ...
Leaflet中使用Leaflet.AnimatedMarker插件实现要素轨迹移动
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图在上面的基础上怎样实现要素轨迹移动效果. 插 ...
Leaflet中使用Leaflet.Polyline.SnakeAnim插件实现水流模拟效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图在上面的基础上怎样实现水流模拟效果. 水流模 ...
Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样使用Leaflet.co ...
Leaflet中使用Leaflet.fullscreen插件实现全屏效果
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样实现地图全屏效果. ...
Leaflet中使用leaflet.polylineDecorator插件绘制箭头线及虚线矩形
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
Leaflet中使用Leaflet.Graticule插件实现添加矩形格网
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面加载地 ...

Leaflet中通过leaflet-measure插件实现测距测面效果

场景

实现

Leaflet中通过leaflet-measure插件实现测距测面效果相关推荐

最新文章

热门文章