>

저는 각도 맵에서 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'유형에 지정할 수 없습니다.   객체 리터럴은 알려진 속성 만 지정할 수 있으며 ' "소스"'는 'AnySourceData'유형에 없습니다.)

, 길이가 어디에서 발생하는지 알 수없는 런타임 오류가 발생합니다.

이 작업을 각도로 수행하는 방법에 대한 문서를 검색하고 검색했지만 ngx/angular 및 ts에 적용되는 예를 찾지 못했습니다. 할 수있을 것이라 확신하지만, 다음에 어디로 갈지 잘 모르겠습니다.

어떤 포인터?

감사합니다 .......


  • 답변 # 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');
    
    

    이것은 다른 사람들에게이 문서를 모두 찾아 내기 위해 많은 시간을 낭비하게 할 것입니다.

    건배!

  • 이전 java - 내 HostnameVerifier 구현을 사용하도록 Jetty HTTP/2 클라이언트 구성
  • 다음 reactjs - 동일한 페이지 레이아웃에서 다른 구성 요소로 이동