leaflet.draw垃圾按鈕刪除所有多邊形並保存

Question

使用javascript，我該如何更改leaflet.draw「垃圾桶」按鈕刪除所有已繪製並自動保存的多邊形。下面是我已經實現的代碼，但它是一個完整的黑客。它消除了積極的多邊形，但之後，我刪除的對象，一旦我開始得到錯誤控制檯，當我點擊喜歡NotFoundError: Node was not found和TypeError: this._deletedLayers is null

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(); 
      } 
     }); 

Answer 1

解決我自己的問題與自定義控制的「回收站」圖標（感謝以堆棧交換 - 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); 

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);