Creating Interactive 3D Web Maps from 3D City Models with CesiumJS

by Joe T.S.
University of Applied Science Stuttgart

Introduction

The recent technology of virtual globe-based 3D visualization is a unique opportunity to facilitate advanced analysis and visualization tasks in a variety of application domains such as urban planning, indoor/outdoor pedestrian navigation, environmental simulations, cultural heritage, or facility management. One core data which make this concept come true is the development of the CityGML models by Open Geospatial Consortium (OGC — https://www.ogc.org/). CityGML is the global data model schema for describing 3D geo-spatially-enabled urban models. There are more and more cities that provide open-source CityGML models publicly.


(An Expected Output from This Workshop — 3D Web App with 3D Semantic Building Models in Den Haag Area)

Architecture and Workflow


The overall system architecture of the 3D web-based app is shown in the figure above. It includes four main components: CityGML dataset, 3D Tiles dataset, Web server, and Users.
So, let’s get started and create each component together

Step 1: Preparing 3D City Models

In this step, we will download the 3D city models in CityGML format. Then, convert the models to 3D Tiles format for optimizing the 3D web visualization. In this article, I picked the 3D city models from Den Haag area as it is a compact model. Of course, you are free to explore this method with any CityGML datasets.

  • Download the CityGML dataset from
  • Using the FME Workbench to convert the CityGML models to 3D Tiles format. Starting by opening the FME Workbench, Drag and drop all CityGML models to the FME window.

  • Select input Format "CityGML" and Workflow option "Single Merged Feature Type".

  • Click on "Add a new writer" button and select Format "Cesium 3D Tiles"

  • The workflow should look like following figure. Click Run and then wait until the conversion complete. Then, the final 3D Tile City Models will be in the destination folder you input.

    • Step 2: Preparing HTML for CesiumJS

    In this step, we will create an HTML web document containing the 3D Web Globe using CesiumJS library. You can use any code Idle or editor. You can create the document with the name you like and copy the following code. Don't forget to specify the URL on line 24 to the target Tileset.json. If you do this for the first time, you can come back after you set up the web server in step three.

    Step 3: Host the 3D Web App on the Web Server

    This steps, we will host the Web App from step 2 and the 3D Tiles city models from step 1 on the web server. You are freely to use any web server of your preferences.
    3A: Python web server
  • Install Python (3.xx)
  • open the CMD (Command Prompt) and check the python version python --version. If you get an error message, please check your python installation.
  • Start the server by python -m http.server 80
    • 3B: XAMPP (Apache) web server.
    (You can get it from https://www.apachefriends.org/index.html)
  • Install XAMPP or Apache.
  • Open XAMPP Control Panel and start Apache HTTP web service.
    Optionally, you can start the Apache manually via [(part to Apache)]\apache\bin\httpd.exe . Or, use Terminal to enter sudo apachectl start and sudo apachectl stop commands to start and stop Apache service.

  • Place the web document (denHaagApp.html) from step 2 and a folder of 3D Tiles city models from step 1 in the C:\xampp\htdocs directory.

  • In the html web document, update the URL value to the tileset.json file of your 3D Tiles model in the htdocs folder. For example, if your 3D Tiles directory is at C:\xampp\htdocs\3dtile\tileset.json. You should set the url value to "./3dtile/tileset.json" or "http://localhost/3dtile/tileset.json" as APACHE will serve everything in the htdocs directory relatively to "http://localhost".

    • Step 4: Test the 3D Web App

    Finally, you can access your 3D web app visualizing 3D city model on your web browser.

    Overview of the software used

    Other Example Use Cases

  • Deutschland in 3D 3D Web Application Visualizing German Cities
  • OGC 3D IoT Pilot - Sejong, South Korea with air quality sensor data (SensorThings API)
  • 3D Visualization Server for hosting 3D building models created by the 3D GeoVolumes API (3D Container API)Specification
  • Explore other CityGML Datasets

    • Copyright

    The texts and images provided in the blog are under the CC BY 3.0 DE license.

    Author

    Thunyathep Santhanavanich (JOE) PhD candidate
    Faculty of Geomatics, Computer Science and Mathematics,
    University of Applied Sciences Stuttgart, Schellingstr. 24, D-70174 Stuttgart
    thunyathep.santhanavanich@hft-stuttgart.de