Initial commit

public/CSS/rainau.css

+
+
+/*
+html,
+body,
+*/
+
+#Navbar {
+    overflow: hidden;
+}
+
+html,
+body,
+#cesiumContainer {
+    top: 0px;
+    left: 0px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    z-index: -1;
+}
+
+/*for chart*/
+
+
+#chart {
+    padding: 5px 10px;
+    color: #fff;
+    font: 1em "Fira Sans", sans-serif;
+    display: block;
+}
+
+#chartcontainer {
+	width: 481px;
+    right: 5px;
+    top: 382px;
+    background: rgba(0, 0, 0, 0.65);
+    border-radius: 10px;
+    border: 1px solid #444;
+    padding: 5px 10px;
+    color: #fff;
+    font: 1em "Fira Sans", sans-serif;
+    position: absolute;
+    display: block;
+    visibility: hidden;
+    box-shadow: 0 0 10px 1px #000;
+}
+
+table {
+    display: table;
+    border-collapse: separate;
+    border-spacing: 1px;
+    border-color: grey;
+}
+
+.apexcharts-tooltip {
+    background: #C0C0C0 !important;
+    color: black;
+}
+
+
+/*for chart*/
+
+#legend {
+    position: relative;
+    left: 5px;
+    top: 5px;
+}
+
+.backdrop {
+    display: inline-block;
+    background: rgba(42, 42, 42, 0.7);
+    border-radius: 5px;
+    border: 1px solid #444;
+    color: #fff;
+    line-height: 150%;
+    font-size: small;
+	box-shadow: 0 0 10px 1px #000;
+}
+
+button.cesium-infoBox-camera {
+    display: none;
+}
+
+.cesium-infoBox {
+
+    width: 80%;
+    height: auto;
+    right: 5px;
+    background: rgba(0, 0, 0, 0.65);
+    border-radius: 10px;
+    border: 1px solid #444;
+    padding: 5px 10px;
+    color: #fff;
+    font: 1em "Fira Sans", sans-serif;
+    float: right;
+}
+
+.cesium-infoBox-title {
+    background: rgba(0, 0, 0, 0);
+    font: 1em "Fira Sans", sans-serif;
+}
+
+.cesium-infoBox-close {
+    z-index: 99999;
+}
+
+.my-legend .legend-title {
+    text-align: left;
+    margin-bottom: 5px;
+    font-weight: bold;
+    font-size: 90%;
+}
+
+.my-legend .legend-scale ul {
+    margin: 0;
+    margin-bottom: 5px;
+    padding: 0;
+    float: left;
+    list-style: none;
+}
+
+.my-legend .legend-scale ul li {
+    list-style: none;
+    margin-left: 0;
+    line-height: 18px;
+    margin-bottom: 2px;
+}
+
+.my-legend ul.legend-labels li span {
+    display: block;
+    float: left;
+    height: 16px;
+    width: 30px;
+    margin-right: 5px;
+    margin-left: 0;
+    border: 1px solid #999;
+}
+
+.my-legend a {
+    color: #777;
+}
+
+.credit {
+   
+	width: 100px;
+	height: 100px;
+	overflow: hidden;
+    position: fixed;
+    z-index: 99999;
+    background: url(Images/hft.jpg) no-repeat;
+    background-size: 100px;
+    bottom: 70px;
+    left: 10px;
+	box-shadow: 0 0 10px 1px #000;
+    /*    left: 5px;*/
+}
+

public/Source/App.js

