|
|
|
# CesiumJS
|
|
|
|
CesiumJS is a JavaScript library which helps you display the generated model in the web browser. The library has to be included into the HTML code of your website. You can use the hosted version from Cesium or download the JavaScript library and work with it locally on your computer.
|
|
|
|
https://cesium.com/cesiumjs/
|
|
|
|
# Sample code
|
|
|
|
In this sample the CesiumJS library is integrated as an online resource via a script tag. This sample code is also available on the official Cesium website alongside with a few tutorials:
|
|
|
|
|
|
|
|
https://cesium.com/docs/tutorials/getting-started/
|
|
|
|
|
|
|
|
```html
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<script src="https://cesium.com/downloads/cesiumjs/releases/1.70/Build/Cesium/Cesium.js"></script>
|
|
|
|
<link href="https://cesium.com/downloads/cesiumjs/releases/1.70/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
|
|
|
<style>
|
|
|
|
html, body, #cesiumContainer {
|
|
|
|
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="cesiumContainer"></div>
|
|
|
|
<script>
|
|
|
|
var viewer = new Cesium.Viewer('cesiumContainer');
|
|
|
|
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
|
|
|
|
url : 'url/to/your/tileset/tileset.json',
|
|
|
|
}));
|
|
|
|
viewer.zoomTo(tileset);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
Replace the url property with the path to your own tileset.json file from the [FME](Converting-datasets-with-Feature-manipulation-engine-(FME)) conversion. The tileset.json file and the data folder must be hosted on a server (e.g. Apacheon XAMPP), otherwise there can be CORS errors.
|
|
|
|
|
|
|
|
**Hint**: Use the Developer Tools included in your browser (in Firefox press F12) to check for errors.
|
|
|
|
|
|
|
|
# Styling
|
|
|
|
Cesium has its own styling language which is used to display the 3D model features in different colors or excluding them altogether from rendering in the current view:
|
|
|
|
|
|
|
|
https://github.com/CesiumGS/3d-tiles/tree/master/specification/Styling
|
|
|
|
# Sample code
|
|
|
|
You can add this code to set the style attribute for the tileset.
|
|
|
|
```javascript
|
|
|
|
tileset.style = new Cesium.Cesium3DTileStyle({
|
|
|
|
"color":"color('green')"
|
|
|
|
});
|
|
|
|
|
|
|
|
```
|
|
|
|
Or you can tie the visualization to attribute values, like a specific ID. **gml_parent_id** is used in this case:
|
|
|
|
```javascript
|
|
|
|
tileset.style = new Cesium.Cesium3DTileStyle({
|
|
|
|
"color":{
|
|
|
|
"conditions": [
|
|
|
|
["${gml_parent_id}==='DENW43AL00002dlN'","rgb(212,235,80 )"],
|
|
|
|
["${gml_parent_id}==='DENW43AL00002dlV'","rgb(107,174,155 )"],
|
|
|
|
["${gml_parent_id}==='DENW43AL00002dlW'","rgb(87,199,16 )"],
|
|
|
|
["true","color('green')"]
|
|
|
|
]
|
|
|
|
}
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
