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

场景

Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122466785

上面也使用了draw插件实现要素编辑，这里进行补充。

插件地址：

下载插件，引入draw插件所需的js、css和image

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <link rel="stylesheet" href="./css/leaflet.draw.css" />

    <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>

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、修改css中图片的路径

2、添加绘制图层与绘制控件

       //添加绘制图层
        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,
            }
        });

3、添加绘制结束事件

        //绘制事件
        map.on(L.Draw.Event.CREATED, function(e){
           
            var type = e.layerType,
            //获取绘制图层
            drawlayer = e.layer;
            if(type === 'marker'){
                drawlayer.bindPopup('A popup!');
            }
            drawnItems.addLayer(drawlayer);
        });

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;
             100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body >
    <div id="map"></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">

        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'){
                drawlayer.bindPopup('A popup!');
            }
            drawnItems.addLayer(drawlayer);
        });
    </script>
</body>

</html>

5、效果

相关阅读:
[leedcode 82] Remove Duplicates from Sorted List II
[leedcode 83] Remove Duplicates from Sorted List
[leedcode 81] Search in Rotated Sorted Array II
[leedcode 80] Remove Duplicates from Sorted Array II
[leedcode 79] Word Search
2018 ICPC青岛-books（思维题）
CodeForces 15A-Cottage Village（思维题）
CodeForces 755A-PolandBall and Hypothesis（思维题）
CodeForces
UVA11624-Fire!（BFS）
原文地址：https://www.cnblogs.com/badaoliumangqizhi/p/16111396.html