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

朱雀 2023-09-30 12:52 32阅读 0赞

## 场景 ##

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

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

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

插件地址：

[https://github.com/Leaflet/Leaflet.draw][https_github.com_Leaflet_Leaflet.draw]

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

注：

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

## 实现 ##

1、修改css中图片的路径

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

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、效果

![9740fadb56064976bf4023c58ad65729.gif][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_122466785]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122466785
[https_github.com_Leaflet_Leaflet.draw]: https://github.com/Leaflet/Leaflet.draw
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/36b7371b37ce4b8ab413a476773a3448.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/4c67b464df7a45569405239762d2dd4f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[9740fadb56064976bf4023c58ad65729.gif]: https://img-blog.csdnimg.cn/9740fadb56064976bf4023c58ad65729.gif