Question

我已经花了整整一天的时间来尝试解密如何在角度地图的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类型（../home/home.component.ts(93,9）中的错误：错误TS2322：类型“ {{type”：字符串；“源”：string；}”不能分配给类型“字符串| GeoJSONSourceRaw | VideoSourceRaw | ImageSourceRaw | CanvasSourceRaw | VectorSource | RasterSource | RasterDemSource”。对象文字只能指定已知的属性，类型“ AnySourceData”中不存在““ source”'。）

，然后我得到一个运行时错误，抱怨长度，我无法弄清楚它在哪里被抛出：

我搜索并搜索了一些有关如何在angular中执行此操作的文档，但未找到适用于ngx / angular和ts的任何示例。我敢肯定这是可以做到的，但是目前下一步该走到哪里了。

有指针吗？

谢谢.......

Answer 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');

希望这可以节省一些其他人浪费的时间来尝试找到所有记录在案的东西。

干杯！

在ngx-mapboxgl街道地图中添加卫星图层

1 个答案: