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

场景Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122466785上面也使用了draw插件实现要素编辑，这里进行补充。插件地址：https://github.com/Leaflet/Leaflet.draw下载插件，引入draw插件所需的js、css和imag

文章共849字 · 阅读需要大约3分钟

一键AI生成摘要，助你高效阅读

问答

霸道流氓气质

5017人浏览 · 2022-04-07 11:18:16

霸道流氓气质 · 2022-04-07 11:18:16 发布

场景

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

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

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

插件地址：

https://github.com/Leaflet/Leaflet.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;
            width: 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、效果