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]数组以获得新图层。

如果您想更改<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:fontFamily="@font/font_semibold" android:text="@string/custom_font" />地图中的图层，则需要修改密钥名称，因为如果您要更改的是所有现有密钥的图层，则更改检测将不起作用指。但是，如果您的事件传递了图层的新名称以及新图层信息，您可以执行以下操作：

layersControl.overlays

angular5 ngx-leaflet如何根据另一个组件的更改来刷新wms层

1 个答案: