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

编程问答

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

发布时间：2024/3/26 编程问答 53 豆豆

生活随笔收集整理的这篇文章主要介绍了 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

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绘制时获取图形的几何信息的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。