Mapbox使用deck.gl添加点云数据

效果图

依赖包

代码：

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);

  }

}