Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
  • Sign in
  • V Visualization
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Locked Files
  • Issues 4
    • Issues 4
    • List
    • Boards
    • Service Desk
    • Milestones
    • Iterations
    • Requirements
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
    • Test Cases
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Packages & Registries
    • Packages & Registries
    • Package Registry
    • Infrastructure Registry
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Code review
    • Insights
    • Issue
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Volker Coors
  • Visualization
  • Wiki
  • Exercise for multiresolution models
  • Visualization with CesiumJS

Last edited by Rager Jun 22, 2020
Page history

Visualization with CesiumJS

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/

<!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 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.

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:

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')"]
        ]
    }    
});
Clone repository
  • Exercise for Multiresolution Models
    • Feature manipulation engine (FME)
    • Introduction
    • Open source datasets
    • Visualization with ArcGIS
    • Visualization with CesiumJS
    • Visualization with Deck.gl
  • FME
  • Project_1
  • Useful tools
  • Visualization of Bike Sharing Data
  • cesium fundamentals
  • Home

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal