addedviewer

public/CSS/Gerlingen.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;
+	visibility: hidden;
+}
+
+.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_Imagery/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("heatdemandlegend").style.display = "none"; //defining legends hidden by default
+	 document.getElementById("pvpotentialLegend").style.display = "none"; //defining legends hidden by default
+	 
+    //////////////////////////////////////////////////////////////////////////
+    // Configuring the camera
+    //////////////////////////////////////////////////////////////////////////
+    // // Create an initial camera view
+     var initialPosition = Cesium.Cartesian3.fromDegrees(9.116678, 48.822745, 2000);
+     var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(235, -23, 360);
+     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 gerlingenbldgsld = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: './Source/Data/Bldg/tileset.json'}));
+	var gerlingenroof = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: './Source/Data/Roof/tileset.json'}));
+	gerlingenroof.readyPromise.then(function(tileset) {
+                 height = 0.02;
+                 viewer.scene.primitives.add(tileset);
+                 var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
+                 var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
+                 var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
+                 var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
+                 tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+					console.log(error);
+             });
+			gerlingenbldgsld.show=true;
+			gerlingenroof.show =false;
+
+
+    //////////////////////////////////////////////////////////////////////////
+    // Style 3D Tileset
+    //////////////////////////////////////////////////////////////////////////
+	
+	var defaultstyle = new Cesium.Cesium3DTileStyle({
+         color : "color('WHITE')",
+		  show: true
+     });
+	 
+	 var pvpotentialstyle = new Cesium.Cesium3DTileStyle({
+         color : {
+            conditions : [
+					["(${AvgPV} === 0)", "color('#FFFFFF')"],
+					["(${AvgPV} > 0)  && (${AvgPV} < 5)", "color('#fc4f00')"],
+					["(${AvgPV} >= 5)  && (${AvgPV} < 10)", "color('#f27600')"],
+                    ["(${AvgPV} >= 10) && (${AvgPV} < 15)", "color('#e29700')"],
+                    ["(${AvgPV} >= 15) && (${AvgPV} < 20)", "color('#cab500')"],
+                    ["(${AvgPV} >= 20) && (${AvgPV} < 25)", "color('#aad000')"],
+					["(${AvgPV} >= 25) && (${AvgPV} < 30)", "color('#7de800')"],
+                    ["(${AvgPV} >= 30)", "color('#00ff00')"]
+			 ]
+         },
+		 show: true
+     });
+	 
+	 var colorstyle1 = document.getElementById('3dbuildings');	 
+	 var colorstyle2 = document.getElementById('heatdemand');
+	 var colorstyle3 = document.getElementById('pvpotential');
+     function set3DColorStyle() {
+        if (colorstyle1.checked) {
+			gerlingenbldgsld.show=true;
+			gerlingenroof.show =false;
+			viewer.dataSources.removeAll();
+             gerlingenbldgsld.style = defaultstyle;
+			 document.getElementById("heatdemandlegend").style.display = "none";
+			 document.getElementById("pvpotentialLegend").style.display = "none";
+			  } 
+		else if (colorstyle2.checked) {
+			gerlingenbldgsld.show=true;
+			gerlingenroof.show =false;
+			var promise = Cesium.GeoJsonDataSource.load(
+    './Source/Data/Gerlingen_Grid5050_heat.json'
+  );
+		promise
+    .then(function (dataSource1) {
+      viewer.dataSources.add(dataSource1);
+
+      //Get the array of entities
+      var entities = dataSource1.entities.values;
+
+      var colorHash = {};
+      for (var i = 0; i < entities.length; i++) {
+        //For each entity, create a random color based on the state name.
+        //Some states have multiple entities, so we store the color in a
+        //hash so that we use the same color for the entire state.
+        var entity = entities[i];
+        var name = entity.name;
+        var color = colorHash[name];
+		var grdcode = entity.properties.Avg_Sp_Ht;
+        if (!color) { if (grdcode == 0) {
+                        color = Cesium.Color.fromCssColorString('#FFFFFF8C');
+                        } 
+						else if (grdcode < 25) {
+                        color = Cesium.Color.fromCssColorString('#61B9498C');
+                        }
+						else if (grdcode < 50) {
+                        color = Cesium.Color.fromCssColorString('#A4C7118C');
+                        }
+						else if (grdcode < 75) {
+                        color = Cesium.Color.fromCssColorString('#B2D5318C');
+                        }
+						else if (grdcode < 100) {
+                        color = Cesium.Color.fromCssColorString('#D1E0238C');
+                        }else if (grdcode < 125) {
+                        color = Cesium.Color.fromCssColorString('#F6EC008C');
+                        }else if (grdcode < 150) {
+                        color = Cesium.Color.fromCssColorString('#FECE028C');
+                        }else if (grdcode < 200) {
+                        color = Cesium.Color.fromCssColorString('#F9A7178C');
+                        }else if (grdcode < 250) {
+                        color = Cesium.Color.fromCssColorString('#F56D1F8C');
+                        }
+					
+					else {
+                        color = Cesium.Color.fromCssColorString('#F22E228C');
+                        }
+        }
+
+        //Set the polygon material to our random color.
+        entity.polygon.material = color;
+        //Remove the outlines.
+        entity.polygon.outline = true;
+
+        //Extrude the polygon based on the state's population.  Each entity
+        //stores the properties for the GeoJSON feature it was created from
+        //Since the population is a huge number, we divide by 50.
+        entity.polygon.extrudedHeight =
+         grdcode ;
+      }
+    })
+	 
+    
+			 document.getElementById("heatdemandlegend").style.display = "block";
+			 document.getElementById("pvpotentialLegend").style.display = "none";
+		}
+		else if (colorstyle3.checked) {
+			gerlingenbldgsld.show=true;
+			gerlingenroof.show =true;
+			viewer.dataSources.removeAll();
+			gerlingenbldgsld.style = defaultstyle;
+             gerlingenroof.style = pvpotentialstyle;
+			 document.getElementById("heatdemandlegend").style.display = "none";
+			 document.getElementById("pvpotentialLegend").style.display = "block";
+		      }
+        }
+	 
+	 colorstyle1.addEventListener('change', set3DColorStyle);
+     colorstyle2.addEventListener('change', set3DColorStyle);
+	 colorstyle3.addEventListener('change', set3DColorStyle);
+	
\ No newline at end of file