leaflet.draw 垃圾桶按钮：删除所有多边形并保存。

Question

使用JavaScript，如何更改leaflet.draw中的“垃圾桶”按钮以删除所有已绘制的多边形并自动保存。下面是我实现的代码，但它是一个完全的hack。它会删除活动多边形，但在我删除对象一次后，当我点击“垃圾桶”图标时，在控制台中开始出现错误，如NotFoundError：找不到节点和TypeError：this._deletedLayers为空。

map.on('draw:editstart', function (e) {
            if(e.handler == 'remove' && typeof drawnItem != 'undefined' && drawnItem !== null){
                if(window.console) window.console.log('Drawing deleted...');
                if(typeof drawnItem != 'undefined' && drawnItem !== null){
                    drawnItems.removeLayer(drawnItem);
                }
                $('.leaflet-draw.leaflet-control .leaflet-draw-actions').hide();
                $('.leaflet-popup-pane .leaflet-draw-tooltip').remove();
            }
        });

- jduhls

---

看起来除非制作自定义版本，否则使用leaflet.draw可能还不可行：https://github.com/Leaflet/Leaflet.draw/issues/264 - jduhls

Answer 1

通过自定义控件解决了我的问题（感谢stackexchange - https://gis.stackexchange.com/questions/60576/custom-leaflet-controls）：

更新！添加了@SpiderWan的建议（感谢！），因此无需自定义CSS。此外，事件先前附加到整个控制栏。现在只附加到controlUI按钮本身。

Javascript：

L.Control.RemoveAll = L.Control.extend({
        options: {
            position: 'topleft',
        },

        onAdd: function (map) {
            var controlDiv = L.DomUtil.create('div', 'leaflet-control leaflet-bar');
            var controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
            controlUI.title = 'Remove all drawn items';
            controlUI.setAttribute('href', '#');

            L.DomEvent
                .addListener(controlUI, 'click', L.DomEvent.stopPropagation)
                .addListener(controlUI, 'click', L.DomEvent.preventDefault)
                .addListener(controlUI, 'click', function () {
                    drawnItems.clearLayers();
                    if(window.console) window.console.log('Drawings deleted...');
                });
            return controlDiv;
        }
    });

removeAllControl = new L.Control.RemoveAll();
map.addControl(removeAllControl);

- jduhls

Answer 2

类似jduhls的答案，但使用Leaflet.draw CSS类：

L.Control.RemoveAll = L.Control.extend(
{
    options:
    {
        position: 'topleft',
    },
    onAdd: function (map) {
        var controlDiv = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar');
        L.DomEvent
            .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
            .addListener(controlDiv, 'click', L.DomEvent.preventDefault)
        .addListener(controlDiv, 'click', function () {
            drawnItems.clearLayers();
        });

        var controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
        controlUI.title = 'Remove All Polygons';
        controlUI.href = '#';
        return controlDiv;
    }
});
var removeAllControl = new L.Control.RemoveAll();
map.addControl(removeAllControl);

- SpiderWan

Answer 3

你还可以覆盖删除工具的enable方法，以简单地删除所有图层而不是打开删除菜单：

L.EditToolbar.Delete.include({
  enable: function () {
    this.options.featureGroup.clearLayers()
  }
})

- lucas

---

在使用 map.addControl(drawControl) 之前，需要完成这个操作。 - fooquency