當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Leaflet中使用draw绘制时获取图形的几何信息

發布時間：2024/3/26 编程问答 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 Leaflet中使用draw绘制时获取图形的几何信息小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

場景

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/leaflet@1.7.1/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') {//顯示Popupdrawlayer.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/leaflet@1.7.1/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/leaflet@1.7.1/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') {//顯示Popupdrawlayer.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>?

總結

以上是生活随笔為你收集整理的Leaflet中使用draw绘制时获取图形的几何信息的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。