已更新为包含完整的对话代码。
我有一个带有mapbox-gl地图对象的角度应用程序。我想将地图的图层设置为隐藏/可见。在创建地图的组件中,map.setLayoutProperty()函数已定义,并且像超级按钮一样工作。但是,我要在对话框中打开/关闭图层。在对话框中,没有任何问题地传递了地图对象,但是当我尝试使用setLayoutProperty()函数切换图层时,出现运行时错误,提示该函数未定义。 在地图组件中可以正常使用:
this._mapRef.setLayoutProperty( 'satellite-street', 'visibility', 'none');
在地图组件中创建对话框的位置
layerControl() {
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.panelClass = 'layer-control-dialog';
dialogConfig.position = { top: '0',
right: '20' };
dialogConfig.data = {
map: this._mapRef
};
const dialogRef = this.layerControlDialogComponent.open(LayerControlDialogComponent, dialogConfig);
dialogRef.afterClosed().subscribe(
data => {
console.log('Dialog output: ', data.controls.acMgrName.touched )
});
}
在对话框中通过构造函数传递地图的地方:
import { Component, Inject, OnInit } from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import { LngLat, Layer, Map } from 'mapbox-gl';
@Component({
selector: 'app-layer-control',
templateUrl: './layer-control-dialog.component.html',
styleUrls: ['./layer-control-dialog.component.scss']
})
export class LayerControlDialogComponent implements OnInit {
_layers = {
markerLayer: true,
polyLayer: true,
satLayer: false,
IFRLayer: false,
VFRLayer: false,
airspaceLayer: false
}
_map: Map;
visibility = '';
constructor(public dialogRef: MatDialogRef<LayerControlDialogComponent>,
@Inject(MAT_DIALOG_DATA) map: Map) {
console.log('layer control dialog, map=', map);
this._map = map;
}
ngOnInit() {
}
onSatShowToggle(e) {
this._layers.satLayer = e.checked === true ? true : false;
this.visibility = this._layers.satLayer === true ? 'visible' : 'none';
console.log('this._map=', this._map);
this._map.setLayoutProperty( 'satellite-street',
'visibility',
this.visibility);
}
onMarkerShowToggle(e) {
this._layers.markerLayer = e.checked === true ? true : false;
}
onPolyShowToggle(e) {
this._layers.polyLayer = e.checked === true ? true : false;
}
onRadioGroupToggle(e) {
switch (e.value) {
case 'vfrLayer': this._layers.VFRLayer = true;
this._layers.IFRLayer = false;
this._layers.airspaceLayer = false;
break;
case 'ifrLayer': this._layers.VFRLayer = false;
this._layers.IFRLayer = true;
this._layers.airspaceLayer = false;
break;
case 'airspaceLayer': this._layers.VFRLayer = false;
this._layers.IFRLayer = false;
this._layers.airspaceLayer = true;
break;
}
}
close(e) {
this.dialogRef.close();
}
}
最后,运行时错误: 我具有相同的导入,已经验证了地图对象正在传递到对话框中。我想念什么?
谢谢。...
答案 0 :(得分:0)
最终使对话框选择要显示/隐藏的图层,然后将每个图层的状态返回到地图组件。然后,地图组件根据对话框的返回显示/隐藏图层。似乎是一种环形交通方式,但是行得通!