|
|
|
# Deck.gl
|
|
|
|
Deck.gl is a JavaScript framework for data visualization developed by Uber. It supports both the I3S and the 3D tiles format and can render them. You can use the hosted version or download it, like the Cesium library, from their website:
|
|
|
|
|
|
|
|
https://deck.gl/#/documentation/getting-started/installation.
|
|
|
|
|
|
|
|
# Sample code for I3S
|
|
|
|
```html
|
|
|
|
<!doctype html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
|
|
|
|
<script src="https://unpkg.com/@loaders.gl/i3s@2.1.6/dist/dist.min.js"></script>
|
|
|
|
<script src="https://unpkg.com/@deck.gl/geo-layers@latest/dist.min.js"></script>
|
|
|
|
<style>
|
|
|
|
#container {
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="container">
|
|
|
|
<canvas id="deck-canvas"></canvas>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
const INITIAL_VIEW_STATE = {
|
|
|
|
longitude: -74.007,
|
|
|
|
latitude: 40.712,
|
|
|
|
zoom: 14,
|
|
|
|
bearing: 0,
|
|
|
|
pitch: 60
|
|
|
|
};
|
|
|
|
|
|
|
|
new deck.DeckGL({
|
|
|
|
canvas: 'deck-canvas',
|
|
|
|
width: '100%',
|
|
|
|
height: '100%',
|
|
|
|
initialViewState: INITIAL_VIEW_STATE,
|
|
|
|
controller: true,
|
|
|
|
layers: [
|
|
|
|
new deck.Tile3DLayer({
|
|
|
|
id: 'tile-3d-layer',
|
|
|
|
data: 'https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Buildings_NewYork_17/SceneServer/layers/0',
|
|
|
|
loader: I3SLoader
|
|
|
|
})
|
|
|
|
]
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
You will have to wait a bit after opening the HTML document in your browser.
|
|
|
|
|
|
|
|
# Sample code for 3D tiles
|
|
|
|
|
|
|
|
```html
|
|
|
|
<!doctype html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
|
|
|
|
<script src="https://unpkg.com/@loaders.gl/3d-tiles@2.1.6/dist/dist.min.js"></script>
|
|
|
|
<script src="https://unpkg.com/@deck.gl/geo-layers@latest/dist.min.js"></script>
|
|
|
|
<style>
|
|
|
|
#container {
|
|
|
|
position: fixed;
|
|
|
|
top:0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="container">
|
|
|
|
<canvas id="deck-canvas"></canvas>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
const INITIAL_VIEW_STATE = {
|
|
|
|
longitude: -74.007,
|
|
|
|
latitude: 40.712,
|
|
|
|
zoom: 14,
|
|
|
|
bearing: 0,
|
|
|
|
pitch: 60
|
|
|
|
};
|
|
|
|
new deck.DeckGL({
|
|
|
|
canvas: 'deck-canvas',
|
|
|
|
width: '100%',
|
|
|
|
height: '100%',
|
|
|
|
initialViewState: INITIAL_VIEW_STATE,
|
|
|
|
controller: true,
|
|
|
|
layers: [
|
|
|
|
new deck.Tile3DLayer({
|
|
|
|
id: 'tile-3d-layer',
|
|
|
|
data: 'url/to/your/tileset/tileset.json',
|
|
|
|
loader: Tiles3DLoader
|
|
|
|
})
|
|
|
|
]
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
|
|
|
|
```
|
|
|
|
# Styling
|
|
|
|
Styling for this framework is still developed and currently not available. |
|
|
\ No newline at end of file |
