传单绘制事件“draw：deleted”不删除图层答案

【问题标题】：Leaflet draw event "draw:deleted" not deleting layer传单绘制事件“draw：deleted”不删除图层
【发布时间】：2019-10-03 10:04:08
【问题描述】：

请注意，我正在为 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);
  }

根据文档和其他类似问题，上述代码应该可以工作。但我想我错过了一些简单的东西。

【问题讨论】：

所以你的问题是它们没有从地图、数组或两者中删除？因为从地图中删除它们是一种库行为。不需要额外的代码来完成。
对不起，我应该详细说明。它们确实从地图上消失了，但不幸的是没有从阵列中消失。

标签： angular typescript leaflet leaflet.draw ngx-leaflet

【解决方案1】：

遍历已删除的图层以删除已删除的图层。如果它只有一个，那么它将被删除。

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

Demo

【讨论】：

这非常有效。非常感谢你。我认为它可以与 this.zones.eachLayer 一起使用，但当然你必须遍历你实际删除的那些，然后将它们连接到 this.zones 中的现有层。
是的！谢谢！完全有道理。它为您提供已删除的列表，然后您只需删除这些图层。 RemoveLayer 是我的关键。