Chevron DownAPI Reference

Tile3DLayer (Experimental)

The Tile3DLayer renders 3d tiles data formatted according to the 3D Tiles Specification and ESRI I3S , which is supported by the Tiles3DLoader.

Tile3DLayer is a CompositeLayer. Base on each tile type, it uses a PointCloudLayer, a ScenegraphLayer or SimpleMeshLayer to render.

References

Load a 3D tiles dataset from ION server. Set up Ion account;

import DeckGL from '@deck.gl/react';
import {CesiumIonLoader} from '@loaders.gl/3d-tiles';
import {Tile3DLayer} from '@deck.gl/geo-layers';

function App({viewState}) {
  const layer = new Tile3DLayer({
    id: 'tile-3d-layer',
    // tileset json file url
    data: 'https://assets.cesium.com/43978/tileset.json',
    loader: CesiumIonLoader,
    // https://cesium.com/docs/rest-api/
    loadOptions: {
      'cesium-ion': {accessToken: '<ion_access_token_for_your_asset>'}
    },
    onTilesetLoad: (tileset) => {
      // Recenter to cover the tileset
      const {cartographicCenter, zoom} = tileset;
      this.setState({
          viewState: {
            ...this.state.viewState,
            longitude: cartographicCenter[0],
            latitude: cartographicCenter[1],
            zoom
          }
      });
    },
    // override scenegraph subLayer prop
    _subLayerProps: {
      scenegraph: {_lighting: 'flat'}
    }
  });

  return <DeckGL viewState={viewState} layers={[layer]} />;
}

Load I3S Tiles

import DeckGL from '@deck.gl/react';
import {I3SLoader} from '@loaders.gl/i3s';
import {Tile3DLayer} from '@deck.gl/geo-layers';

function App({viewState}) {
  const layer = new Tile3DLayer({
    id: 'tile-3d-layer',
    // Tileset entry point: Indexed 3D layer file url
    data: 'https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer/layers/0',
    loader: I3SLoader
  });

  return <DeckGL viewState={viewState} layers={[layer]} />;
}

Installation

To install the dependencies:

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers @deck.gl/mesh-layers @deck.gl/geo-layers
import {Tile3DLayer} from '@deck.gl/geo-layers';
new Tile3DLayer({});

To use pre-bundled scripts:

<script src="https://unpkg.com/deck.gl@^8.0.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^8.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@^8.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/mesh-layers@^8.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/geo-layers@^8.0.0/dist.min.js"></script>
new deck.Tile3DLayer({});

Properties

Inherits from all Base Layer and CompositeLayer properties.

Along with other options as below,

Render Options

opacity (Number, Optional)
  • Default 1.0

The opacity of the layer. The same as defined in layer.

pointSize (Number, Optional)
  • Default 1.0

Global radius of all points, in units specified by sizeUnits (default pixels). This value is only applied when tile format is pnts.

Data Properties

data (String)
  • A URL to fetch tiles entry point of 3D Tiles Tileset JSON file or Indexed 3D Scene Layer file I3S.
loader (Object)

A loader which is used to decode the fetched tiles. Available options are CesiumIonLoader,Tiles3DLoader, I3SLoader.

loadOptions (Object, Optional)

On top of the default options, also support the following keys:

  • [loader.id] passing options to the loader defined by the loader prop.
  • tileset: Forward parameters to the Tileset3D instance after fetching the tileset metadata.
import {CesiumIonLoader} from '@loaders.gl/3d-tiles';
import {Tile3DLayer} from '@deck.gl/geo-layers';

const layer = new Tile3DLayer({
  id: 'tile-3d-layer',
  // tileset json file url
  data: 'https://assets.cesium.com/43978/tileset.json',
  loader: CesiumIonLoader,
  loadOptions: {
    tileset: {
      throttleRequests: false,
    },
    'cesium-ion': {accessToken: '<ion_access_token_for_your_asset>'}
  }
})
pickable (Boolean, Optional)
  • Default: false

When picking is enabled, info.object will be a Tile3DHeader object.

Data Accessors

getPointColor (Function|Array, Optional)

  • Default [0, 0, 0, 255]

    The rgba color at the target, in r, g, b, [a]. Each component is in the 0-255 range. This value is only applied when tile format is pnts and no color properties are defined in point cloud tile file.

Callbacks

onTilesetLoad (Function, optional)

onTilesetLoad is a function that is called when Tileset JSON file is loaded. Tileset object is passed in the callback.

  • Default: onTilesetLoad: (tileset) => {}
onTileLoad (Function, optional)

onTileLoad is a function that is called when a tile in the tileset hierarchy is loaded. Tile3D object is passed in the callback.

  • Default: onTileLoad: (tileHeader) => {}
onTileUnload (Function, optional)

onTileUnload is a function that is called when a tile is unloaded. Tile3D object is passed in the callback.

  • Default: onTileUnload: (tileHeader) => {}
onTileError (Function, optional)

onTileError is a function that is called when a tile failed to load.

  • Default: onTileError: (tileHeader, url, message) => {}
    • url: the url of the failed tile.
    • message: the error message.

Sub Layers

The Tile3DLayer renders the following sublayers based on tile format:

  • scenegraph - a ScenegraphLayer rendering all the tiles with Batched 3D Model format (b3dm) or Instanced 3D Model format (i3dm).
    • _lighting is default to pbr.
  • pointcloud - a PointCloudLayer rendering all the tiles with Point Cloud format (pnts).
  • mesh - a SimpleMeshLayer rendering all the tiles ESRI MeshPyramids data.

Follow CompositeLayer and example in this layer doc to see how to override sub layer props.

Source

modules/geo-layers/src/tile-3d-layer