传单绘制删除按钮删除“全部清除”操作答案

【问题标题】：leaflet-draw delete button remove "clear all" action传单绘制删除按钮删除“全部清除”操作
【发布时间】：2017-10-25 14:13:23
【问题描述】：

如何从leaflet-draw 编辑工具栏中的删除按钮中删除“全部清除”操作？

我知道您可以删除整个 delete 按钮，但仍需要删除单个项目。基本上是在寻找一种方法来防止用户从地图中删除每个项目。

【问题讨论】：

标签： javascript leaflet leaflet.draw

【解决方案1】：

编辑工具栏测试按钮处理程序上是否存在removeAllLayers 成员。因此，禁用清除所有操作的一种简单但可能很笨拙的方法是在L.EditToolbar.Delete 模块上对removeAllLayers 进行核攻击：

L.EditToolbar.Delete.include({
    removeAllLayers: false
});

new L.Control.Draw({
    edit: {
        featureGroup: drawnItems
    },
    draw: {
    }
}).addTo(map);

还有一个演示

var map = L.map(document.getElementById('map'), {zoomControl: false}).setView([48.8583736, 2.2922926], 15);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var drawnItems = new L.geoJson().addTo(map);

map.on(L.Draw.Event.CREATED, function (event) {
    var layer = event.layer;
    drawnItems.addLayer(layer);
});



L.EditToolbar.Delete.include({
    removeAllLayers: false
});

new L.Control.Draw({
    edit: {
        featureGroup: drawnItems
    },
    draw: {
        polygon: false,
        rectangle: false,
        circlemarker: false
    }
}).addTo(map);

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.12/leaflet.draw.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.12/leaflet.draw.js"></script>

<div id='map'></div>

【讨论】：

【解决方案2】：

我使用此代码并为我工作。将 remove 更改为 true==>> remove: true:

var drawControl = new L.Control.Draw({
            position: 'topright',
            draw: {

                    polyline: false,
                    polygon:false,
                    circle: false, // Turns off this drawing tool
                    rectangle: true,

                    marker: true
                    },
            edit: {
                 featureGroup: drawnItems,
                remove: true
                        }
        });

【讨论】：