Angular5 NGX-листовка, как обновить слой WMS на основе изменений в другом компоненте

Question

Я использую Angular 5 + ngx-leaflet на своей веб-странице для отображения карты с данными слоя с WMS-сервера.

родительский компонент html

<div class="majorContainer">
    <app-leftcol (leftcolUpdate)="leftColChange($event)"></app-leftcol>
    <div class="mainRightContainer">
        <app-mapcomponent></app-mapcomponent>
    </div>
</div>

parent.component.ts

export class MajorComponent implements OnInit {
    @Output() updateMapLayer = new EventEmitter<any>();

    constructor() { }

    ngOnInit() {

    }

    leftColChange($event) {
        console.log('emit to leaflet layer');
        this.updateMapLayer.emit({newModelName: $event.newModelName, view: 
       $event.view});
    }
}

компонент карты html:

<div class="mapContainer">
    <div id="mapid"
        leaflet
        [leafletOptions]="options"
        [leafletLayers]="layers"
        [leafletLayersControl]="layersControl"
       (leafletMapReady)="initMap($event)"
       (updateMapLayer)="updateLayer($event)">
    </div>
</div>

map.component.ts:

export class MapComponent implements OnInit {
    constructor() { }
    options = {...};
    layers = [ ... ];
    layersControl = {
        overlays: {
            'Map WMS Layer": tileLayer.wms('http://...', {version: '1.1.1', newModelName: 'default', view: 'default', year: '2018');
        }
    };
    ngOnInit() {}
    initMap(map: Map) {...}
    updateLayer($event) {
        const updateOptions = {version:'1.1.1',newModelName:$event.newModelName,view:$event.view,year:$event.year};
        this.layersControl.overlays['Map WMS Layer'].setParams(updateOptions);
        this.layersControl.overlays['Map WMS Layer'].redraw();
    }
}

Чего я хочу достичь: при изменении значения в левом столбце,URL-адрес WMS в слое карты будет обновлен и обновлен.

Я попытался использовать EventEmitter для анализа обновленного значения в родительском компоненте и вызова компонента дочерней карты для обновления слоя WMS, но он не работает.Это потому, что подход неправильный?

Спасибо.

Answer 1

Вы не можете изменять параметры существующего слоя таким образом.Вы должны рассматривать слои карты как неизменяемые и не подлежащие повторному использованию между картами.В этом случае вам следует создать новый слой с новым URL-адресом, а затем изменить массив [leafletLayers], чтобы получить новый слой.

Если вы хотите изменить слои на карте layersControl.overlays, вы 'Мне нужно изменить имя ключа, потому что обнаружение изменений не будет работать, если все, что вы изменяете, это слой, на который ссылается существующий ключ.Но если ваше событие передало новое имя слоя вместе с новой информацией о слое, вы могли бы сделать что-то вроде следующего:

export class MapComponent implements OnInit {
  constructor() { }
  options = {...};
  layers = [ ... ];
  layersControl = {
    overlays: {
      'Map WMS Layer": tileLayer.wms('http://...', {version: '1.1.1', newModelName: 'default', view: 'default', year: '2018');
    }
  };
  ngOnInit() {}
  initMap(map: Map) {...}
  updateLayer($event) {
    let overlays = {};
    overlays[$event.newKey] = tileLayer.wms('http://...', { 
      version: '1.1.1',
      newModelName: $event.newModelName,
      view: $event.view,
      year: $event.year
    });
    this.layersControl.overlays = overlays;
  }
}