Screenshot of Expected Output from This Tutorial — 3D Web App with 3D Semantic Building Models in Den Haag Area (by Author)

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.

This article will guide you on how to create an interactive 3D web map with CesiumJS based on these CityGML 3D city models dataset. This guide-material was originally created (by author) especially for a workshop in the Netherlands Center for Geodesy and Geo-Informatics (NCG) Symposium 2020.

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.

• Component 1) CityGML 3D City Models
• Component 2) 3D Tiles City Models
• Component 3) Web Server
• Component 4) Users

So, let’s get started and create each component together 💻

Component 1) CityGML 3D City Models

We can download the 3D city models in CityGML format. In this article, I picked the 3D city models from Den Haag area as it is a compact model.

• Download the CityGML dataset from https://denhaag.dataplatform.nl/#/data/36049d1a-4a0f-4c5d-8adb-21dbfb7252f9 in the download section.

Of course, you are free to explore other CityGML datasets too. More and more cities provide dataset publicly which were listed in the following article:

Component 2) 3D Tiles City Models

The CityGML must be converted to the 3D Tiles format for optimizing the 3D web visualization. There are several tools that can perform this conversion. In this article, we will use FME which has an open free license available for free at least one year for home use, researcher, etc.

Convert the CityGML models to 3D Tiles with FME

• 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 the 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.

Component 3) Web Server

Preparing 3D Web Application using CesiumJS library

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 like. My pick is the VS Code. Then, create a file called “denHaagApp.html”. You can create the document with the name you like and follow an example HTML code below.

• The CesiumJS viewer (line 13) is the main component for constructing 3D globe with flexible settings (As line 14 to 21 in this example). You can check the document of CesiumJS API doc for more setting available.
• The 3D Tiles data can be loaded to the CesiumJS viewer as a tileset (line 23 to 25). 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. You can check the document of CesiumJS API doc for more setting available for the 3D Tiles data set.

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 webserver. You are free to use any web server of your preferences. In this example, we use the XAMPP open source web server. (You can get it from https://www.apachefriends.org/index.html)

• Install XAMPP. Open XAMPP Control Panel and start APACHE web server. Or, you can start the Apache manually via C:\xampp\apache\bin\httpd.exe.

• In the macOS and Linux, you can use Terminal to enter the following commands to trigger the Apache HTTP service.

$ sudo apachectl -k start   // start Apache
$ sudo apachectl -k stop    // stop Apache
$ sudo apachectl -k restart // restart Apacheor $ sudo /usr/sbin/apachectl -k start   // start Apache
$ sudo /usr/sbin/apachectl -k stop    // stop Apache
$ sudo /usr/sbin/apachectl -k restart // restart Apache

• Place the web document (denHaagApp.html) from the last section and the output 3D Tiles city models folder from Component 2) 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".

Component 4) Users

After the first three components are complete, we can test the 3D Web App via the webserver. You can access your 3D web app visualizing 3D city model on your web browser at http://localhost/denHaagApp.html

Conclusion

This article provides a step-by-step tutorial to create a 3D web-based application from the CityGML semantic 3D city model. The guide starts with the introduction of the CityGML data model. Then, FME is introduced as a conversion tool from CityGML to 3D Tile format. The final 3D web app is created with CesiumJS library and hosted on the Apache HTTP web server.