抽叶事件" draw :deleted“不删除图层

Question

请注意，我对Angular使用的是@asymmetrik/ngx-leaflet-draw。我正在配置一个地图，用户可以在其中绘制矩形或多边形。然后，我根据onDrawCreated事件将它们保存到一个layerGroup中，它工作得很好。

我的目标也是删除基于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());
  }

Demo