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

女爷i 2023-09-30 12:52 41阅读 0赞

## 场景 ##

Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/124009721][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_124009721]

上面在使用draw进行绘制几何图形的基础上，怎样在绘制结束后获取图形的几何信息。

![3cb7f4435665407b8eb6cc17ba6f2871.gif][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][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') {
                        //显示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/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') {
                        //显示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>

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_124009721]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124009721
[3cb7f4435665407b8eb6cc17ba6f2871.gif]: https://img-blog.csdnimg.cn/3cb7f4435665407b8eb6cc17ba6f2871.gif
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi