Skip to content

2_data_visualization.md

Latest commit

 

History

History
170 lines (108 loc) · 5.33 KB

2_data_visualization.md

File metadata and controls

170 lines (108 loc) · 5.33 KB

2. Data Visualization

In this module, we will start visualizing the 3D Tiles we created in the previous module. We will load the 3D Tiles into a CesiumJS web environment and customize the tileset styles. Additionally, we will add 3D models to the visualization.

Setting up a server

We'll start by installing a web server to serve the 3D Tiles. For this, we use the Node.js tool 'http-server'.

C:\workshop_3dtiles> npm install -g http-server

Open the command line and navigate to the working directory. Start the server with the following command:

C:\workshop_3dtiles> http-server
Starting up http-server, serving ./

http-server version: 14.1.1

http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://192.168.178.60:8080
  http://127.0.0.1:8080
  http://172.24.32.1:8080
Hit CTRL-C to stop the server

Open a web browser and go to http://localhost:8080. Files in the working directory will now be displayed.

Cesium Viewer

To load the 3D Tiles into a CesiumJS web environment, we will use the Cesium Viewer.

Copy the index.html file from the 3D Tiles workshop repository to your working directory.

Open index.html in a text editor. In the code, 2 tilesets are loaded:

  • DTB Polygons: ./dtb_polygons/tileset.json
  • DTB points: ./dtb_points/tileset.json

Open a browser and go to http://localhost:8080/index.html. The 3D Tiles will now be displayed in the Cesium Viewer.

The Cesium viewer contains several map layers:

  • PDOK BRT background map;
  • 3D Basic Facility - Digital Terrain Model (DTM)

https://api.pdok.nl/kadaster/3d-basisvoorziening/ogc/v1_0/collections/digitaalterreinmodel

Inspect the DTB polygons, trees, and buildings in the viewer. What attributes are available for each layer?

Exercise: Add the Andijk 3D BAG buildings to the viewer.

For a solution to this exercise, you can refer to the file ./results/2_data_visualization.txt.

Customizing Tileset Styles

Styling can be applied to the tileset in two ways:

  • during the generation of the tileset
  • via the index.html file

In this exercise, styling will be applied via the index.html file.

For a description of the 3D Tiles Styling language, see https://github.com/CesiumGS/3d-tiles/tree/main/specification/Styling

Open index.html in a text editor. Add the following code for the DTB polygons tileset at the location of '// todo: add code here':

    tilesetDtbPolygons.style = new Cesium.Cesium3DTileStyle({
      color: {
        conditions: [
        ["${feature['omschr']} === 'Bitumen'", "color('#430719')"],
        ["${feature['omschr']} === 'Steen bekleding'", "color('#740320')"],
        ["${feature['omschr']} === 'Bomen en struiken'", "color('#008000')"],
        ["${feature['omschr']} === 'Industrieterrein'", "color('#FFFF00')"]
        // todo: add more conditions
        ]
      }
    });

View the result in the Cesium Viewer. The polygons are now colored based on their description.

Assignment: Make features where omschr === 'Meer' (Lake) blue.

Adding 3D Models

Besides 3D Tiles, we can also add individual 3D models to the visualization.

Copy the 3D model windturbine.glb from the 3D Tiles workshop repository to your working directory.

View the model in a 3D Viewer:

The glTF also contains an animation for the blades.

Add the following code to index.html and view the result in the browser:

    const windturbine = viewer.entities.add({ 
      position: Cesium.Cartesian3.fromDegrees(5.193486,52.754867), 
      model: { 
        uri: "windturbine.glb"         
     }, 
    });

Load the viewer; a wind turbine with animation will be displayed in the Cesium Viewer.

3D Basic Facility

In the PDOK 3D Basic Facility, a number of national 3D tilesets are available that we can load into the Cesium Viewer.

See https://api.pdok.nl/kadaster/3d-basisvoorziening/ogc/v1_0/collections/gebouwen for a description of the 3D buildings tileset.

Add this tileset to the Cesium Viewer and inspect the buildings.

const tileset3DBuildings = await Cesium.Cesium3DTileset.fromUrl(
  "https://api.pdok.nl/kadaster/3d-basisvoorziening/ogc/v1_0/collections/gebouwen/3dtiles"
);  
viewer.scene.primitives.add(tileset3DBuildings);

QGIS

In this exercise, we will load the created 3D BAG buildings 3D Tiles into QGIS.

Open QGIS and go to the menu option 'Layer' -> 'Data Source Manager' and select 'Scene'.

Add the 3D BAG buildings via

  • Set 'Source Type' to 'Service'

Create a new connection via the 'New' button -> 'New Cesium 3D Tiles Connection'

Name: buildings

URL: http://localhost:8080/andijk_buildings/tileset.json

Click Add, the 3D BAG buildings are now displayed in QGIS.

Question: Why do all buildings consist of triangles?

To view in 3D in QGIS, go to View -> 3D Map Views -> new 3D Map View

A new window with the 3D Tiles should open.

What do you notice about the 3D View in QGIS?