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

Обратите внимание, что я использую @ 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);
  }

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


typescript angular leaflet leaflet.draw ngx-leaflet
person Koronag    schedule 03.10.2019    source источник
comment
Итак, ваша проблема в том, что они не удаляются с карты, из массива или из обоих? Потому что удалить их с карты - это поведение библиотеки. Не требует дополнительного кода для выполнения.   -  person kboul    schedule 03.10.2019
comment
Извините, я должен был уточнить. Они действительно исчезают с карты, но, к сожалению, не из массива.   -  person Koronag    schedule 03.10.2019

Ответы (1)


arrow_upward
4
arrow_downward

Перебирайте удаленные слои, чтобы удалить удаленный слой. Если он только один, он будет удален.

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

Демо

person kboul    schedule 03.10.2019
comment
Это прекрасно работает, чувак. Большое тебе спасибо. Я думал, что это сработает с this.zones.eachLayer, но, конечно, вам нужно перебрать те, которые вы действительно удалили, а затем соединить их с существующими слоями в this.zones. - person Koronag; 04.10.2019
comment
ДА !!! Спасибо! Совершенно логично. Он дает вам список тех, которые вы удалили, затем вы просто удаляете эти слои. RemoveLayer был для меня ключевым моментом. - person vr_driver; 06.07.2021