代碼：
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?{?CesiumIonLoader?}?from?'@loaders.gl/3d-tiles';
@Component({
??selector:?'app-tile3d-layer-point',
??templateUrl:?'./tile3d-layer-point.component.html',
??styleUrls:?['./tile3d-layer-point.component.scss']
})
export?class?Tile3dLayerPointComponent?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:?[145,?-37.8],
??????pitch:?45,
??????zoom:?11
????});
????this.map.on('load',?this.addTile3DLayer.bind(this));
??}
??private?addTile3DLayer()?{
????const?ION_ASSET_ID?=?43978;
????const?ION_TOKEN?=
??????'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYWMxMzcyYy0zZjJkLTQwODctODNlNi01MDRkZmMzMjIxOWIiLCJpZCI6OTYyMCwic2NvcGVzIjpbImFzbCIsImFzciIsImdjIl0sImlhdCI6MTU2Mjg2NjI3M30.1FNiClUyk00YH_nWfSGpiQAjR5V2OvREDq1PJ5QMjWQ';
????const?TILESET_URL?=?`https://assets.cesium.com/43978/tileset.json`;
????const?tile3dLayer?=?new?MapboxLayer({
??????type:?Tile3DLayer,
??????id:?'tile-3d-layer',
??????pointSize:?2,
??????data:?TILESET_URL,
??????loader:?CesiumIonLoader,
??????loadOptions:?{
????????tileset:?{
??????????throttleRequests:?false,
????????},
????????'cesium-ion':?{?accessToken:?ION_TOKEN?}
??????},
????});
????this.map.addLayer(tile3dLayer);
??}
}
