ОБНОВЛЕНО, ЧТОБЫ ВКЛЮЧИТЬ ПОЛНЫЙ КОД ДИАЛОГА.
У меня есть угловое приложение с объектом 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();
}
}
и, наконец, ошибка времени выполнения:
У меня тот же импорт, я проверил, что объект карты передается в диалог Чего мне не хватает?
Спасибо ....