Skip to content

GitLab

Commit 582808b1 authored by Joe TS Dell's avatar Joe TS Dell
Browse files

update

parent da842f18
Pipeline #1239 passed with stage
in 1 second
Hide whitespace changes
Inline Side-by-side
public/VisualizationWorkshop_stepBystep.html
View file @ 582808b1
......@@ -8,7 +8,7 @@
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="source/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<title>Web-based Visualization of the 3D City Models</title>
<style>
table {
......@@ -38,11 +38,43 @@
</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>
<h3>The NCG Symposium | Geocongres MRDH | ICA workshop 2020 (Nov 5, 2020)</h3>
</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>Creating Interactive 3D Web Maps with CesiumJS and 3D City Models</h1>
<img src="img/6.JPG" alt="" style="width: 1000px;"><br>
<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>
<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 <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> in the
......@@ -67,29 +99,41 @@
</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. In this example, I named it as denHaagApp.html. 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.
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. In this example, I named it as denHaagApp.html. 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. In this example, we use the XAMPP open source web server.
are freely to use any web server of your preferences. In this example, we use the XAMPP (or Apache) open source web server.
(You can get it from <a
href="https://www.apachefriends.org/index.html">https://www.apachefriends.org/index.html</a>)
<li>Install XAMPP</li>
<li>Open XAMPP Control Panel and start APACHE web server.<br>
<li>Install XAMPP or APACHE.</li>
<li>Open XAMPP Control Panel and start APACHE web server. 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>
<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>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>
<li>
Finally, you can access your 3D web app visualizing 3D city model on your web browser at http://localhost/denHaagApp.html<br>
<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 at
http://localhost/denHaagApp.html<br>
<img src="img/6.JPG" alt="" style="width: 800px;"><br>
</li>
<hr>
<h2>Overview of the software used</h2>
......@@ -102,10 +146,30 @@
</ul>
<hr>
<h2>Other Example Use Cases</h2>
<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>Explore other <a href="https://3d.bk.tudelft.nl/opendata/opencities/">CityGML Datasets</a></li>
<!-- <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&nbsp;<a
......
public/index.css 0 → 100644
View file @ 582808b1
button {
padding: 0;
border: none;
font: inherit;
color: inherit;
background-color: transparent;
/* show a hand cursor on hover; some argue that we
should keep the default arrow cursor for buttons */
cursor: pointer;
}
/**
* Button component
*/
.btn {
/* default for <button>, but needed for <a> */
display: inline-block;
text-align: center;
text-decoration: none;
/* create a small space when buttons wrap on 2 lines */
margin: 2px 0;
/* invisible border (will be colored on hover/focus) */
border: solid 1px transparent;
border-radius: 4px;
/* button size comes from text + padding, avoid height */
padding: 0.5em 1em;
/* make sure colors have enough contrast! */
color: #FFFFFF;
background-color: #4467c3;
}
/* old-school "down" effect on clic + color tweak */
.btn:active {
transform: translateY(1px);
filter: saturate(150%);
}
/* inverse colors on hover */
.btn:hover {
cursor: pointer;
color: #4467c3;
border-color: currentColor;
background-color: white;
}
/* Firefox: remove the inner border shown on focus */
.btn::-moz-focus-inner {
border: none;
}
/* make sure we have a visible focus ring */
.btn:focus {
outline: none;
/* box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.5),
0 0 0 1.5px rgba(255, 105, 180, 0.5); */
}
/* hide focus style if not from keyboard navigation */
.js-focus-visible .btn:focus:not(.focus-visible) {
box-shadow: none;
}
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
h2 {
margin-top: 0;
}
table,
p {
/* margin-left: 25px; */
}
td {
padding-bottom: 15px;
vertical-align: top;
}
td:first-child {
padding-right: 15px;
}
.section:nth-child(odd) {
background-color: #fff;
}
.section {
border: none;
padding: 20px 40px;
}
.section>* {
/* max-width: 1200px; */
}
.imgavatar {
border-radius: 50%;
width: 150px;
}
.imgsponsor {
width: 150px;
}
/* Special */
ul.special {
list-style: none;
padding-left: 0;
cursor: default;
position: relative;
margin: -2em 0 4em -2em;
}
ul.special li {
-moz-transition: top .15s ease-in-out;
-webkit-transition: top .15s ease-in-out;
-ms-transition: top .15s ease-in-out;
transition: top .15s ease-in-out;
position: relative;
display: inline-block;
top: 0;
padding: 2em 0 0 2em;
}
ul.special li a {
display: block;
outline: 0;
}
ul.special li a:before {
-moz-transition: background-color .2s ease-in-out;
-webkit-transition: background-color .2s ease-in-out;
-ms-transition: background-color .2s ease-in-out;
transition: background-color .2s ease-in-out;
display: block;
text-align: center;
background: #c1cac5;
border-radius: 100%;
width: 2.25em;
height: 2.25em;
line-height: 2.175em;
font-size: 5em;
color: #fff;
}
ul.special li:hover {
top: -1em;
}
ul.special li:hover a:before {
background: #b9d2ce;
}
.center-img {
display: block;
margin-left: auto;
margin-right: auto;
}
.imgBanner {
position: absolute;
top: 0px;
right: 0px;
}
/* Video Container for Youtube Responsive */
.video-container {
position: relative;
padding-bottom: 250px;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:480px;
height:250px;
/* height:100%; */
}
.topperStyle {
background-color: #343a40!important;
color: white;
}
.circleImage {
border-radius: 100%!important;
padding: 10%
}
.centerAlign {
text-align: center
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal