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