In the realm of geospatial visualization, CesiumJS stands out as a leading library, offering powerful tools for 3D mapping and terrain rendering. Its capabilities are further enhanced when combined with modern frontend frameworks like VueJS, which provides a reactive and component-based architecture. This synergy allows developers to create immersive and interactive 3D map applications with ease.
The Cesium Terrain Builder (CTB) is an essential tool in this process. It enables the generation of terrain tiles tailored for use in CesiumJS. For those who prefer a hassle-free setup, the Docker version of CTB, often referred to as cesium-terrain-builder-docker, comes to the rescue. This containerized version ensures that users can run CTB seamlessly, without getting entangled in dependencies and system configurations.
In this tutorial, we’ll delve deep into the integration process, guiding you step-by-step on how to use the Cesium Terrain Builder with Docker, and subsequently, how to render the generated 3D terrain in a VueJS application using Cesium.
To get full source code for this tutorial, click here.
To check the live demo for this tutorial, click here.
1. Install Docker:
If you haven’t already, install Docker on your system. You can download it from the official Docker website.
For installation in linux, you can follow this link: https://docs.docker.com/desktop/install/linux-install/
For installation in windows, you can follow this link: https://docs.docker.com/desktop/install/windows-install/
2. Pull the CTB Docker Image:
Fetch the latest version of the CTB Docker image
|
1 |
docker pull tumgis/ctb-quantized-mesh |
3. Prepare Your Heightmap Data:
Ensure you have DEM(Digital Elevation Model) data in a format supported by CTB, such as GeoTIFF. For this tutorial, you can find the DEM data inside dem_data directory in main project
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
. ├── cypress │ ├── e2e │ ├── fixtures │ └── support ├── dem_data ├── public │ └── static └── src ├── assets ├── components ├── router ├── stores └── views |
4. Generate Terrain Tiles:
Run the CTB tool inside a Docker container to generate terrain tiles from your DEM data
|
1 2 3 4 5 6 |
(base) geoknight@pop-os:~$ sudo docker run -it --name ctb -v /home/geoknight/data/:/data tumgis/ctb-quantized-mesh root@7174cdc2d82f:/data# ctb-tile -f Mesh -C -N -o terrain dem.tif 0...10...20...30...40...50...60...70...80...90...100 - done. root@7174cdc2d82f:/data# ctb-tile -f Mesh -C -N -l -o terrain dem.tif 0...10...20...30...40...50...60...70...80...90...0...10...20...30...40...50...60...70...80...90...0...10...20...30...40...50...60...70...80...90...100 - done. root@7174cdc2d82f:/data# |
The command sudo docker run -it --name ctb -v /home/geoknight/data/:/data tumgis/ctb-quantized-mesh runs a Docker container interactively (-it) from the tumgis/ctb-quantized-mesh image, naming the container ctb (--name ctb). It maps the local directory /home/geoknight/data/ on the host system to the /data directory inside the container (-v /home/geoknight/data/:/data), ensuring any changes in one reflect in the other. The sudo prefix ensures the command runs with superuser privileges.
command ctb-tile -f Mesh -C -N -o terrain dem.tif creates terrain files
comman ctb-tile -f Mesh -C -N -l -o terrain dem.tif creates layer description
After generation, Your terrain folder, should like this
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
(base) geoknight@pop-os:~/data$ tree -v -C -L 1 terrain/ terrain/ ├── 0 ├── 1 ├── 2 ├── 3 ├── 4 ├── 5 ├── 6 ├── 7 ├── 8 ├── 9 ├── 10 ├── 11 ├── 12 ├── 13 ├── 14 ├── 15 └── layer.json 16 directories, 1 file |
5. Copy generated 3d terrain in vue-cesium project
Transfer the generated 3D terrain to the public directory within your Vue-Cesium project, as illustrated in the public/static directory structure. This ensures the server can readily access and render the 3D terrain tiles within the Vue-Cesium application.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
. ├── cypress │ ├── e2e │ ├── fixtures │ └── support ├── dem_data ├── public │ └── static │ ├── cesium │ │ ├── Assets │ │ ├── ThirdParty │ │ ├── Widgets │ │ └── Workers │ └── terrain │ ├── 0 │ ├── 1 │ ├── 2 │ ├── 3 │ ├── 4 │ ├── 5 │ ├── 6 │ ├── 7 │ ├── 8 │ ├── 9 │ ├── 10 │ ├── 11 │ ├── 12 │ ├── 13 │ ├── 14 │ └── 15 └── src ├── assets ├── components │ ├── __tests__ │ └── icons ├── router ├── stores └── views |
6. Integrate with CesiumJS:
In your CesiumJS application, use the generated terrain tiles by setting the terrain provider to the URL where your tiles are being served.
|
1 |
var terrainProvider = await CesiumTerrainProvider.fromUrl('static/terrain', {}); |
By using the Docker version of Cesium Terrain Builder, you can ensure a consistent environment for generating terrain tiles, regardless of the host system. This makes the process of generating and serving terrain tiles for CesiumJS more streamlined and reproducible.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<template> <div id = "cesiumContainer" ></div> </template> <script lang="ts"> import { defineComponent } from 'vue' import { Viewer, Ion, OpenStreetMapImageryProvider, ImageryLayer, CesiumTerrainProvider, Cartesian3 } from "cesium"; import "cesium/Build/Cesium/Widgets/widgets.css"; Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkM2I3YTNiNy0wNjNiLTRmNDEtODFiMy05ODAzOGQ2ZTM0YjkiLCJpZCI6NzExNywiaWF0IjoxNjkwOTIzNDQzfQ.hI_Ri0N2Y3bWNzp7ckE4ho6nr4ZQMDMxFrluGgHSdy4'; declare global { interface Window { CESIUM_BASE_URL: string; } } window.CESIUM_BASE_URL = 'static/cesium'; export default defineComponent({ name: 'App', async mounted() { let baseLayer = new ImageryLayer(new OpenStreetMapImageryProvider({ url: "https://tile.openstreetmap.org/" }), {}) let viewer = new Viewer("cesiumContainer", { baseLayer: baseLayer }); viewer.camera.setView({ destination: new Cartesian3(1263093.7190924052, 5298125.807220887, 3311788.2669270574), orientation: { heading: 0.6291314004139439, pitch: -0.11972375171111294, roll: 6.283092953238719 } }); var terrainProvider = await CesiumTerrainProvider.fromUrl('static/terrain', {}); viewer.terrainProvider = terrainProvider; viewer.scene.globe.terrainExaggeration = 2; } }) </script> <style> html, body, #cesiumContainer, #app { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: sans-serif; } </style> |
I hope this tutorial will create a good foundation for you. If you want tutorials on another GIS topic or you have any queries, please send an email at contact@spatial-dev.guru.