将卫星图层添加到 ngx-mapboxgl 街道地图答案

【问题标题】：adding satellite layer to ngx-mapboxgl street map将卫星图层添加到 ngx-mapboxgl 街道地图
【发布时间】：2019-03-20 13:14:59
【问题描述】：

我花了一天的时间试图破译如何将卫星图层添加到角度地图中的 ngx-mapboxgl 地图中，并且认为我非常接近。我相信我已经设法将图层添加到地图中，但是我遇到了一个错误，我不知道如何在运行时修复。这是我创建地图的 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-map>
  <div class="map-overlay">
    <button mat-button (click)="layerControl()"><mat-icon>layers</mat-icon>    </button>
  </div>
  </mat-card-content>
</mat-card>

这是我尝试添加卫星层的代码：

  loadMap( map: Map) {
     this._mapRef = map;
     this._center = map.getCenter();
     this._mapRef.addLayer({
       "id": "satellite",
       "type": "raster",
       "visible": "visible",
       "source": {
         "type": "raster",
         "source": 'mapbox://styles/v1/mapbox/satellite-streets-v9'
       },
       maxzoom: 14
     });
  
     console.log('map=',this._mapRef);
   }

首先，当我指定栅格类型时，我收到一个编译器错误，告诉我使用的是 GeoJSON 类型（ERROR in ../home/home.component.ts(93,9): error TS2322：类型 '{ "type": string; "source": string; }' 不可分配给类型 'string | GeoJSONSourceRaw | VideoSourceRaw | ImageSourceRaw | CanvasSourceRaw | VectorSource | RasterSource | RasterDemSource'。对象字面量只能指定已知属性，而 '"source"' 不存在于类型 'AnySourceData' 中。)

，然后我收到一个运行时错误，抱怨长度，我无法确定它被抛出的位置：

我搜索并搜索了一些关于如何在 Angular 中执行此操作的文档，但没有找到任何适用于 ngx/angular 和 ts 的示例。我确信可以做到，但目前不知道下一步该往哪里走。

任何指针？

谢谢.......

【问题讨论】：

标签： angular mapbox-gl

【解决方案1】：

经过几天的挖掘和试验，我终于有了将卫星图层添加到 ngx-mapboxgl 街道地图并切换其可见性的代码。将图层添加到地图的代码：

  loadMap( map: Map) {
    this._mapRef = map;
    this._center = map.getCenter();
    this._mapRef.addLayer({
      id: 'satellite-street',
      type: 'raster',
      layout: {
        visibility: 'visible'
      },
      source: {
        type: 'raster',
        url: 'mapbox://mapbox.satellite'
      },
      'source-layer': 'satellite',
      maxzoom: 15
    });

以及打开/关闭其可见性的线条：

 this._mapRef.setLayoutProperty( 'satellite-street', 'visibility', 'visible');

希望这可以为其他人节省大量浪费时间试图找到所有记录在现场的时间。

干杯！

【讨论】：