added cesium viewer

public/CSS/index.css

+.backdrop {
+    display: inline-block;
+    background: rgba(42, 42, 42, 0.7);
+    border-radius: 5px;
+    border: 1px solid #444;
+    padding: 5px 10px;
+    color: #fff;
+    line-height: 150%;
+    font-size: small;
+}
+
+#heightSliderLabel, #heightValue {
+    vertical-align: top;
+}
+
+.backdrop a:link, .backdrop a:visited, .backdrop a:hover {
+    color: #fff
+}
+
+.loadingIndicator {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -33px;
+    margin-left: -33px;
+    width: 66px;
+    height: 66px;
+    background: url(Source/Images/ajax-loader.gif) center no-repeat;
+}
+
+.cover {
+    display: none;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.75);
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+#menu {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+}
+
+.nowrap {
+    white-space: nowrap;
+}
+
+html, body, #cesiumContainer {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    font-family: sans-serif;
+    background: #000;
+}
+
+button.cesium-infoBox-camera {
+    display: none;
+}
+
+#3DTiles {
+    padding-top: 10px;
+}
\ No newline at end of file

public/CSS/rotterdam3d - Copy.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;
+    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;
+    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/CSS/rotterdam3d.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;
+}
+
+#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 : Cesium.ArcGisMapServerImageryProvider({url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'}),
+		 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("irradianceLegend").style.display = "none"; //defining legends hidden by default
+	 document.getElementById("pvLegend").style.display = "none"; //defining legends hidden by default
+	 
+    //////////////////////////////////////////////////////////////////////////
+    // Configuring the camera
+    //////////////////////////////////////////////////////////////////////////
+    // // Create an initial camera view
+     var initialPosition = Cesium.Cartesian3.fromDegrees(4.532933, 51.917538, 900);
+    var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21, -23, 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 rotterdamBldgSld = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: './Source/Data/Bldg/tileset.json'}));
+	//viewer.zoomTo(rotterdamBldgSld);
+	
+	var rotterdamBldgSrf = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: './Source/Data/Srf/tileset.json'}));
+	rotterdamBldgSld.show = true;
+	rotterdamBldgSrf.show = false;
+    //////////////////////////////////////////////////////////////////////////
+    // Style 3D Tileset
+    //////////////////////////////////////////////////////////////////////////
+	
+	var defaultstyle = new Cesium.Cesium3DTileStyle({
+        color : "color('WHITE')",
+			show: true
+     });
+
+ 
+    var irradiancestyle = new Cesium.Cesium3DTileStyle({
+         color : {
+            conditions : [
+				
+					["${Irr_Class} === 'One'", "color('#6495ED')"],
+					["${Irr_Class} === 'Two'", "color('#9370DB')"],
+					["${Irr_Class} === 'Three'", "color('#8B0000')"],
+					["${Irr_Class} === 'Four'", "color('#D2691E')"],
+					["${Irr_Class} === 'Five'", "color('#FFEBCD')"],
+					["${Irr_Class} === 'Six'", "color('#FFFFFF')"],
+					["true", "color('#FFFFFF')"]
+             ]
+         },
+		 show: true
+     });
+	 
+	 	var pvstyle = new Cesium.Cesium3DTileStyle({
+         color : {
+            conditions : [
+					["(${PVPotential} > 0)  && (${PVPotential} < 5)", "color('#FFFFD4')"],
+					["(${PVPotential} >= 5)  && (${PVPotential} < 10)", "color('#FEE391')"],
+                    ["(${PVPotential} >= 10) && (${PVPotential} < 15)", "color('#FEC44F')"],
+                    ["(${PVPotential} >= 15) && (${PVPotential} < 20)", "color('#FE9929')"],
+                    ["(${PVPotential} >= 20) && (${PVPotential} < 25)", "color('#EC7014')"],
+					["(${PVPotential} >= 25) && (${PVPotential} < 30)", "color('#CC4C02')"],
+                    ["(${PVPotential} >= 30)", "color('#8C2D04')"],
+					["true", "color('#FFFFFF')"]
+             ]
+         },
+		 show: true
+     });	 
+	 var colorstyle1 = document.getElementById('3dbuildings');	 
+	 var colorstyle2 = document.getElementById('irradiance');
+	 var colorstyle3 = document.getElementById('pv');
+     function set3DColorStyle() {
+        if (colorstyle1.checked) {
+			rotterdamBldgSld.show = true;
+			rotterdamBldgSrf.show = false;
+            rotterdamBldgSld.style = defaultstyle;
+			 document.getElementById("irradianceLegend").style.display = "none";
+			 document.getElementById("pvLegend").style.display = "none";
+			  } 
+		else if (colorstyle2.checked) {
+			rotterdamBldgSld.show = false;
+			rotterdamBldgSrf.show = true;
+             rotterdamBldgSrf.style = irradiancestyle;
+			 document.getElementById("irradianceLegend").style.display = "block";
+			 document.getElementById("pvLegend").style.display = "none";
+		      }
+		else if (colorstyle3.checked) {
+			rotterdamBldgSld.show = false;
+			rotterdamBldgSrf.show = true;
+             rotterdamBldgSrf.style = pvstyle;
+			 document.getElementById("irradianceLegend").style.display = "none";
+			 document.getElementById("pvLegend").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('feature_type');
+
+            if (!Cesium.defined(name)) {
+                name = picked3DtileFeature.getProperty('feature_type');
+            }
+            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;
+                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 = "Building Information";
+            selectedEntity.name = featureName;
+            selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
+			if (picked3DtileFeature.getProperty('feature') === "surface") {
+            viewer.selectedEntity = selectedEntity;
+            selectedEntity.description =
+                '<table class="cesium-infoBox-defaultTable"><tbody>' +
+                '<tr><th>Surface ID</th><td>' + picked3DtileFeature.getProperty('gml_id') + '</td></tr>' +
+				'<tr><th>Building ID</th><td>' + picked3DtileFeature.getProperty('gml_parent_id') + '</td></tr>' +
+				'<tr><th>Feature Type</th><td>' + picked3DtileFeature.getProperty('feature_type') + '</td></tr>' +
+		        '<tr><th>Irradiance (kWh/(m².a))</th><td>' + picked3DtileFeature.getProperty('Irr_kWh/m2yr') + '</td></tr>' +
+				'<tr><th>PV Potential (MWh/a)</th><td>' + picked3DtileFeature.getProperty('PVPotential_String') + '</td></tr>' +
+				'<tr><th>PV Specific Yield (kWh/(kWp.a))</th><td>' + picked3DtileFeature.getProperty('PVSpecificYield') + '</td></tr>' +
+               	'</tbody></table>';
+
+ 
+                                
+        }
+		
+		else 
+			{
+            viewer.selectedEntity = selectedEntity;
+            selectedEntity.description =
+                '<table class="cesium-infoBox-defaultTable"><tbody>' +
+                '<tr><th>Building ID</th><td>' + picked3DtileFeature.getProperty('gml_id') + '</td></tr>' +
+				'<tr><th>Building Parent ID</th><td>' + picked3DtileFeature.getProperty('gml_parent_id') + '</td></tr>' +
+				'<tr><th>Feature Type</th><td>' + picked3DtileFeature.getProperty('feature_type') + '</td></tr>' +
+				'<tr><th>Height (m)</th><td>' + picked3DtileFeature.getProperty('citygml_measured_height') + '</td></tr>' +
+				'<tr><th>Year of Construction</th><td>' + picked3DtileFeature.getProperty('citygml_year_of_construction') + '</td></tr>' +
+               	'</tbody></table>';
+
+ 
+                                
+        }
+		}
+			
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+}
+
+active3DTilePicker();
\ No newline at end of file