场景

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">几何图形类型：&nbsp;</label><p style="margin:0">图形几何信息如下：&nbsp;</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">几何图形类型：&nbsp;</label><p style="margin:0">图形几何信息如下：&nbsp;</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绘制时获取图形的几何信息相关推荐

ArcGIS for Android 中实现要素绘制时固定MapView
最近在项目中遇到这么一个情况,在MapView中要求实现绘制点.线.面. 在这里面就会遇到这么一个问题,绘制折线和多边形型时,每点击一个点屏幕就会跟着晃,使用起来很不方便(使用Note2 触控笔),所 ...
python绘制动态变化的图_用Jupyter Noteb中的matplotlib绘制动态变化图形
我一直在寻找一个很好的解决方案,其中一个线程正在泵送数据,我们希望Jupyter笔记本不断更新图形,而不阻止任何事情.在查阅了十几个相关答案后,以下是一些发现: 小心如果你想要一个实时的图表,不要使 ...
从源码解析-Android中View的绘制流程及performTraversals方法
谈谈Activity的setContentView是怎么加载XML视图的谈谈Activity的View怎么与View绘制工具ViewRootImpl关联的在前面两篇文章中分析了View是如何跟绘制 ...
【MATLAB】基本绘图 ( 句柄值 | 对象句柄值获取 | 创建对象时获取句柄值 | 函数获取句柄值 | 获取 / 设置对象属性 | 获取对象属性 )
文章目录一.对象句柄值获取 1.句柄值 2.创建对象时获取句柄值 3.函数获取句柄值 4.获取 / 设置对象属性二.获取对象属性 1.获取线对象属性 2.获取坐标轴对象属性一.对象句柄 ...
android获取当前位置经纬度,Android中通过GPS或NetWork获取当前位置的经纬度
今天在Android项目中要实现一个通过GPS或NetWork来获取当前移动终端设备的经纬度功能.要实现该功能要用到Android Framework 中的 LocationManager 类.下面我 ...
实现微信打开网页时，获取当前微信用户信息（Java）（基于snsapi_userinfo方式）
/*** 1 第一步:用户同意授权,获取code* 2 第二步:通过code换取网页授权access_token* 3 第三步:刷新access_token(如果需要)* 4 第四步:拉取用户信息(需 ...
用python获取图形对象的坐标集合
之前在初步学习python的过程中,学到了获取图形对象所有点坐标的方法 === --获取矩形对象所占坐标的集合 ____设一矩形c,其左上角的坐标为(x',y'),宽度为w,高度为h,则该矩形对象所有 ...
react中解决下拉时，多个tooltip包裹的列表中，hover时，tooltip快速触发，闪烁问题
闪烁问题,是由于没有用div包裹元素下拉时不让hover到的元素触发,停止下拉时才触发tooltip显示这里就涉及到如何判断滚动中和滚动结束只需要在滚动时记录下top1,而滚动时节流1000调用 ...
CAD制图的时候，怎样绘制CAD螺旋图形？
初学CAD绘图设计的小伙伴们,我们在开始接触CAD绘图的时候都需要先从简单的CAD几何图形开始练习,循序渐进.这样才能逐渐熟练地掌握好各种CAD图形的绘制,例如绘制矩形.圆形.螺旋形等.今天我就在这里 ...

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

场景

实现

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

最新文章

热门文章