Событие рисования листовки "draw: удалено", не удаляя слой

Question

Обратите внимание, что я использую @ asymmetrik / ngx-leaflet-draw для Angular. Я настраиваю карту, где пользователь может рисовать прямоугольники или многоугольники. Затем я сохраняю их в layerGroup на основе события onDrawCreated, это работает отлично.

Я также собираюсь удалить слои на основе события onDrawDeleted, но по какой-то причине это не работает. Что я, наконец, делаю в приложении - это сохраняю данные и конвертирую их в GeoJSON. Затем отобразите его в консоли для устранения неполадок.

Компонент HTML:

<button (click)="checked = !checked">Edit Mode</button>
<button (click)="onSave()">Save</button>
<div id="image-map" 
leaflet 
[leafletOptions]="options" 
[leafletLayersControl]="layersControl"
    (leafletMapReady)="onMapReady($event)">
    <div *ngIf="checked" 
    leafletDraw 
    [leafletDrawOptions]="drawOptions" 
    (leafletDrawCreated)="onDrawCreated($event)" 
    (leafletDrawDeleted)="onDrawDeleted($event)">
    </div>
</div>

Часть компонента рисования карты и листовки:

  zones = L.featureGroup();

  onDrawCreated(e: any) {
    this.zones.addLayer(e.layer);
    console.log('Draw Created Event!', e);
    console.log(this.zones.getLayers());
  }

  onDrawDeleted(e: any) {
    this.zones.removeLayer(e);
    console.log('Draw Deleted Event!', e);
    console.log(this.zones.getLayers());
  }

  onSave() {
    const data = this.zones.toGeoJSON();
    console.log(data);
  }

Исходя из документации и других подобных вопросов, приведенный выше код должен работать,Но я думаю, что упускаю что-то простое.

Answer 1

Выполните итерацию по удаленным слоям, чтобы удалить удаленный слой. Если он только один, он будет удален.

onDrawDeleted(e: any) {
    e.layers.eachLayer(layer => {
      this.zones.removeLayer(layer);
    });
    console.log("Draw Deleted Event!", e);
    console.log(this.zones.getLayers());
  }

Демо