добавление спутникового слоя в карту улиц ngx-mapboxgl

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: Тип '{"тип":string; "source": string;} 'нельзя назначить типу' string | GeoJSONSourceRaw | VideoSourceRaw | ImageSourceRaw | CanvasSourceRaw | VectorSource | RasterSource | RasterDemSource '. Литерал объекта может указывать только известные свойства, а "source" "не существуетв типе 'AnySourceData'. )

, тогда я получаю ошибку времени выполнения, сообщающую о длине, которую я не могу определить, где она выбрасывается:

Я искал и искал документацию о том, как сделать это в 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');

Надеюсь, это сэкономит многим другим людям потраченное впустую время, пытаясь найти все это на месте.

ура!