Skip to content

Commit 867821e

Browse files
Son-HNguyenSon-HNguyen
committed
Update scripts for examples
1 parent 27ccaac commit 867821e

File tree

2 files changed

+284
-188
lines changed

2 files changed

+284
-188
lines changed

‎examples/glTFRailwaySceneLoD3Example/index.html‎

Lines changed: 136 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* 3DCityDB-Web-Map
33
* http://www.3dcitydb.org/
44
*
5-
* Copyright 2015 - 2017
5+
* Copyright 2015 - 2021
66
* Chair of Geoinformatics
77
* Technical University of Munich, Germany
88
* https://www.gis.bgu.tum.de/
@@ -27,98 +27,147 @@
2727
<!DOCTYPE html>
2828
<html lang="en">
2929
<head>
30-
<!-- Use correct character set. -->
31-
<meta charset="utf-8">
32-
<!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
33-
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
34-
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
35-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
36-
<link rel="icon" type="image/png" href="../../theme/img/favicon.png" sizes="16x16">
37-
<title>Railway Scene LoD3 demo</title>
38-
39-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
40-
<script src="../../ThirdParty/Cesium/Cesium.js"></script>
41-
<script src="../../ThirdParty/Intersection/IntersectionAPI.js"></script>
42-
<script src="../../js/3dcitydb-web-map.js"></script>
43-
<script src="../../js/CitydbUtil.js"></script>
44-
<script src="../../js/CitydbWebworker.js"></script>
45-
<script src="../../js/CitydbSceneTransforms.js"></script>
46-
<script src="../../js/CitydbKmlHighlightingManager.js"></script>
47-
<script src="../../js/CitydbKmlTilingManager.js"></script>
48-
<script src="../../js/CitydbKmlDataSource.js"></script>
49-
<script src="../../js/CitydbKmlLayer.js"></script>
50-
51-
<style>
52-
@import url(../../ThirdParty/Cesium/Widgets/widgets.css);
53-
html, body, #cesiumContainer {
54-
top: 0px;
55-
left: 0px;
56-
position: absolute;
57-
width: 100%;
58-
height: 100%;
59-
margin: 0;
60-
padding: 0;
61-
overflow: hidden;
62-
z-index: -1;
63-
}
64-
#uiMenu {
65-
border-radius:5px;
66-
padding: 10px;
67-
position:absolute;
68-
left: 20px;
69-
font-family: "Arial";
70-
z-index: 99999;
71-
}
72-
</style>
30+
<!-- Use correct character set. -->
31+
<meta charset="utf-8">
32+
<!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
33+
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
34+
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
35+
<meta name="viewport"
36+
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
37+
<title>3DCityDB-Web-Map-Client</title>
38+
<link rel="icon" type="image/png" href="../../theme/img/favicon.png" sizes="16x16">
39+
<script src="../../ThirdParty/jquery-3.3.1.min.js"></script>
40+
<!-- Load jquery ui datepicker FLATPICKR -->
41+
<link rel="stylesheet" type="text/css" href="../../ThirdParty/flatpickrv4.5.1.css">
42+
<script type="text/javascript" src="../../ThirdParty/flatpickrv4.5.1.js"></script>
43+
<!-- CesiumJS -->
44+
<script src="../../ThirdParty/Cesium/Cesium.js"></script>
45+
<script src="../../ThirdParty/Intersection/IntersectionAPI.js"></script>
46+
<script src="../../ThirdParty/Cesium-Navigation/Cesium-Navigation.js"></script>
47+
<link rel="stylesheet" type="text/css" href="../../ThirdParty/Cesium-Navigation/Cesium-Navigation.css"/>
48+
<script src="../../js/3dcitydb-web-map.js"></script>
49+
<script src="../../js/CitydbUtil.js"></script>
50+
<script src="../../js/CitydbWebworker.js"></script>
51+
<script src="../../js/CitydbSceneTransforms.js"></script>
52+
<script src="../../js/CitydbKmlHighlightingManager.js"></script>
53+
<script src="../../js/CitydbKmlTilingManager.js"></script>
54+
<script src="../../js/CitydbKmlDataSource.js"></script>
55+
<script src="../../js/CitydbKmlLayer.js"></script>
56+
<script src="../../js/Cesium3DTilesDataLayer.js"></script>
57+
<!-- Sign in utilities -->
58+
<script type="text/javascript" src="https://apis.google.com/js/api:client.js?onLoad=onGoogleScriptLoaded"></script>
59+
<script src="../../3dwebclient/utils/SigninController.js"></script>
60+
<!-- GPS geolocation with device orientation in real-time -->
61+
<script src="../../3dwebclient/utils/GPSController.js"></script>
62+
<!-- Mobile utilities -->
63+
<script src="../../3dwebclient/utils/MobileController.js"></script>
64+
<!-- OpenStreetMap GeoCoder Nominatim -->
65+
<script src="../../3dwebclient/utils/OpenStreetMapNominatimGeocoder.js"></script>
66+
<!-- Splash Controller-->
67+
<script src="../../3dwebclient/utils/SplashController.js"></script>
68+
<!-- Mashup Data Source Service -->
69+
<script src="../../3dwebclient/utils/mashup-data-source-service/core/DataRecord.js"></script>
70+
<script src="../../3dwebclient/utils/mashup-data-source-service/core/DataSourceCapability.js"></script>
71+
<script src="../../3dwebclient/utils/mashup-data-source-service/core/QueryResult.js"></script>
72+
<script src="../../3dwebclient/utils/mashup-data-source-service/core/ReadableDataSource.js"></script>
73+
<script src="../../3dwebclient/utils/mashup-data-source-service/core/WritableDataSource.js"></script>
74+
<script src="../../3dwebclient/utils/mashup-data-source-service/core/DataSource.js"></script>
75+
<script src="../../3dwebclient/utils/mashup-data-source-service/core/SQLDataSource.js"></script>
76+
<script src="../../3dwebclient/utils/mashup-data-source-service/core/XMLDataSource.js"></script>
77+
<script src="../../3dwebclient/utils/mashup-data-source-service/application/GoogleSheets.js"></script>
78+
<script src="../../3dwebclient/utils/mashup-data-source-service/application/PostgreSQL.js"></script>
79+
<script src="../../3dwebclient/utils/mashup-data-source-service/application/KMLDataSource.js"></script>
80+
<script src="../../3dwebclient/utils/mashup-data-source-service/core/MashupDataSource.js"></script>
81+
<script src="../../3dwebclient/utils/mashup-data-source-service/application/DataSourceController.js"></script>
82+
<!-- URL controller -->
83+
<script src="../../3dwebclient/utils/UrlController.js"></script>
84+
85+
<style>
86+
@import url(../../ThirdParty/Cesium/Widgets/widgets.css);
87+
88+
html, body, #cesiumContainer {
89+
top: 0px;
90+
left: 0px;
91+
position: absolute;
92+
width: 100%;
93+
height: 100%;
94+
margin: 0;
95+
padding: 0;
96+
overflow: hidden;
97+
z-index: -1;
98+
}
99+
100+
#uiMenu {
101+
border-radius: 5px;
102+
padding: 10px;
103+
position: absolute;
104+
left: 20px;
105+
font-family: "Arial";
106+
z-index: 99999;
107+
}
108+
</style>
73109
</head>
74110
<body>
75-
<div id="cesiumContainer"></div>
76-
<div id="uiMenu">
111+
<div id="cesiumContainer"></div>
112+
<div id="uiMenu">
77113
<button type="button" onclick="addLayers()">add glTF Data Layers</button>
78114
<button type="button" onclick="removeLayers()">remove glTF Data Layers</button>
79-
</div>
80-
<script>
115+
</div>
116+
<script>
117+
// URL controller
118+
var urlController = new UrlController();
119+
81120
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkNGVkNjUzNy1kZTliLTRmZDgtYTg2Mi1jYTE0NjkwNDg4NTMiLCJpZCI6NjE5MDEsImlhdCI6MTYyNjQ0ODc2M30.eQkSWPaD_VAKmlq1ne02DfpLDW0hGzlYbZysW6si-04';
82-
83-
var viewer = new Cesium.Viewer('cesiumContainer', {
84-
baseLayerPicker : false
85-
});
86-
87-
var observable = Cesium.knockout.getObservable(viewer, '_selectedEntity');
88-
observable.subscribe(function(entity) {
89-
if (!Cesium.defined(entity)) {
90-
var layers = webMap._layers;
91-
for (var i = 0; i < layers.length; i++) {
92-
if (layers[i].active) {
93-
layers[i].unHighlightAllObjects();
94-
}
95-
}
96-
}
97-
});
98-
99-
var webMap = new WebMap3DCityDB(viewer);
100-
webMap.activateViewChangedEvent(true);
101-
webMap.activateMouseMoveEvents(true);
102-
webMap.activateMouseClickEvents(true);
103-
104-
var mouseOverhighlightColor = new Cesium.Color(0.0, 0.3, 0.0, 1.0);
105-
var mouseClickhighlightColor = new Cesium.Color(0.4, 0.4, 0.0, 1.0);
106-
107-
var dataLayer;
108-
109-
var addLayers = function() {
110-
dataLayer = new CitydbKmlLayer({
111-
url : './Railway_Scene_LoD3/Railway_Scene_LoD3_collada_MasterJSON.json'
112-
});
113121

114-
Cesium.when(webMap.addLayer(dataLayer), function(loadedcitydbLayer){
115-
loadedcitydbLayer.zoomToStartPosition();
116-
});
117-
};
118-
119-
var removeLayers = function() {
120-
webMap.removeLayer(dataLayer.id);
121-
};
122+
var viewer = new Cesium.Viewer('cesiumContainer', {
123+
baseLayerPicker: false
124+
});
125+
126+
var observable = Cesium.knockout.getObservable(viewer, '_selectedEntity');
127+
observable.subscribe(function (entity) {
128+
if (!Cesium.defined(entity)) {
129+
var layers = webMap._layers;
130+
for (var i = 0; i < layers.length; i++) {
131+
if (layers[i].active) {
132+
layers[i].unHighlightAllObjects();
133+
}
134+
}
135+
}
136+
});
137+
138+
var webMap = new WebMap3DCityDB(viewer);
139+
webMap.activateViewChangedEvent(true);
140+
webMap.activateMouseMoveEvents(true);
141+
webMap.activateMouseClickEvents(true);
142+
143+
var mouseOverhighlightColor = new Cesium.Color(0.0, 0.3, 0.0, 1.0);
144+
var mouseClickhighlightColor = new Cesium.Color(0.4, 0.4, 0.0, 1.0);
145+
146+
var dataLayer;
147+
148+
var addLayers = function () {
149+
dataLayer = new CitydbKmlLayer({
150+
url: './Railway_Scene_LoD3/Railway_Scene_LoD3_collada_MasterJSON.json',
151+
gltfVersion: 1.0
152+
});
153+
154+
Cesium.when(webMap.addLayer(dataLayer), function (loadedcitydbLayer) {
155+
loadedcitydbLayer.zoomToStartPosition();
156+
});
157+
};
158+
159+
var removeLayers = function () {
160+
webMap.removeLayer(dataLayer.id);
161+
};
162+
163+
// Sign in utilities
164+
var googleClientId = urlController.getUrlParaValue('googleClientId', window.location.href, CitydbUtil);
165+
if (googleClientId) {
166+
var signInController = new SigninController(googleClientId);
167+
}
168+
169+
// Mobile layouts and functionalities
170+
var mobileController = new MobileController();
122171
</script>
123172
</body>
124173
</html>

0 commit comments

Comments
 (0)