Leaflet中使用draw繪製時獲取圖形的幾何資訊
阿新 • • 發佈：2022-04-07
場景
Leaflet中使用Leaflet.draw外掛實現圖形互動繪製和編輯(修改圖形座標點)：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124009721
上面在使用draw進行繪製幾何圖形的基礎上，怎樣在繪製結束後獲取圖形的幾何資訊。
注：
部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。
實現
1、新增地圖與顯示幾何資訊的面板
<div id="map"></div> <div id="info" style="position: absolute; top: 0px; right: 10px; height: 200px; width: 350px; z-index: 1; border: solid 1px;background-color:white;"> <label id="type"> 幾何圖形型別： </label> <p style="margin:0"> 圖形幾何資訊如下： </p> <div id="result" style="height: 100px; font-family: 微軟雅黑; font-size: 14px; font-weight: bold;"> </div> </div>
2、引入所需js依賴與jquery
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> <script type="text/javascript" src="./js/leaflet.draw.js"></script> <script type="text/javascript" src="./js/jquery/jquery-1.11.2.min.js"></script>
3、在上面實現繪製的基礎上重新繪製結束事件
//繪製事件 map.on(L.Draw.Event.CREATED, function(e){ //獲取繪製圖形型別 var type = e.layerType, //獲取繪製圖層 drawlayer = e.layer; if (type === 'marker') { //顯示Popup drawlayer.bindPopup('A popup!'); } //顯示圖層 drawnItems.addLayer(drawlayer); //幾何資訊字串 var latlngsStr = ""; //獲取線幾何資訊 if (type == "polyline") { $("#type").text("幾何圖形型別： 線"); if (drawlayer.editing.latlngs[0].length > 0) { for (var latlngslength = 0; latlngslength < drawlayer.editing.latlngs[0].length; latlngslength++) { //獲取幾何資訊 latlngsStr += "<font>" + drawlayer.editing.latlngs[0][latlngslength].lat + "," + drawlayer.editing.latlngs[0][latlngslength].lng + "</font><br>" } } } //獲取多邊形幾何資訊 else if (type == 'polygon') { $("#type").text("幾何圖形型別： 多邊形"); if (drawlayer._latlngs[0].length > 0) { for (var latlngslength = 0; latlngslength < drawlayer._latlngs[0].length; latlngslength++) { //獲取幾何資訊 latlngsStr += "<font>" + drawlayer._latlngs[0][latlngslength].lat + "," + drawlayer._latlngs[0][latlngslength].lng + "</font><br>" } } } //獲取矩形幾何資訊 else if (type == 'rectangle') { if (drawlayer._latlngs[0].length) { $("#type").text("幾何圖形型別： 矩形"); for (var latlngslength = 0; latlngslength < drawlayer._latlngs[0].length; latlngslength++) { //獲取幾何資訊 latlngsStr += "<font>" + drawlayer._latlngs[0][latlngslength].lat + "," + drawlayer._latlngs[0][latlngslength].lng + "</font><br>" } } } //獲取圓幾何資訊 else if (type == 'circle') { $("#type").text("幾何圖形型別： 圓"); if (drawlayer._radius > 0) { //獲取幾何資訊 latlngsStr += "<font>圓心座標：" + drawlayer._latlng.lat + "," + drawlayer._latlng.lng + "</font><br>" + "<font>半徑：" + drawlayer._radius + "</font>" } } //獲取標記幾何資訊 else if (type == 'marker') { $("#type").text("幾何圖形型別： 標註"); if (drawlayer._latlng != "" && drawlayer._latlng != null && drawlayer._latlng != undefined) { //獲取幾何資訊 latlngsStr += "<font>" + drawlayer._latlng.lat + "," + drawlayer._latlng.lng + "</font><br>" } } //獲取圓標記幾何資訊 else if (type == 'circlemarker') { $("#type").text("幾何圖形型別： 圓形標註"); if (drawlayer._latlng != "" && drawlayer._latlng != null && drawlayer._latlng != undefined) { //獲取幾何資訊 latlngsStr += "<font>" + drawlayer._latlng.lat + "," + drawlayer._latlng.lng + "</font><br>" } } //顯示資訊 document.getElementById('result').innerHTML = latlngsStr; });
4、完整示例程式碼
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>leaflet-draw獲取圖形幾何資訊</title> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> <link rel="stylesheet" href="./css/leaflet.draw.css" /> <style> html, body, #map { padding: 0; margin: 0; width: 80%; height: 100%; overflow: hidden; } </style> </head> <body > <div id="map"></div> <div id="info" style="position: absolute; top: 0px; right: 10px; height: 200px; width: 350px; z-index: 1; border: solid 1px;background-color:white;"> <label id="type"> 幾何圖形型別： </label> <p style="margin:0"> 圖形幾何資訊如下： </p> <div id="result" style="height: 100px; font-family: 微軟雅黑; font-size: 14px; font-weight: bold;"> </div> </div> <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> <script type="text/javascript" src="./js/leaflet.draw.js"></script> <script type="text/javascript" src="./js/jquery/jquery-1.11.2.min.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') { //顯示Popup drawlayer.bindPopup('A popup!'); } //顯示圖層 drawnItems.addLayer(drawlayer); //幾何資訊字串 var latlngsStr = ""; //獲取線幾何資訊 if (type == "polyline") { $("#type").text("幾何圖形型別： 線"); if (drawlayer.editing.latlngs[0].length > 0) { for (var latlngslength = 0; latlngslength < drawlayer.editing.latlngs[0].length; latlngslength++) { //獲取幾何資訊 latlngsStr += "<font>" + drawlayer.editing.latlngs[0][latlngslength].lat + "," + drawlayer.editing.latlngs[0][latlngslength].lng + "</font><br>" } } } //獲取多邊形幾何資訊 else if (type == 'polygon') { $("#type").text("幾何圖形型別： 多邊形"); if (drawlayer._latlngs[0].length > 0) { for (var latlngslength = 0; latlngslength < drawlayer._latlngs[0].length; latlngslength++) { //獲取幾何資訊 latlngsStr += "<font>" + drawlayer._latlngs[0][latlngslength].lat + "," + drawlayer._latlngs[0][latlngslength].lng + "</font><br>" } } } //獲取矩形幾何資訊 else if (type == 'rectangle') { if (drawlayer._latlngs[0].length) { $("#type").text("幾何圖形型別： 矩形"); for (var latlngslength = 0; latlngslength < drawlayer._latlngs[0].length; latlngslength++) { //獲取幾何資訊 latlngsStr += "<font>" + drawlayer._latlngs[0][latlngslength].lat + "," + drawlayer._latlngs[0][latlngslength].lng + "</font><br>" } } } //獲取圓幾何資訊 else if (type == 'circle') { $("#type").text("幾何圖形型別： 圓"); if (drawlayer._radius > 0) { //獲取幾何資訊 latlngsStr += "<font>圓心座標：" + drawlayer._latlng.lat + "," + drawlayer._latlng.lng + "</font><br>" + "<font>半徑：" + drawlayer._radius + "</font>" } } //獲取標記幾何資訊 else if (type == 'marker') { $("#type").text("幾何圖形型別： 標註"); if (drawlayer._latlng != "" && drawlayer._latlng != null && drawlayer._latlng != undefined) { //獲取幾何資訊 latlngsStr += "<font>" + drawlayer._latlng.lat + "," + drawlayer._latlng.lng + "</font><br>" } } //獲取圓標記幾何資訊 else if (type == 'circlemarker') { $("#type").text("幾何圖形型別： 圓形標註"); if (drawlayer._latlng != "" && drawlayer._latlng != null && drawlayer._latlng != undefined) { //獲取幾何資訊 latlngsStr += "<font>" + drawlayer._latlng.lat + "," + drawlayer._latlng.lng + "</font><br>" } } //顯示資訊 document.getElementById('result').innerHTML = latlngsStr; }); </script> </body> </html>