angular5 ngx-leaflet 如何根据另一个组件的变化刷新 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();
    }
}

我想达到的目标：当左侧栏的值发生变化时，地图图层中的WMS URL将更新并刷新。

我尝试使用 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;
  }
}

angular5 ngx-leaflet 如何根据另一个组件的变化刷新 wms 层

angular5 ngx-leaflet how to refresh wms layer based on changes in another component

angular5

ngx-leaflet