Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Joe T.S.
3dgeovisclient
Commits
7d53eebe
Commit
7d53eebe
authored
Apr 12, 2021
by
Joe TS Dell
Browse files
up
parent
69e2f089
Pipeline
#2808
failed with stage
Changes
2
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
public/VisualizationWorkshop
_stepBystep
.html
→
public/VisualizationWorkshop
3D
.html
View file @
7d53eebe
File moved
public/VisualizationWorkshop_stepBystep copy.html
0 → 100644
View file @
7d53eebe
<!doctype html>
<html
lang=
"en"
>
<head>
<!-- Required meta tags -->
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1, shrink-to-fit=no"
>
<!-- Bootstrap CSS -->
<link
rel=
"stylesheet"
href=
"source/bootstrap.min.css"
>
<link
rel=
"stylesheet"
href=
"index.css"
>
<link
rel=
"icon"
type=
"image/ico"
href=
"favicon.ico"
>
<title>
Web-based Visualization of the 3D City Models
</title>
<style>
table
{
border
:
0px
;
padding
:
0px
;
margin
:
0px
;
border-collapse
:
collapse
;
}
td
{
border-right
:
1px
solid
black
;
padding
:
2px
2px
5px
2px
;
margin
:
0px
;
}
th
{
border-bottom
:
1px
solid
black
;
padding
:
5px
;
margin
:
0px
;
}
tr
{
padding
:
0px
;
margin
:
0px
;
}
</style>
</head>
<body>
<div
class=
"section topperStyle"
>
<!-- <a href="https://www.hft-stuttgart.de"><img src="HFT_logo.jpg"
style='width: 200px;margin-right: 20px;' /></a>
<a
href="http://www.steinbeis.de/de/experten/steinbeis-unternehmen-und-partner/detail.html?tx_z7suprofiles_detail%5Bprofile%5D=2618&cHash=db7d30240e803db2f04ccfd0425eb374"><img
src="https://www.hft-stuttgart.de/Forschung/Transfer/Steinbeislogo1.gif" /></a>
<br> The University of Applied Sciences Stuttgart
<h1>Examples of our projects and applications</h1> -->
<div
class=
"row"
>
<div
class=
"col"
>
<h1>
Creating Interactive 3D Web Maps from 3D City Models with CesiumJS
</h1>
<h6>
by
<a
href=
"https://www.hft-stuttgart.de/p/thunyathep-santhanavanich"
>
Joe T.S.
</a></h6>
</div>
<div
class=
"col-md-auto"
>
<!-- <a href="https://www.hft-stuttgart.de"><img src="HFT_logo.jpg"
style='width: 200px;margin-right: 20px;' /></a> -->
University of Applied Science Stuttgart
</div>
</div>
</div>
<div
style=
"margin:20px; padding:30px"
>
<h1>
Introduction
</h1>
<p>
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.
</p>
<img
src=
"img/6.JPG"
alt=
""
style=
"width: 800px;"
>
<br>
(An Expected Output from This Workshop — 3D Web App with 3D Semantic Building Models in Den Haag Area)
<br>
<hr>
<h3>
Architecture and Workflow
</h3>
<img
src=
"img/architecture.JPG"
alt=
""
style=
"width: 600px;"
><br>
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.
<br>
<b>
So, let’s get started and create each component together
</b>
<br>
<hr>
<h3>
Step 1: Preparing 3D City Models
</h3>
<p>
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.
</p>
<li>
Download the CityGML dataset from
<li
style=
"list-style-type:none"
>
<ul>
<li>
Den Haag (NL) 3D building model Dataset:
<a
href=
"https://denhaag.dataplatform.nl/#/data/36049d1a-4a0f-4c5d-8adb-21dbfb7252f9"
target=
"_blank"
>
https://denhaag.dataplatform.nl/#/data/36049d1a-4a0f-4c5d-8adb-21dbfb7252f9
</a>
</li>
<li>
Nordrhein-westfalen (Germany) 3D building model Dataset:
<a
href=
"https://www.opengeodata.nrw.de/produkte/geobasis/3dg/lod2_gml/"
target=
"_blank"
>
https://www.opengeodata.nrw.de/produkte/geobasis/3dg/lod2_gml/
</a>
</li>
</ul>
</li>
</li>
<li>
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.
<br>
<img
src=
"img/1a.JPG"
alt=
""
style=
"width: 800px;"
><br>
</li>
<li>
Select input Format "CityGML" and Workflow option "Single Merged Feature Type".
<br>
<img
src=
"img/1.JPG"
alt=
""
style=
"width: 400px;"
><br>
</li>
<li>
Click on "Add a new writer" button and select Format "Cesium 3D Tiles"
<br>
<img
src=
"img/2.JPG"
alt=
""
style=
"width: 400px;"
><br>
</li>
<li>
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.
<br>
<img
src=
"img/3.JPG"
alt=
""
style=
"width: 600px;"
><br>
</li>
<hr>
<h3>
Step 2: Preparing HTML for CesiumJS
</h3>
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.
<script
src=
"https://gist.github.com/JoeThunyathep/0a97950f69952ea13759e0f245416604.js"
></script>
<hr>
<h3>
Step 3: Host the 3D Web App on the Web Server
</h3>
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.
<h5>
3A: Python web server
</h5>
<li>
Install Python (3.xx)
</li>
<li>
open the CMD (Command Prompt) and check the python version
<kbd>
python --version
</kbd>
. If you get an error
message, please check your python installation.
</li>
<li>
Start the server by
<kbd>
python -m http.server 80
</kbd>
</li>
<h5>
3B: XAMPP (Apache) web server.
</h5>
(You can get it from
<a
href=
"https://www.apachefriends.org/index.html"
>
https://www.apachefriends.org/index.html
</a>
)
<li>
Install XAMPP or Apache.
</li>
<li>
Open XAMPP Control Panel and start Apache HTTP web service.
<br>
Optionally, you can start the Apache
manually via
<code>
[(part to Apache)]\apache\bin\httpd.exe
</code>
. Or, use Terminal to enter
<code>
sudo
apachectl start
</code>
and
<code>
sudo apachectl stop
</code>
commands to start and stop Apache service.
<br>
<img
src=
"img/4.JPG"
alt=
""
style=
"width: 400px;"
><br>
</li>
<li>
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.
<br>
<img
src=
"img/5.JPG"
alt=
""
style=
"width: 800px;"
><br>
</li>
<li>
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".
</li>
<hr>
<h3>
Step 4: Test the 3D Web App
</h3>
Finally, you can access your 3D web app visualizing 3D city model on your web browser.
<br>
<img
src=
"img/6.JPG"
alt=
""
style=
"width: 800px;"
><br>
<hr>
<h2>
Overview of the software used
</h2>
<ul>
<li><a
href=
"https://cesiumjs.org/downloads/"
>
CesiumJS
</a>
(Register for the token)
</li>
<li>
Web Server: Python 3 HTTP server or
<a
href=
"https://httpd.apache.org/"
>
Apache HTTP Server
</a>
, is also in
<a
href=
"https://www.apachefriends.org/de/index.html"
>
XAMPP
</a>
included
</li>
<li>
Web browser:
Google Chrome or
<a
href=
"https://www.mozilla.org/de/firefox/new/"
>
Firefox
</a></li>
<li>
FME Workbench 2021
<a
href=
"https://www.safe.com/free-fme-licenses/students/"
>
Student License
</a>
</li>
</ul>
<hr>
<h2>
Other Example Use Cases
</h2>
<!-- <div class="card" style="width: 25rem;">
<img class="card-img-top" src="img/StreamlinesMultipart.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Wind Simulation Platform</h5>
<p class="card-text">in the Cesium 3D Web Application</p>
<a href="https://transfer.hft-stuttgart.de/pages/urbanvis/index.html" class="btn btn-primary">Go</a>
</div>
</div>
<div class="card" style="width: 25rem;">
<img class="card-img-top" src="img/Deutschland3D.JPG" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Deutschland in 3D</h5>
<p class="card-text">3D Web Application Visualizing German Cities</p>
<a href="https://deutschland.virtualcitymap.de/#/" class="btn btn-primary">Go</a>
</div>
</div> -->
<li><a
href=
"https://transfer.hft-stuttgart.de/pages/urbanvis/index.html"
>
Wind Simulation Platform
</a>
in the
Cesium 3D Web Application
</li>
<li><a
href=
"https://steinbeis-3dps.eu/3DGeoVolumes/"
>
3D Visualization Server
</a>
for hosting 3D building models
created by the 3D GeoVolumes API (3D Container API)Specification
</li>
<li><a
href=
"https://steinbeis-3dps.eu/geoportal_3diot/#/"
>
OGC 3D IoT Pilot - Sejong, South Korea
</a>
with air
quality sensor data (SensorThings API)
</li>
<li><a
href=
"https://deutschland.virtualcitymap.de/#/"
>
Deutschland in 3D
</a>
3D Web Application Visualizing
German Cities
</li>
<li>
Explore other
<a
href=
"https://3d.bk.tudelft.nl/opendata/opencities/"
>
CityGML Datasets
</a></li>
<hr>
<h2>
Copyright
</h2>
<p>
The texts and images provided in the blog are under the
<a
href=
"https://creativecommons.org/licenses/by/3.0/de/"
>
CC BY 3.0 DE
</a>
license.
</p>
<h2>
Author
</h2>
<b>
Thunyathep Santhanavanich (JOE)
</b>
PhD candidate
<br>
Faculty of Geomatics, Computer Science and Mathematics,
<br>
University of Applied Sciences Stuttgart,
Schellingstr. 24, D-70174 Stuttgart
<br>
<a
href=
"mailto:thunyathep.santhanavanich@hft-stuttgart.de"
>
thunyathep.santhanavanich@hft-stuttgart.de
</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin=
"anonymous"
>
</script>
<script
src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin=
"anonymous"
>
</script>
<script
src=
"source/bootstrap.min.js"
></script>
</body>
</html>
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment