leaflet.draw кнопка удаления мусора удаляет все полигоны и сохраняет

Question

Использование javascript, как я могу изменить кнопку "Корзина", чтобы удалить все полигоны, которые были нарисованы и автоматически сохранены. Ниже приведен код, который я реализовал, но это полный взлом. Она удаляет активный многоугольник, но после того как я удалить объект, как только я начинаю получить ошибки в консоли, когда я нажимаю на значок «Trash», как 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

решенных моя собственная проблема с таможенным контролем (спасибо to 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); 

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