Question

已更新为包含完整的对话代码。

我有一个带有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();
  }
}

最后，运行时错误：我具有相同的导入，已经验证了地图对象正在传递到对话框中。我想念什么？

谢谢。...

Answer 1

最终使对话框选择要显示/隐藏的图层，然后将每个图层的状态返回到地图组件。然后，地图组件根据对话框的返回显示/隐藏图层。似乎是一种环形交通方式，但是行得通！

角度方法在组件中起作用，但在对话框中不起作用

1 个答案: