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

场景

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

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

实现

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') {
                    //显示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>