+     Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiNWFjZDJiMy1hYzk3LTQ2YWUtYWVjYi01MDk1OGVlZGI0NTgiLCJpZCI6MTEwNzEsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTgwMjE1Mjh9.lF6TGAJrX3qMGBt5egdAA7SJYNnaYX17mhURwGg_Kbg';
+
+    //////////////////////////////////////////////////////////////////////////
+    // Creating the Viewer
+    //////////////////////////////////////////////////////////////////////////
+
+     var viewer = new Cesium.Viewer('cesiumContainer', {
+         scene3DOnly: true,
+         selectionIndicator: false,
+		 timeline: false,
+		 animation: false,
+		 shadow: false,
+		 // // Set default basemap
+		 imageryProvider : new Cesium.BingMapsImageryProvider({
+                           url : 'https://dev.virtualearth.net',
+						   key : 'ArfoC16LZfs9KzyU-OJyXSqVI6a9-Swv-cq7oO6e2bWYqZOS8M77coukVzeYDyLA',
+						   mapStyle : Cesium.BingMapsStyle.AERIAL
+                           }),
+		 baseLayerPicker: true
+		 
+     });
+     viewer.clock.shouldAnimate = false;
+	 viewer.scene.globe.enableLighting = false;
+     viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2019-09-20T16:00:00Z");
+     viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2019-09-20T16:20:00Z");
+     viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2019-09-20T16:00:00Z");
+	 document.getElementById("annualWaterDemandlegend").style.display = "none"; //defining legends hidden by default
+	 document.getElementById("annualWaterDemandpersqmLegend").style.display = "none"; //defining legends hidden by default
+	 
+    //////////////////////////////////////////////////////////////////////////
+    // Configuring the camera
+    //////////////////////////////////////////////////////////////////////////
+    // // Create an initial camera view
+     var initialPosition = Cesium.Cartesian3.fromDegrees(10.135788, 48.937936, 350);
+     var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(172, -14, 0);
+     var homeCameraView = {
+         destination : initialPosition,
+         orientation : {
+            heading : initialOrientation.heading,
+            pitch : initialOrientation.pitch,
+            roll : initialOrientation.roll
+         }
+      };
+    // // Set the initial view
+     viewer.scene.camera.setView(homeCameraView);
+		// set home button to initial view 
+	 
+	 viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
+        e.cancel = true;
+         viewer.scene.camera.flyTo(homeCameraView);
+     });
+	 viewer.camera.changed.addEventListener(function() {
+
+  var deg = Math.round( Cesium.Math.toDegrees(viewer.camera.heading))
+  console.log('Heading:', deg)
+
+  var deg = Math.round( Cesium.Math.toDegrees(viewer.camera.pitch))
+  console.log('Pitch:', deg)
+  
+  var deg = Math.round( Cesium.Math.toDegrees(viewer.camera.roll))
+  console.log('Roll:', deg)
+});
+    //////////////////////////////////////////////////////////////////////////
+    // Load 3D Tileset
+    //////////////////////////////////////////////////////////////////////////
+
+    var currentrainau = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: './Source/Data/Bldg/tileset.json'}));
+
+    //////////////////////////////////////////////////////////////////////////
+    // Style 3D Tileset
+    //////////////////////////////////////////////////////////////////////////
+	
+	var defaultstyle = new Cesium.Cesium3DTileStyle({
+         color : "color('WHITE')",
+		  show: true
+     });
+
+    var annualwaterdemandstyle = new Cesium.Cesium3DTileStyle({
+         color : {
+            conditions : [
+					["(${Water_Demand} === 0)", "color('#000000')"],
+					["(${Water_Demand} > 0)  && (${Water_Demand} < 500)", "color('#33ACFF')"],
+                    ["(${Water_Demand} >= 500) && (${Water_Demand} < 1000)", "color('#2AFF00')"],
+                    ["(${Water_Demand} >= 1000) && (${Water_Demand} < 5000)", "color('#FFFF00')"],
+                    ["(${Water_Demand} >= 5000) && (${Water_Demand} < 10000)", "color('#FFA200')"],
+                    ["(${Water_Demand} >= 10000)", "color('#FF0000')"]
+             ]
+         },
+		 show: true
+     });
+	 
+	 	 var annualwaterdemandpersqmstyle = new Cesium.Cesium3DTileStyle({
+         color : {
+            conditions : [
+					["(${Water_Demand_perSqm} === 0)", "color('#000000')"],
+					["(${Water_Demand_perSqm} > 0)  && (${Water_Demand_perSqm} < 0.50)", "color('#33ACFF')"],
+                    ["(${Water_Demand_perSqm} >= 0.50) && (${Water_Demand_perSqm} < 1)", "color('#2AFF00')"],
+                    ["(${Water_Demand_perSqm} >= 1) && (${Water_Demand_perSqm} < 1.50)", "color('#FFFF00')"],
+                    ["(${Water_Demand_perSqm} >= 1.50) && (${Water_Demand_perSqm} < 2)", "color('#FFA200')"],
+                    ["(${Water_Demand_perSqm} >= 2)", "color('#FF0000')"]
+             ]
+         },
+		 show: true
+     });
+	 
+	 var colorstyle1 = document.getElementById('3dbuildings');	 
+	 var colorstyle2 = document.getElementById('annualwaterdemand');
+	 var colorstyle3 = document.getElementById('annualwaterdemandpersqm');
+     function set3DColorStyle() {
+        if (colorstyle1.checked) {
+             currentrainau.style = defaultstyle;
+			 document.getElementById("annualWaterDemandlegend").style.display = "none";
+			 document.getElementById("annualWaterDemandpersqmLegend").style.display = "none";
+			  } 
+		else if (colorstyle2.checked) {
+             currentrainau.style = annualwaterdemandstyle;
+			 document.getElementById("annualWaterDemandlegend").style.display = "block";
+			 document.getElementById("annualWaterDemandpersqmLegend").style.display = "none";
+		      }
+		else if (colorstyle3.checked) {
+             currentrainau.style = annualwaterdemandpersqmstyle;
+			 document.getElementById("annualWaterDemandlegend").style.display = "none";
+			 document.getElementById("annualWaterDemandpersqmLegend").style.display = "block";
+		      }
+        }
+	 
+	 colorstyle1.addEventListener('change', set3DColorStyle);
+     colorstyle2.addEventListener('change', set3DColorStyle);
+	 colorstyle3.addEventListener('change', set3DColorStyle);
+
+    //////////////////////////////////////////////////////////////////////////
+    // Custom mouse interaction for highlighting and selecting
+    //////////////////////////////////////////////////////////////////////////
+//Style the overlay
+var nameOverlay = document.createElement('div');
+viewer.container.appendChild(nameOverlay);
+nameOverlay.className = 'backdrop';
+nameOverlay.style.display = 'none';
+nameOverlay.style.position = 'absolute';
+nameOverlay.style.bottom = '0';
+nameOverlay.style.left = '0';
+nameOverlay.style['pointer-events'] = 'none';
+nameOverlay.style.padding = '4px';
+nameOverlay.style.backgroundColor = 'black';
+nameOverlay.style.fontFamily = 'Fira Sans, sans-serif';
+
+//Selecting a Building
+var Pickers_3DTile_Activated = true;
+// Information about the currently highlighted feature
+function active3DTilePicker() {
+    var highlighted = {
+        feature: undefined,
+        originalColor: new Cesium.Color()
+    };
+    // Information about the currently selected feature
+    var selected = {
+        feature: undefined,
+        originalColor: new Cesium.Color()
+    };
+
+    // An entity object which will hold info about the currently selected feature for infobox display
+    var selectedEntity = new Cesium.Entity();
+
+    // Get default left click handler for when a feature is not picked on left click
+    var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    // Color a feature yellow on hover.
+    viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
+        if (Pickers_3DTile_Activated) {
+            // If a feature was previously highlighted, undo the highlight
+            if (Cesium.defined(highlighted.feature)) {
+                highlighted.feature.color = highlighted.originalColor;
+                highlighted.feature = undefined;
+            }
+            // Pick a new feature
+            var picked3DtileFeature = viewer.scene.pick(movement.endPosition);
+            if (!Cesium.defined(picked3DtileFeature)) {
+                nameOverlay.style.display = 'none';
+                return;
+            }
+            // A feature was picked, so show it's overlay content
+            nameOverlay.style.display = 'block';
+            nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';
+            nameOverlay.style.left = movement.endPosition.x + 'px';
+            var name = picked3DtileFeature.getProperty('Building_Function');
+
+            if (!Cesium.defined(name)) {
+                name = picked3DtileFeature.getProperty('Building_Function');
+            }
+            nameOverlay.textContent = name;
+            // Highlight the feature if it's not already selected.
+            if (picked3DtileFeature !== selected.feature) {
+                highlighted.feature = picked3DtileFeature;
+                Cesium.Color.clone(picked3DtileFeature.color, highlighted.originalColor);
+                picked3DtileFeature.color = Cesium.Color.GREY;
+            }
+        }
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+    // Color a feature on selection and show metadata in the InfoBox.
+    viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
+
+        if (Pickers_3DTile_Activated) {
+            // If a feature was previously selected, undo the highlight
+            if (Cesium.defined(selected.feature)) {
+                selected.feature.color = selected.originalColor;
+                selected.feature = undefined;
+                $("#chart").html("");
+                var options = null;
+            }
+            // Pick a new feature
+            var picked3DtileFeature = viewer.scene.pick(movement.position);
+            if (!Cesium.defined(picked3DtileFeature)) {
+                clickHandler(movement);
+                return;
+            }
+            // Select the feature if it's not already selected
+            if (selected.feature === picked3DtileFeature) {
+                return;
+            }
+            selected.feature = picked3DtileFeature;
+            // Save the selected feature's original color
+            if (picked3DtileFeature === highlighted.feature) {
+                Cesium.Color.clone(highlighted.originalColor, selected.originalColor);
+                highlighted.feature = undefined;
+            } else {
+                Cesium.Color.clone(picked3DtileFeature.color, selected.originalColor);
+            }
+            // Highlight newly selected feature
+            picked3DtileFeature.color = Cesium.Color.AQUA;
+            // Set feature infobox description
+            var featureName = "Rainau 3D Viewer";
+            selectedEntity.name = featureName;
+            selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
+
+            viewer.selectedEntity = selectedEntity;
+            selectedEntity.description =
+                '<table class="cesium-infoBox-defaultTable"><tbody>' +
+                '<tr><th>Building ID</th><td>' + picked3DtileFeature.getProperty('GMLID') + '</td></tr>' +
+				'<tr><th>Building Height</th><td>' + picked3DtileFeature.getProperty('citygml_measured_height')+ ' ' + 'm' + '</td></tr>' +
+				'<tr><th>Storeys Above Ground</th><td>' + picked3DtileFeature.getProperty('citygml_storeys_above_ground')+ '</td></tr>' +
+                '<tr><th>Year of Construction</th><td>' + picked3DtileFeature.getProperty('citygml_year_of_construction') + '</td></tr>' +
+                '<tr><th>Building Function Code</th><td>' + picked3DtileFeature.getProperty('citygml_funct') + '</td></tr>' +
+                '<tr><th>Building Function</th><td>' + picked3DtileFeature.getProperty('Building_Function') + '</td></tr>' +
+				'<tr><th>Building Type</th><td>' + picked3DtileFeature.getProperty('Building_Type') + '</td></tr>' +
+				'<tr><th>Total Occupants</th><td>' + picked3DtileFeature.getProperty('Number_of_Occupants_per_Building') + '</td></tr>' +
+				'<tr><th>Heated Area </th><td>' + picked3DtileFeature.getProperty('Heated_Area') + ' ' + 'm²' + '</td></tr>' +
+				'<tr><th>Annual Water Demand</th><td>' + picked3DtileFeature.getProperty('Water_Demand') + ' ' + 'cu.m' + '</td></tr>' +
+				'<tr><th>Annual Water Demand (per Sq.m)</th><td>' + picked3DtileFeature.getProperty('Water_Demand_perSqm') + ' ' + 'cu.m' + '</td></tr>' +
+				'</tbody></table>';
+
+ 
+                                
+        }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+}
+
+active3DTilePicker();
+    //////////////////////////////////////////////////////////////////////////
+    // Custom mouse interaction for highlighting and selecting
+    //////////////////////////////////////////////////////////////////////////
+
+function showTable() {
+    var x = document.getElementById("chartcontainer");
+    if (x.style.visibility === "hidden") {
+        x.style.visibility = "visible";
+
+    } else {
+        x.style.visibility = "hidden";
+    }
+}