0

我在我的网页上使用 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>

父组件.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 图层，但它不起作用。是不是因为方法不对？

谢谢你。

4

1 回答 1

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;
  }
}
于 2018-06-15T18:17:43.613 回答