Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
VisualizationWorkshop_stepBystep.html 7.04 KB
Newer Older
Joe TS Dell's avatar
update  
Joe TS Dell committed
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 
<!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">

    <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 style="margin:20px; padding:30px">
        <h1>Creating Interactive 3D Web Maps with CesiumJS and 3D City Models</h1>
Joe TS Dell's avatar
update    
Joe TS Dell committed
43 
        <img src="img/6.JPG" alt="" style="width: 1000px;"><br>
Joe TS Dell's avatar
update  
Joe TS Dell committed
44 
        <h3>Step 1: Preparing 3D City Models</h3>
Joe TS Dell's avatar
up    
Joe TS Dell committed
45 
        <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>
Joe TS Dell's avatar
update  
Joe TS Dell committed
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69 
        <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
            download section.</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>
Joe TS Dell's avatar
up    
Joe TS Dell committed
70 
        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.
Joe TS Dell's avatar
update  
Joe TS Dell committed
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102 

        <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.
        (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>
            <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>
        <li>
            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>
        <ul>
            <li><a href="https://cesiumjs.org/downloads/">CesiumJS</a></li>
            <li>Web Server:&nbsp;<a href="https://httpd.apache.org/">Apache HTTP Server</a>&nbsp;, is also in&nbsp;<a
                    href="https://www.apachefriends.org/de/index.html">XAMPP</a>&nbsp;included</li>
            <li>Web browser:&nbsp;<a href="https://www.mozilla.org/de/firefox/new/">Firefox</a></li>
            <li>FME Workbench 2020</li>
        </ul>
Joe TS Dell's avatar
update    
Joe TS Dell committed
103
104
105
106
107
108
109 
        <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>
        <hr>
Joe TS Dell's avatar
update  
Joe TS Dell committed
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132 
        <h2>Copyright</h2>
        <p>The texts and images provided in the blog are under the&nbsp;<a
                href="https://creativecommons.org/licenses/by/3.0/de/">CC BY 3.0 DE</a>&nbsp;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>

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