场景
Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果：
/BADAO_LIUMANG_QIZHI/article/details/122466785
上面也使用了draw插件实现要素编辑，这里进行补充。
插件地址：
/Leaflet/Leaflet.draw
下载插件，引入draw插件所需的js、css和image
<link rel="stylesheet" href="/leaflet@1.7.1/dist/leaflet.css" /><link rel="stylesheet" href="./css/leaflet.draw.css" /><script type="text/javascript" src="/leaflet@1.7.1/dist/leaflet.js"></script><script type="text/javascript" src="./js/leaflet.draw.js"></script>
注：
博客：
/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、修改css中图片的路径
2、添加绘制图层与绘制控件
//添加绘制图层var drawnItems = new L.FeatureGroup();map.addLayer(drawnItems);//添加绘制控件var drawControl = new L.Control.Draw({draw:{//绘制线polyline:true,//绘制多边形polygon:true,//绘制矩形rectangle:true,//绘制圆circle:true,//绘制标注marker:true,//绘制圆形标注circlemarker:true},edit:{//绘制图层featureGroup:drawnItems,//图形编辑控件edit:true,//图形删除控件remove:true,}});
3、添加绘制结束事件
//绘制事件map.on(L.Draw.Event.CREATED, function(e){var type = e.layerType,//获取绘制图层drawlayer = e.layer;if(type === 'marker'){drawlayer.bindPopup('A popup!');}drawnItems.addLayer(drawlayer);});
4、完整代码
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>leaflet-draw修改图形坐标点</title><link rel="stylesheet" href="/leaflet@1.7.1/dist/leaflet.css" /><link rel="stylesheet" href="./css/leaflet.draw.css" /><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style></head><body ><div id="map"></div><script type="text/javascript" src="/leaflet@1.7.1/dist/leaflet.js"></script><script type="text/javascript" src="./js/leaflet.draw.js"></script><script type="text/javascript">var map = L.map('map').setView([36.09, 120.35], 13);var tiles =L.tileLayer('https://{s}./{z}/{x}/{y}.png', {attribution: ''});tiles.addTo(map);//添加绘制图层var drawnItems = new L.FeatureGroup();map.addLayer(drawnItems);//添加绘制控件var drawControl = new L.Control.Draw({draw:{//绘制线polyline:true,//绘制多边形polygon:true,//绘制矩形rectangle:true,//绘制圆circle:true,//绘制标注marker:true,//绘制圆形标注circlemarker:true},edit:{//绘制图层featureGroup:drawnItems,//图形编辑控件edit:true,//图形删除控件remove:true,}});//添加绘制控件map.addControl(drawControl);//绘制事件map.on(L.Draw.Event.CREATED, function(e){var type = e.layerType,//获取绘制图层drawlayer = e.layer;if(type === 'marker'){drawlayer.bindPopup('A popup!');}drawnItems.addLayer(drawlayer);});</script></body></html>
5、效果
