代码：
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);
}
}
