Mapbox使用deck.gl添加I3S

效果图：

在npm install loaders.gl --save 之后发现，import { I3SLoader } from '@loaders.gl/i3s'; 该句报错，

最后引入@loaders.gl/i3s 成功。

代码部分：

import { Component, ElementRef, OnInit } from '@angular/core';

import mapboxgl from 'mapbox-gl';

import { MapboxLayer } from '@deck.gl/mapbox';

import { Tile3DLayer } from '@deck.gl/geo-layers';

import { I3SLoader } from '@loaders.gl/i3s';

@Component({

  selector: 'app-tile3d-layer-i3s',

  templateUrl: './tile3d-layer-i3s.component.html',

  styleUrls: ['./tile3d-layer-i3s.component.scss']

})

export class Tile3dLayerI3sComponent implements OnInit {

  private map: mapboxgl.Map;

  constructor(private el: ElementRef,) { }

  ngOnInit() {

  }

  ngAfterViewInit() {

    let target: HTMLElement = this.el.nativeElement.querySelector('.map');

    mapboxgl.accessToken = "pk.eyJ1IjoiaGFwcHlwb3J0IiwiYSI6ImNpcmxtcXZ0OTAwNWJmbG5iZGZzcWtqZWsifQ.QnpWedGghZatVbS6wEeFtw";

    this.map = new mapboxgl.Map({

      container: target,

      style:'mapbox://styles/mapbox/dark-v10',

      attributionControl: false,

      center: [-122.4, 37.78],

      zoom: 12,

      pitch:45

    });

    this.map.on('load', this.addTile3DI3SLayer.bind(this));

  }

  private addTile3DI3SLayer() {

    const tile3dLayer = new MapboxLayer({

      type: Tile3DLayer,

      id: 'tile-3d-layer',

      data: 'https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer/layers/0',

      loader: I3SLoader

    });

    this.map.addLayer(tile3dLayer);

  }

}