背景知识
deck.gl是由Uber开发并开源出来的基于WebGL的大数据量可视化框架。它具有提供差别类型可视化图层，GPU渲染的高性能等特征。基于deck.gl，用户可以快速的组合多个不同场景的图层，实现一个视觉效果。
在线3D图层Tile3DLayer
deck.gl框架实验性地支持Tile3DLayer图层。Tile3DLayer可以支持3D Tiles和 ESRI I3S。这些功能的实现借助了Uber的另一个框架loaders.gl的Tiles3DLoader 和 I3SLoader的能力。
需要的相关依赖有：
import {Tile3DLayer} from '@deck.gl/geo-layers';
import {I3SLoader} from '@loaders.gl/i3s';
import {Tiles3DLoader} from '@loaders.gl/3d-tiles';
@deck.gl/arcgis模块
deck.gl推出了@deck.gl/arcgis模块，使得它的图层与 ArcGIS API for JavaScript 结合使用。二维使用它的DeckLayer，三维使用它的DeckRenderer。
模块化开发的方式：
import {DeckLayer, DeckRenderer} from '@deck.gl/arcgis';
esri-loader的方式：
import {loadArcGISModules} from '@deck.gl/arcgis';
分别对接ArcGIS API的 layer和externalRenderer
例如：二维:
const layer = new DeckLayer({})
map.add(layer)
三维:
const renderer = new DeckRenderer(sceneView, {
layers:[]
})
externalRenderers.add(sceneView, renderer);
ArcGIS API 场景添加 3D Tiles
以上这些背景知识给我们带来了新的可能。就是在ArcGIS API构建的三维场景视图中加载3D Tiles的图层。使得地理领域专业的ArcGIS API不仅可以为ArcGIS服务，还可以为多种数据来源制造更多融合。ArcGIS API的开发者不必再去额外学习繁多的开源的API，不必更换地图框架，只需使用@deck.gl/arcgis作为插件，就可以兼容3D Tiles的三维服务。
完整代码：
//import {loadArcGISModules} from '@deck.gl/arcgis';
import {DeckRenderer} from '@deck.gl/arcgis';
import Map from "@arcgis/core/Map";
import SceneView from "@arcgis/core/views/SceneView";
import SceneLayer from "@arcgis/core/layers/SceneLayer";
import * as externalRenderers from '@arcgis/core/views/3d/externalRenderers';
import {Tile3DLayer} from '@deck.gl/geo-layers';
import {I3SLoader} from '@loaders.gl/i3s';
import {Tiles3DLoader} from '@loaders.gl/3d-tiles';
// Tileset entry point: Indexed 3D layer file url
const TILESET_URL =
'https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer/layers/0';
export async function renderToDOM(container) {
const map=new Map({
basemap: 'dark-gray-vector'
});
const sceneView = new SceneView({
container,
qualityProfile: 'high',
map: map,
environment: {
atmosphereEnabled: false
},
camera: {
position: {x: -122.4, y: 37.78, z: 3000},
heading: 0,
tilt: 25
},
viewingMode: 'local'
});
let scenelayer = new SceneLayer({
// URL to the service
url: "https://192.168.100.123/server/rest/services/Hosted/cslpk/SceneServer/layers/0"
});
map.add(scenelayer);
const renderer = new DeckRenderer(sceneView, {});
externalRenderers.add(sceneView, renderer);
sceneView.on('layerview-create', () => {
renderer.deck.layers = [
// new Tile3DLayer({
// id: 'tile-3d-layer',
// data: 'https://192.168.100.123/server/rest/services/Hosted/cslpk/SceneServer/layers/0',
// loader: I3SLoader
// }),
new Tile3DLayer({
id: 'tile-3d-layer1',
// tileset json file url
data: 'https://dans.esrichina.com/3dtiles/tileset.json',
loader: Tiles3DLoader,
loadOptions: {
'3d-tiles': {
isTileset: true,
}
}
})
];
});
return {
remove: () => {
sceneView.destroy();
renderer.dispose();
}
};
}
最终效果：