Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add Tile3DLayer example #44

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions app/content/deck-gl/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,5 @@ cascade:
- "Extrusion"
- "Icon Layer"
- "Clustering"
- "3D Tiles"
---
127 changes: 127 additions & 0 deletions app/content/deck-gl/examples/3d-tiles.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<html>
<head>
<!-- FONT -->
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap"
rel="stylesheet"
/>
<script src="https://unpkg.com/deck.gl@^8.4.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/carto@^8.4.0/dist.min.js"></script>
<script src="https://unpkg.com/@loaders.gl/[email protected]/dist/dist.min.js"></script>

<script src="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.js"></script>
<link href="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.css" rel="stylesheet" />
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
font-size: 0.8rem;
}
#map {
width: 100vw;
height: 100vh;
}
.attributions {
position: absolute;
top: 1rem;
right: 1rem;
background-color: #fff;
padding: 0.5rem;
border-radius: 0.25rem;
opacity: 0.9;
}
.attributions > div:first-child {
text-align: center;
border-style: groove;
border-radius: 0.25rem;
padding: 0.25rem;
}
</style>
</head>

<body>
<div id="map"></div>
<div class="attributions">
<div>
<b>Tileset Credentials</b>
<div>
<span>
<a href="https://cesium.com/" target="_blank">
<img alt="Cesium ion" src="https://assets.cesium.com/ion-credit.png" />
</a>
</span>
</div>
<div>
<a href="https://cesium.com/pricing/" target="_blank">
Upgrade for commercial use.
</a>
</div>
<div>
<span>
Modified from
<a href="https://data.melbourne.vic.gov.au/Property-Planning/City-of-Melbourne-3D-Point-Cloud-2018/2dqj-9ydd" target="_blank">
City of Melbourne 3D Point Cloud
</a>
<a href="https://creativecommons.org/licenses/by/4.0/legalcode" target="_blank">
CC BY 4.0
</a>
</span>
</div>
</div>
</div>
</body>

<script type="text/javascript">
const ION_ASSET_ID = 43978;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably host the 3D tiles ourselves instead of using Cesium Ion.

I'm not sure about using this dataset. There is another dataset with New York buildings that can be downloaded using the following link:

https://s3.amazonaws.com/cesiumjs/3DTiles/NewYorkCityGml.zip

But I'm not sure about the license. The best way for us to be covered will be to download the CityGML New York buidlings from here:

https://www1.nyc.gov/site/doitt/initiatives/3d-building.page

And convert them to 3D tiles.

This is out of the scope of this issue, so we are going to keep this PR open until we have a solution.

const ION_TOKEN =
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYWMxMzcyYy0zZjJkLTQwODctODNlNi01MDRkZmMzMjIxOWIiLCJpZCI6OTYyMCwic2NvcGVzIjpbImFzbCIsImFzciIsImdjIl0sImlhdCI6MTU2Mjg2NjI3M30.1FNiClUyk00YH_nWfSGpiQAjR5V2OvREDq1PJ5QMjWQ';
const TILESET_URL = `https://assets.cesium.com/${ION_ASSET_ID}/tileset.json`;

let viewState = {
latitude: 40,
longitude: -75,
pitch: 45,
maxPitch: 60,
bearing: 0,
minZoom: 2,
maxZoom: 30,
zoom: 17
};

function initialize() {
// Create Deck.GL map
const deckgl = new deck.DeckGL({
container: 'map',
mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
initialViewState: viewState,
controller: true,
layers: [
new deck.Tile3DLayer({
id: 'tile-3d-layer',
pointSize: 2,
data: TILESET_URL,
loader: loaders.CesiumIonLoader,
loadOptions: { 'cesium-ion': { accessToken: ION_TOKEN } },
onTilesetLoad: (tileset) => {
const { cartographicCenter, zoom } = tileset;

viewState = {
...viewState,
longitude: cartographicCenter[0],
latitude: cartographicCenter[1],
zoom
}

deckgl.setProps({
initialViewState: viewState
});
}
})
]
});
}

initialize();
</script>
</html>
7 changes: 7 additions & 0 deletions app/content/deck-gl/examples/3d-tiles.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
## Tile 3D Layer

The Tile3DLayer renders 3d tiles data formatted according to the 3D Tiles Specification and ESRI I3S.

<iframe src="../3d-tiles.html" style="border: 1px solid #cfcfcf; width: 100%; height: 500px" title="Tile3DLayer"></iframe>

{{<codeHighlight src="3d-tiles.html" lang="html">}}