場景

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue+Openlayer使用Draw實現交互式繪制線段 Leaflet中使用Leaflet.AnimatedMarker插件實現要素軌跡移動 vue+openlayers圖形交互，實現多邊形繪制、編輯和保存 leaflet結合turf.js實現繪制圖形緩沖分析buffer(附源碼下載) 使用leaflet繪制geoJson中國邊界使用java修改圖片DPI Canvas繪制不規則圖形，實現可拖動，編輯--V1.0第一篇【轉】使用fabricjs實現圖形編輯器在vue項目中使用codemirror插件實現代碼編輯器功能（代碼高亮顯示及自動提示使用canvas畫布利用js通過鼠標實現矩形的繪制（任意方向的繪制圖形）