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

时间:2018-06-08 00:11:35

标签: angular5 ngx-leaflet

我在网页上使用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层,但它无法正常工作。 是因为方法不正确吗?

谢谢。

1 个答案:

答案 0 :(得分:0)

您不能像这样修改现有图层的参数。您应该将地图图层视为不可变的,而不是在地图之间重复使用。在这种情况下,您应该使用新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