在ngx-mapboxgl中显示/隐藏图层

Question

我发现ngx-mapboxgl没有很好地记录。我正在尝试构建一个包含一组标记的图层，我希望能够打开和关闭该图层。我能够显示一个标记，我希望它在特定的图层上。但是我收到一个运行时错误，说它无法找到标记的来源，即使我已将其定义为我在网络上找到的示例。 mgl-layer的文档也有很多不足之处，甚至没有解释如何使用source，sourceLayer和layout。这是我的HTML：

<mat-card >
  <mat-card-content >
  <mgl-map
  [style]="mapStyle"
  [zoom]="_zoom"
  [center]="_center"
  (load)="loadMap($event)"
  (zoomEnd)="onZoom($event)"
  >
  <mgl-control
      mglScale
      unit="imperial"
      position="top-right">
  </mgl-control>

  <mgl-layer
    id="markerLayer"
    type="symbol"
    visibility="none"
    source="markers"
  >
  </mgl-layer>

  <mgl-marker
    [lngLat]="markerPos"
    layer="markerLayer"
    visibility="none">
  </mgl-marker>
</mgl-map>
  <div class="map-overlay">
    <button mat-button (click)="layerControl()"><mat-icon>layers</mat-icon>    </button>
  </div>
  </mat-card-content>
</mat-card>

以下是定义标记的打字稿：

import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
import { Subscription } from 'rxjs';
import { AppSettings } from '../../shared/app-settings'
import { AppSettingsService } from '../../services/app-settings.service';
import { MatDialog, MatDialogConfig } from "@angular/material";

import { LayerControlDialogComponent } from '../../dialogs/layer-control-    dialog/layer-control-dialog.component';

import { LngLat, Map } from 'mapbox-gl';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit, OnChanges {
  private className: string;
  appSettings: AppSettings;
  appSettingsSub: Subscription;
  map: Map;
  mapStyle: string;
  _zoom: number;
  _center: LngLat;
  markerPos: LngLat;
  markers = {
    'visibility': 'none'
  };

  //refs
  _mapRef: Map;

  @Output()
  centerChange: EventEmitter<LngLat> =  new EventEmitter;

  @Input()
  set zoom(z: number) {
    console.log('in zoom event');
    this._zoom = z;
    if(this.index === 0) {
      this.zoomChange.emit(this._zoom);
    }
  }
  @Output()
  zoomChange : EventEmitter<number> = new EventEmitter;

  @Input()
  index: number;

  constructor(public appSettingsService: AppSettingsService,
              public layerControlDialogComponent: MatDialog) { }

  ngOnInit() {
    this.className = this.constructor.toString().match(/\w+/g)[1];
    this._zoom = 6;

    this.appSettingsSub =     this.appSettingsService.behaviorSubject.asObservable().subscribe(value => {
      this.appSettings = value;
      if ( this.appSettings.norCalMapCenter == true ) {
        this._center = new LngLat( -121.31209, 37.449904  );
      }
      else {
        this._center = new LngLat(  -116.363804, 33.749757  );
      }
      if (this.appSettings.theme === 'tracs-dark-theme') {
        this.mapStyle = 'mapbox://styles/mapbox/dark-v9';
      }
      else {
        this.mapStyle = 'mapbox://styles/mapbox/outdoors-v9';
      }
      this.markerPos = new LngLat( -121.0, 37.5);


    });

  }
  ngOnChanges(changes) {
    if (!changes) {
      return;
    }
  }
  loadMap( map: Map) {
    this._mapRef = map;
    this._center = map.getCenter();
  }

  onZoom(e) {
    this._zoom = Math.round(this._mapRef.getZoom());
    console.log('zoom event zoom:', this._zoom);
  };

  layerControl() {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;

    const dialogRef = this.layerControlDialogComponent.open(LayerControlDialogComponent, dialogConfig);
    dialogRef.afterClosed().subscribe(
      data => {

        console.log('Dialog output: ', data.controls.acMgrName.touched )
      });

  }
}

这是我得到的错误的屏幕截图：

有没有人解决过这个问题？

谢谢....

Answer 1

你的mapStyle没有定义你为标记层声明的来源（markers =>出现在错误中的那个）

在这里看到如何正确定义一个：https://docs.mapbox.com/mapbox-gl-js/style-spec/

你使用的mapStyle是mapbox提供的，这个没有定义标记的任何层。