Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
場(chǎng)景
Leaflet中使用Leaflet.Pin插件實(shí)現(xiàn)圖層要素編輯效果：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122466785
上面也使用了draw插件實(shí)現(xiàn)要素編輯，這里進(jìn)行補(bǔ)充。
插件地址：
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
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書(shū)、教程推送與免費(fèi)下載。
實(shí)現(xiàn)
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,//繪制標(biāo)注marker:true,//繪制圓形標(biāo)注circlemarker:true},edit:{//繪制圖層featureGroup:drawnItems,//圖形編輯控件edit:true,//圖形刪除控件remove:true,}});3、添加繪制結(jié)束事件
??????? //繪制事件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修改圖形坐標(biāo)點(diǎn)</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,//繪制標(biāo)注marker:true,//繪制圓形標(biāo)注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、效果
?
總結(jié)
以上是生活随笔為你收集整理的Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Leaflet中通过setZIndex实
- 下一篇： Leaflet中对鼠标按下、移动事件监听