Tile3DLayer
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 pixels.
This value is only applied when tile format is pnts.
Data Properties
data (String)
- A URL to fetch tiles entry point of
3D TilesTileset JSON file orIndexed 3D Scene Layerfile I3S.
loader (Object)
- Default
Tiles3DLoader
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 theloaderprop.tileset: Forward parameters to theTileset3Dinstance 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 ispntsand 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.
_getMeshColor (Function, optional)
_getMeshColor is a function which allows to change color of mesh based on properties of tileHeader object.
It recieves tileHeader object as argument and return type is array of [r, g, b] values in the 0-255 range.
This value is only applied when tile format is mesh.
Can be used only for I3S debugging purposes.
- Default:
_getMeshColor: (tileHeader) => [255, 255, 255]
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)._lightingis default topbr.
pointcloud- a PointCloudLayer rendering all the tiles with Point Cloud format (pnts).mesh- a SimpleMeshLayer rendering all the tiles ESRIMeshPyramidsdata.
Follow CompositeLayer and example in this layer doc to see how to override sub layer props.
Remarks
- The
Tile3DLayercan be rendered in multiple views. A tile is loaded if it is required by any of the viewports, and shared across all views via a single cache system.