angular项目中mapbox.gl 和deck.gl结合使用

效果图

1, 安装相应的包

"deck.gl": "^8.2.6", "loaders.gl": "^0.3.5",

2，deck.gl相应layer的引入

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

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

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

import {GeoJsonLayer, PolygonLayer, } from '@deck.gl/layers';

import { AmbientLight, PointLight, LightingEffect, Deck } from '@deck.gl/core';

import {COORDINATE_SYSTEM, OrbitView, LinearInterpolator} from '@deck.gl/core';

import {PointCloudLayer, ColumnLayer,} from '@deck.gl/layers';

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

import {CesiumIonLoader} from '@loaders.gl/3d-tiles';

import {Tiles3DLoader} from '@loaders.gl/3d-tiles';

3，deck.gl在mapbox.gl的结合使用

1，deck.gl 加载 geojson

const geojsonLayer = (map, layerid, options: any) =>{

const layer = new MapboxLayer({

id: layerid || 'geojson-layer',
type: GeoJsonLayer,
data: './assets/config/mock.data/street.json', 
minZoom: 0,
maxZoom: 19,
pickable: false,
stroked: true,
filled: true,
autoHighlight: false,
highlightColor: [0, 180, 0, 200],
extruded: false,
lineWidthScale: 0,
lineWidthMinPixels: 1,
getFillColor: [255, 0, 180, 0],
getLineColor: [255, 255, 0, 255],
getRadius: 0,
wireframe: false,
getLineWidth: 10,
getElevation: 8000

}); map.addLayer(layer); }

2，点云数据的加载 const pointCloudLayer = (map, layerid, options: any,callback, latlng?)=>{

const layer = new MapboxLayer({

id: layerid || 'laz-point-cloud-layer',
type: PointCloudLayer,
data: options, 
pickable: false,
coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
coordinateOrigin: latlng || [120.71709,31.29697],
pointSize: 4,
getPosition: d => d.position,
getNormal: d => d.normal,
getColor: d => d.color

});

map.addLayer(layer); }

3,3dTIles数据加载 const title3dLayer = (map, layerid, options: any, callback)=>{

const layer = new MapboxLayer({

id: layerid || 'mapbox-3dtitle-layer',
type: Tile3DLayer,
data: options, 
loader: Tiles3DLoader,
loadOptions: { '3d-tiles': { isTileset: true },
loadGLTF: true},
onTilesetLoad: (tileset) => {
  // Recenter to cover the tileset
  const {cartographicCenter, zoom} = tileset;
 // console.log(23, cartographicCenter, zoom);
  callback(cartographicCenter, zoom);
},
onTileUnload: (tileHeader)=>{
  console.log('unload', tileHeader);
},
onTileError: (tileHeader, url, message)=>{
  console.log('error', tileHeader, url, message);
},

});

map.addLayer(layer);

}