From a464635e0a3620b9b955bf0d488e19e05c1e360a Mon Sep 17 00:00:00 2001
From: JOE XMG <thunyathep.s@outlook.com>
Date: Tue, 14 May 2024 00:00:52 +0200
Subject: [PATCH] update
---
public/lindau2024/final.html | 91 +++++++++++++++++++++++++++++++++
public/lindau2024/template.html | 91 +++++++++++++++++++++++++++++++++
2 files changed, 182 insertions(+)
create mode 100644 public/lindau2024/final.html
create mode 100644 public/lindau2024/template.html
diff --git a/public/lindau2024/final.html b/public/lindau2024/final.html
new file mode 100644
index 0000000..913b700
--- /dev/null
+++ b/public/lindau2024/final.html
@@ -0,0 +1,91 @@
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <script src="https://cesium.com/downloads/cesiumjs/releases/1.94/Build/Cesium/Cesium.js"></script>
+ <link href="https://cesium.com/downloads/cesiumjs/releases/1.94/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
+ <script src="https://3dps.gis.lrg.tum.de/viewerCesiumNavigationMixin.min.js"> </script>
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="cesiumContainer" style="width: 100%; height:100%"></div>
+ <script>
+ // input data
+ const data3D_tilesetURL = 'https://web3d.basemap.de/cesium/buildings-fly/root.json';
+ const terrainURL = 'https://web3d.basemap.de/cesium/dgm5-mesh';
+ const data2D_arcgisURL = 'https://tiles.arcgis.com/tiles/1lplwYilIlo008hQ/arcgis/rest/services/HighFloodRisk_ExportFeatures/MapServer';
+ var basemapProvider = new Cesium.ArcGisMapServerImageryProvider({
+ // url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
+ // url : 'https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer'
+ // url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer'
+ url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer'
+ // url : 'https://services.arcgisonline.com/arcgis/rest/services/Specialty/DeLorme_World_Base_Map/MapServer'
+
+ })
+ var osmProvider = new Cesium.OpenStreetMapImageryProvider({
+ url: 'https://a.tile.openstreetmap.org/'
+ });
+ var viewer = new Cesium.Viewer('cesiumContainer', {
+ baseLayerPicker: false,
+ baseLayer: false,
+ vrButton: false,
+ geocoder: false,
+ navigationHelpButton: false,
+ selectionIndicator: false,
+ shadows: false,
+ timeline: true,
+ sceneModePicker: false,
+ imageryProvider: basemapProvider
+ });
+
+ if (terrainURL) {
+ viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
+ url: terrainURL
+ });
+ }
+ // Component 2: 3D Tileset
+ var tileset;
+ if (data3D_tilesetURL) {
+ tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+ url: data3D_tilesetURL
+ }));
+ // === Settting the style of the 3D Tileset ===
+ var cityStyle = new Cesium.Cesium3DTileStyle({
+ color: {
+ conditions: [
+ ["${surface} === 'wall'", "color('#f2f2f2')"],
+ ["${surface} === 'roof'", "color('#ff5c4d')"],
+ ["${surface} === 'bridge'", "color('#999999')"]
+ ]
+ },
+ });
+ tileset.style = cityStyle
+ }
+ if (data2D_arcgisURL) {
+ viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
+ url: data2D_arcgisURL
+ }));
+ }
+ // === Settting the initial view of the 3D Viewer ===
+ viewer.camera.flyTo({
+ destination: Cesium.Cartesian3.fromDegrees(9.6473353, 47.5728539, 3500.0),
+ orientation: {
+ heading: Cesium.Math.toRadians(0.0),
+ pitch: Cesium.Math.toRadians(-40.0),
+ roll: 0.0
+ }
+ });
+
+ // === Adding the navigation controls ===
+ viewer.extend(Cesium.viewerCesiumNavigationMixin, {});
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/public/lindau2024/template.html b/public/lindau2024/template.html
new file mode 100644
index 0000000..913b700
--- /dev/null
+++ b/public/lindau2024/template.html
@@ -0,0 +1,91 @@
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <script src="https://cesium.com/downloads/cesiumjs/releases/1.94/Build/Cesium/Cesium.js"></script>
+ <link href="https://cesium.com/downloads/cesiumjs/releases/1.94/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
+ <script src="https://3dps.gis.lrg.tum.de/viewerCesiumNavigationMixin.min.js"> </script>
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="cesiumContainer" style="width: 100%; height:100%"></div>
+ <script>
+ // input data
+ const data3D_tilesetURL = 'https://web3d.basemap.de/cesium/buildings-fly/root.json';
+ const terrainURL = 'https://web3d.basemap.de/cesium/dgm5-mesh';
+ const data2D_arcgisURL = 'https://tiles.arcgis.com/tiles/1lplwYilIlo008hQ/arcgis/rest/services/HighFloodRisk_ExportFeatures/MapServer';
+ var basemapProvider = new Cesium.ArcGisMapServerImageryProvider({
+ // url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
+ // url : 'https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer'
+ // url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer'
+ url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer'
+ // url : 'https://services.arcgisonline.com/arcgis/rest/services/Specialty/DeLorme_World_Base_Map/MapServer'
+
+ })
+ var osmProvider = new Cesium.OpenStreetMapImageryProvider({
+ url: 'https://a.tile.openstreetmap.org/'
+ });
+ var viewer = new Cesium.Viewer('cesiumContainer', {
+ baseLayerPicker: false,
+ baseLayer: false,
+ vrButton: false,
+ geocoder: false,
+ navigationHelpButton: false,
+ selectionIndicator: false,
+ shadows: false,
+ timeline: true,
+ sceneModePicker: false,
+ imageryProvider: basemapProvider
+ });
+
+ if (terrainURL) {
+ viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
+ url: terrainURL
+ });
+ }
+ // Component 2: 3D Tileset
+ var tileset;
+ if (data3D_tilesetURL) {
+ tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+ url: data3D_tilesetURL
+ }));
+ // === Settting the style of the 3D Tileset ===
+ var cityStyle = new Cesium.Cesium3DTileStyle({
+ color: {
+ conditions: [
+ ["${surface} === 'wall'", "color('#f2f2f2')"],
+ ["${surface} === 'roof'", "color('#ff5c4d')"],
+ ["${surface} === 'bridge'", "color('#999999')"]
+ ]
+ },
+ });
+ tileset.style = cityStyle
+ }
+ if (data2D_arcgisURL) {
+ viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
+ url: data2D_arcgisURL
+ }));
+ }
+ // === Settting the initial view of the 3D Viewer ===
+ viewer.camera.flyTo({
+ destination: Cesium.Cartesian3.fromDegrees(9.6473353, 47.5728539, 3500.0),
+ orientation: {
+ heading: Cesium.Math.toRadians(0.0),
+ pitch: Cesium.Math.toRadians(-40.0),
+ roll: 0.0
+ }
+ });
+
+ // === Adding the navigation controls ===
+ viewer.extend(Cesium.viewerCesiumNavigationMixin, {});
+ </script>
+</body>
+
+</html>
\ No newline at end of file
--
GitLab