ArcGIS API 场景添加 3D Tiles

背景知识

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

    }

  };

}

最终效果：

ArcGIS API场景添加3DTiles