Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
Leaflet中使用Leaflet.Pin插件實現圖層要素編輯效果：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122466785
上面也使用了draw插件實現要素編輯，這里進行補充。
插件地址：
https://github.com/Leaflet/Leaflet.draw
下載插件，引入draw插件所需的js、css和image
?<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><link rel="stylesheet" href="./css/leaflet.draw.css" /><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script type="text/javascript" src="./js/leaflet.draw.js"></script>??
注：
博客：
https://blog.csdn.net/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="https://unpkg.com/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="https://unpkg.com/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}.tile.openstreetmap.org/{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、效果
?
總結
以上是生活随笔為你收集整理的Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中通过setZIndex实
- 下一篇： Leaflet中对鼠标按下、移动事件监听