From 968f07865e373fc914b6ca9ba848709bf890200f Mon Sep 17 00:00:00 2001
From: Rushikesh Padsala <rushikesh.padsala@hft-stuttgart.de>
Date: Tue, 7 Sep 2021 09:34:43 +0000
Subject: [PATCH] Upload New File
---
public/App.js | 959 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 959 insertions(+)
create mode 100644 public/App.js
diff --git a/public/App.js b/public/App.js
new file mode 100644
index 0000000..863a0f3
--- /dev/null
+++ b/public/App.js
@@ -0,0 +1,959 @@
+ Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkNjcyOWZhYi0xZmQ0LTQyYmMtYjQ0MS1hY2YxYzcxYWFmMWEiLCJpZCI6MTEwNzEsImlhdCI6MTYzMDk5MzEyNX0.fcsH4S5hE0ye9s-2cOFMyObiHlhu9vqjWdlYfGkv5gU';
+ var flatterrain = new Cesium.EllipsoidTerrainProvider();
+ var terrainProviderViewModels = [];
+ terrainProviderViewModels.push(new Cesium.ProviderViewModel({
+ name : 'Flat',
+ iconUrl : Cesium.buildModuleUrl('https://w2.iaf.hft-stuttgart.de/CesiumData/Images/TerrainProviders/Ellipsoid.png'),
+ creationFunction : function() {
+ return flatterrain;
+ }
+ }));
+ //////////////////////////////////////////////////////////////////////////
+ // 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.ArcGisMapServerImageryProvider({
+ url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer',
+ enablePickFeatures: false
+}),
+
+ baseLayerPicker: true,
+ terrainProviderViewModels : terrainProviderViewModels
+
+ });
+
+ viewer.clock.shouldAnimate = false;
+ viewer.scene.globe.enableLighting = false;
+ viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2019-08-20T12:00:00Z");
+ viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2019-08-20T12:20:00Z");
+ viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2019-08-20T12:00:00Z");
+ document.getElementById("legend").style.display = "none"; //defining legends hidden by default
+ document.getElementById("biolegend").style.display = "none";
+ document.getElementById("foodlegend").style.display = "none";
+ //////////////////////////////////////////////////////////////////////////
+ // Configuring the camera
+ //////////////////////////////////////////////////////////////////////////
+var initialPosition = Cesium.Cartesian3.fromDegrees(9.306042, 48.919172, 350);
+ var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(78, -25, 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);
+ document.getElementById("selectscenario").selectedIndex = 0;
+ });
+ 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)
+
+
+});
+var geocoder = viewer.geocoder.viewModel;
+var selectscenario = document.getElementById('selectscenario');
+ function setscenario() {
+ var selectedscenario = selectscenario.options[selectscenario.selectedIndex].value;
+ if (selectedscenario === 'Affalterbach') {
+geocoder.searchText = "9.322672, 48.920187, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Aldingen') {
+geocoder.searchText = "9.252892, 48.865336, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Asperg') {
+geocoder.searchText = "9.141226, 48.905069, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Aurich') {
+geocoder.searchText = "8.946047, 48.913813, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Benningen') {
+geocoder.searchText = "9.240017, 48.942798, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Besigheim') {
+geocoder.searchText = "9.144831, 48.998353, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Bietigheim') {
+geocoder.searchText = "9.124918, 48.957679, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Bissingen') {
+geocoder.searchText = "9.099340, 48.943362, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Bönnigheim') {
+geocoder.searchText = "9.094191, 49.039106, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Ditzingen') {
+geocoder.searchText = "9.070072, 48.826701, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Eberdingen') {
+geocoder.searchText = "8.966603, 48.878687, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Ensingen') {
+geocoder.searchText = "8.949866, 48.968301, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Enzweihingen') {
+geocoder.searchText = "8.983641, 48.917085, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Erdmannshausen') {
+geocoder.searchText = "9.297180, 48.942601, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Erligheim') {
+geocoder.searchText = "9.099255, 49.019982, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Freudental') {
+geocoder.searchText = "9.060030, 49.007897, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Gemmrigheim') {
+geocoder.searchText = "9.157791, 49.025488, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Gerlingen') {
+geocoder.searchText = "9.066982, 48.799599, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Gronau') {
+geocoder.searchText = "9.339477, 49.033306, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Großbottwar') {
+geocoder.searchText = "9.297867, 49.001647, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Großingersheim') {
+geocoder.searchText = "9.181308, 48.961557, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Großsachsenheim') {
+geocoder.searchText = "9.069214, 48.959454, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Gündelbach') {
+geocoder.searchText = "8.942785, 48.993594, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Häfnerhaslach') {
+geocoder.searchText = "8.919954, 49.025206, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Heimerdingen') {
+geocoder.searchText = "8.981667, 48.852009, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Hemmingen') {
+geocoder.searchText = "9.035182, 48.864743, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Hessigheim') {
+geocoder.searchText = "9.186587, 48.995087, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Hirschlanden') {
+geocoder.searchText = "9.041362, 48.836701, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Hochberg') {
+geocoder.searchText = "9.282289, 48.886279, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Hochdorf(Eberdingen)') {
+geocoder.searchText = "9.000077, 48.886364, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Hochdorf(Remseck)') {
+geocoder.searchText = "9.296408, 48.897932, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'HofundLembach') {
+geocoder.searchText = "9.313488, 49.009558, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Hofen') {
+geocoder.searchText = "9.120818, 49.024661, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Hohenhaslach') {
+geocoder.searchText = "9.018874, 48.999817, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Hohenstein') {
+geocoder.searchText = "9.121184, 49.039500, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Höpfigheim') {
+geocoder.searchText = "9.243751, 48.980555, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Horrheim') {
+geocoder.searchText = "8.988061, 48.977964, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Kirchheim') {
+geocoder.searchText = "9.147062, 49.039922, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Kleinbottwar') {
+geocoder.searchText = "9.288812, 48.979625, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Kleinglattbach') {
+geocoder.searchText = "8.969779, 48.951254, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Kleiningersheim') {
+geocoder.searchText = "9.200536, 48.974995, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Kleinsachsenheim') {
+geocoder.searchText = "9.071403, 48.969794, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Löchgau') {
+geocoder.searchText = "9.109511, 49.001534, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Marbach') {
+geocoder.searchText = "9.261646, 48.938119, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Markgrönningen') {
+geocoder.searchText = "9.084578, 48.903659, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Möglingen') {
+geocoder.searchText = "9.130197, 48.888762, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Mundelsheim') {
+geocoder.searchText = "9.209633, 48.996945, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Murr') {
+geocoder.searchText = "9.255123, 48.960609, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Neckargröningen') {
+geocoder.searchText = "9.273362, 48.877361, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Neckarrems') {
+geocoder.searchText = "9.279370, 48.869994, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Nussdorf') {
+geocoder.searchText = "8.940296, 48.894688, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Oberriexingen') {
+geocoder.searchText = "9.024110, 48.927716, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Oberstenfeld') {
+geocoder.searchText = "9.322629, 49.023433, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Ochsenbach') {
+geocoder.searchText = "8.983254, 49.020450, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Ottmarsheim') {
+geocoder.searchText = "9.204526, 49.016510, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Pleidelsheim') {
+geocoder.searchText = "9.202638, 48.958017, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Rielingshausen') {
+geocoder.searchText = "9.329710, 48.960638, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Riet') {
+geocoder.searchText = "8.971796, 48.893531, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Roßwag') {
+geocoder.searchText = "8.914676, 48.935272, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Schöckingen') {
+geocoder.searchText = "9.028401, 48.846163, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Schwieberdingen') {
+geocoder.searchText = "9.076896, 48.875046, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Sersheim') {
+geocoder.searchText = "9.012909, 48.957735, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Spielberg') {
+geocoder.searchText = "8.999734, 49.016876, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Steinheim') {
+geocoder.searchText = "9.276237, 48.967372, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Vaihingen') {
+geocoder.searchText = "8.962269, 48.932932, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Walheim') {
+geocoder.searchText = "9.151869, 49.011246, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ else if (selectedscenario === 'Winzerhausen') {
+geocoder.searchText = "9.265199, 49.023704, 700";
+geocoder.flightDuration = 5;
+geocoder.search();}
+ }
+ selectscenario.addEventListener('change', setscenario);
+ //////////////////////////////////////////////////////////////////////////
+ // Load 3D Tileset
+ //////////////////////////////////////////////////////////////////////////
+
+
+ var building = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url:
+ 'https://w2.iaf.hft-stuttgart.de/CesiumData/3DTiles/Buildings/BuildingSolid/LKRLudwigsburg/tileset.json'}));
+
+ var roofsurface = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url:
+ 'https://w2.iaf.hft-stuttgart.de/CesiumData/3DTiles/Buildings/RoofSurface/LKRLudwigsburg/tileset.json'}));
+ var roofdefaultstyle = new Cesium.Cesium3DTileStyle({color : "color('#990000')"});
+ roofsurface.style = roofdefaultstyle;
+ // set roof height and load roof tile
+ roofsurface.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);
+ });
+ roofsurface.show =true;
+ var landuse = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: 'https://w2.iaf.hft-stuttgart.de/CesiumData/3DTiles/Landuse/LKRLudwigsburg/tileset.json'}));
+
+
+
+ landuse.show = false;
+
+
+ function showbuildings() {
+ if (document.getElementById('buildings').checked) {building.show = true;
+ roofsurface.show = true;
+ }
+ else {building.show = false;
+ roofsurface.show = false;}
+ }
+
+ // Style landuse Tileset
+
+ var landusestyle = new Cesium.Cesium3DTileStyle({
+ color : {
+ conditions : [
+ ["${LU_Class} === 'Settlement Area'", "color('#FFFF008C')"],
+ ["${LU_Class} === 'Open Plot'", "color('#FFC3008C')"],
+ ["${LU_Class} === 'Traffic Area'", "color('#8888888C')"],
+ ["${LU_Class} === 'Vegetation'", "color('#44EE0D8C')"],
+ ["${LU_Class} === 'Water Body'", "color('#0DC2EE8C')"],
+ ]
+ },
+ show: true
+ });
+
+
+ var bioenergystyle = new Cesium.Cesium3DTileStyle({
+ color : {
+ conditions : [
+ ["(${t_bionrg_p} === 0)", "color('#8000008C')"],
+ ["(${t_bionrg_p} > 0) && (${t_bionrg_p} < 50)", "color('#FF00008C')"],
+ ["(${t_bionrg_p} >= 50) && (${t_bionrg_p} < 150)", "color('#FFA5008C')"],
+ ["(${t_bionrg_p} >= 150) && (${t_bionrg_p} < 350)", "color('#FFFF008C')"],
+ ["(${t_bionrg_p} >= 350) && (${t_bionrg_p} < 650)", "color('#00FF008C')"],
+ ["(${t_bionrg_p} >= 650)", "color('#00A3008C')"]
+ ]
+ },
+ show: true
+ });
+
+ var foodpotentialstyle = new Cesium.Cesium3DTileStyle({
+ color : {
+ conditions : [
+ ["(${t_food_p} === 0)", "color('#A110598C')"],
+ ["(${t_food_p} > 0) && (${t_food_p} < 50000)", "color('#FF00808C')"],
+ ["(${t_food_p} >= 50000) && (${t_food_p} < 100000)", "color('#916D808C')"],
+ ["(${t_food_p} >= 100000) && (${t_food_p} < 200000)", "color('#00FF808C')"],
+ ["(${t_food_p} >= 200000) && (${t_food_p} < 300000)", "color('#0089BA8C')"],
+ ["(${t_food_p} >= 300000)", "color('#0000FF8C')"]
+ ]
+ },
+ show: true
+ });
+
+
+
+
+ function showlanduse() {
+ if (document.getElementById('landuse').checked) {
+ landuse.show = true;
+ landuse.style = landusestyle;
+ document.getElementById("legend").style.display = "block";
+ document.getElementById("biolegend").style.display = "none";
+ document.getElementById("foodlegend").style.display = "none";
+ }
+ else {
+ landuse.show = false;
+ document.getElementById("legend").style.display = "none";
+ document.getElementById("biolegend").style.display = "none";
+ document.getElementById("foodlegend").style.display = "none";
+ }
+ }
+
+
+ function showbioenergypotential(){
+ if (document.getElementById('foodpotential').checked) {
+ alert("At a time either food potential analysis or bioenergy potential analysis is possible. Please uncheck one of the two analysis selection first and then re-select this option.");
+ return false;
+}
+else {
+ if (document.getElementById('landuse').checked) {
+ if (document.getElementById('bioenergypotential').checked) {
+
+ landuse.show = true;
+ landuse.style = bioenergystyle;
+ document.getElementById("biolegend").style.display = "block";
+ document.getElementById("foodlegend").style.display = "none";
+ document.getElementById("legend").style.display = "none";
+ }
+ else {
+ landuse.show = true;
+ landuse.style = landusestyle;
+ document.getElementById("biolegend").style.display = "none";
+ document.getElementById("foodlegend").style.display = "none";
+ document.getElementById("legend").style.display = "block";
+ }
+ }
+ else {
+ alert("Please select the landuse layer under 3D city model first, and then re-select this option.");
+ return false;
+}
+ }
+ }
+
+
+ function showfoodpotential(){
+ if (document.getElementById('bioenergypotential').checked) {
+ alert("At a time either food potential analysis or bioenergy potential analysis is possible. Please uncheck one of the two analysis selection first and then re-select this option.");
+ return false;
+}
+else {
+ if (document.getElementById('landuse').checked) {
+ if (document.getElementById('foodpotential').checked) {
+
+ landuse.show = true;
+ landuse.style = foodpotentialstyle;
+ document.getElementById("biolegend").style.display = "none";
+ document.getElementById("foodlegend").style.display = "block";
+ document.getElementById("legend").style.display = "none";
+ }
+ else {
+ landuse.show = true;
+ landuse.style = landusestyle;
+ document.getElementById("biolegend").style.display = "none";
+ document.getElementById("foodlegend").style.display = "none";
+ document.getElementById("legend").style.display = "block";
+ }
+ }
+ else {
+ alert("Please select the landuse layer under 3D city model first, and then re-select this option.");
+ return false;
+}
+ }
+ }
+
+
+
+ //////////////////////////////////////////////////////////////////////////
+ // Style 3D Tileset
+ //////////////////////////////////////////////////////////////////////////
+
+ var buildingdefaultstyle = new Cesium.Cesium3DTileStyle({
+ color : "color('WHITE')",
+ show: true
+ });
+
+ var heatenergydemandstyle = new Cesium.Cesium3DTileStyle({
+ color : {
+ conditions : [
+ [' Number(${Sp_Ht_Dmnd}) >= 225', "color('red')"],
+ [' Number(${Sp_Ht_Dmnd}) >= 125', "mix(color('yellow'), color('red'), (Number(${Sp_Ht_Dmnd}) -125) / 125)"],
+ [' Number(${Sp_Ht_Dmnd}) >= 1', "mix(color('green'), color('yellow'), (Number(${Sp_Ht_Dmnd}) ) / 125)"],
+ [' Number(${Sp_Ht_Dmnd}) < 1', "color('#ffffff1A')"],
+ ['true', "color('#ffffff1A')"]
+ ]
+
+ },
+ show: true
+ });
+
+ var heatdemandstyle = document.getElementById('heatdemand');
+ function showheatdemand() {
+ if (document.getElementById('pvpotential').checked) {
+ alert("At a time either of food demand, water demand, heating energy demand or rooftop photovoltaic potential demand analysis is possible. Please uncheck the current analysis selection first and then re-select this option.");
+ return false;
+}
+ else if (document.getElementById('fooddemand').checked) {
+ alert("At a time either of food demand, water demand, heating energy demand or rooftop photovoltaic potential demand analysis is possible. Please uncheck the current analysis selection first and then re-select this option.");
+ return false;
+}
+
+else if (document.getElementById('waterdemand').checked) {
+ alert("At a time either of food demand, water demand, heating energy demand or rooftop photovoltaic potential demand analysis is possible. Please uncheck the current analysis selection first and then re-select this option.");
+ return false;
+}
+
+else
+
+ {
+ if (document.getElementById('buildings').checked) {
+ if (heatdemandstyle.checked) {
+
+ roofsurface.show = false;
+ building.style = heatenergydemandstyle;
+ document.getElementById("heat-demand-legend").style.display = "block";
+ }
+ else {
+
+ roofsurface.show = true;
+ building.style = buildingdefaultstyle;
+ roofsurface.style = roofdefaultstyle;
+ document.getElementById("heat-demand-legend").style.display = "none";
+ }
+ }
+ else {
+ alert("Please select the buildings layer under 3D city model first, and then re-select this option.");
+ return false;
+}
+ }
+ }
+
+
+
+
+
+
+
+
+
+
+
+ var totalfooddemandstyle = new Cesium.Cesium3DTileStyle({
+ color : {
+ conditions : [
+ ["(${T_Fd_Dmnd} === 0)", "color('#ffffff1A')"],
+ ["(${T_Fd_Dmnd} > 0) && (${T_Fd_Dmnd} < 5000)", "color('#00FF80')"],
+ ["(${T_Fd_Dmnd} >= 5000) && (${T_Fd_Dmnd} < 10000)", "color('#00C49D')"],
+ ["(${T_Fd_Dmnd} >= 10000) && (${T_Fd_Dmnd} < 15000)", "color('#0089BA')"],
+ ["(${T_Fd_Dmnd} >= 15000) && (${T_Fd_Dmnd} < 20000)", "color('#0062CE')"],
+ ["(${T_Fd_Dmnd} >= 20000)", "color('#0000FF')"]
+ ]
+
+ },
+ show: true
+ });
+
+ var fooddemandstyle = document.getElementById('fooddemand');
+ function showfooddemand() {
+ if (document.getElementById('pvpotential').checked) {
+ alert("At a time either of food demand, water demand, heating energy demand or rooftop photovoltaic potential demand analysis is possible. Please uncheck the current analysis selection first and then re-select this option.");
+ return false;
+}
+ else if (document.getElementById('heatdemand').checked) {
+ alert("At a time either of food demand, water demand, heating energy demand or rooftop photovoltaic potential demand analysis is possible. Please uncheck the current analysis selection first and then re-select this option.");
+ return false;
+}
+
+else if (document.getElementById('waterdemand').checked) {
+ alert("At a time either of food demand, water demand, heating energy demand or rooftop photovoltaic potential demand analysis is possible. Please uncheck the current analysis selection first and then re-select this option.");
+ return false;
+}
+
+else
+
+ {
+ if (document.getElementById('buildings').checked) {
+ if (fooddemandstyle.checked) {
+
+ roofsurface.show = false;
+ building.style = totalfooddemandstyle;
+ document.getElementById("food-demand-legend").style.display = "block";
+ }
+ else {
+
+ roofsurface.show = true;
+ building.style = buildingdefaultstyle;
+ roofsurface.style = roofdefaultstyle;
+ document.getElementById("food-demand-legend").style.display = "none";
+ }
+ }
+ else {
+ alert("Please select the buildings layer under 3D city model first, and then re-select this option.");
+ return false;
+}
+ }
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ var totalwaterdemandstyle = new Cesium.Cesium3DTileStyle({
+ color : {
+ conditions : [
+ ["(${Wtr_Dmnd} === 0)", "color('#ffffff1A')"],
+ ["(${Wtr_Dmnd} > 0) && (${Wtr_Dmnd} < 500)", "color('#33ACFF')"],
+ ["(${Wtr_Dmnd} >= 500) && (${Wtr_Dmnd} < 1000)", "color('#2AFF00')"],
+ ["(${Wtr_Dmnd} >= 1000) && (${Wtr_Dmnd} < 5000)", "color('#FFFF00')"],
+ ["(${Wtr_Dmnd} >= 5000) && (${Wtr_Dmnd} < 10000)", "color('#FFA200')"],
+ ["(${Wtr_Dmnd} >= 10000)", "color('#FF0000')"]
+ ]
+
+
+
+ },
+ show: true
+ });
+
+ var waterdemandstyle = document.getElementById('waterdemand');
+ function showwaterdemand() {
+ if (document.getElementById('pvpotential').checked) {
+ alert("At a time either of food demand, water demand, heating energy demand or rooftop photovoltaic potential demand analysis is possible. Please uncheck the current analysis selection first and then re-select this option.");
+ return false;
+}
+ else if (document.getElementById('fooddemand').checked) {
+ alert("At a time either of food demand, water demand, heating energy demand or rooftop photovoltaic potential demand analysis is possible. Please uncheck the current analysis selection first and then re-select this option.");
+ return false;
+}
+
+else if (document.getElementById('heatdemand').checked) {
+ alert("At a time either of food demand, water demand, heating energy demand or rooftop photovoltaic potential demand analysis is possible. Please uncheck the current analysis selection first and then re-select this option.");
+ return false;
+}
+
+else
+
+ {
+ if (document.getElementById('buildings').checked) {
+ if (waterdemandstyle.checked) {
+
+ roofsurface.show = false;
+ building.style = totalwaterdemandstyle;
+ document.getElementById("water-demand-legend").style.display = "block";
+ }
+ else {
+
+ roofsurface.show = true;
+ building.style = buildingdefaultstyle;
+ roofsurface.style = roofdefaultstyle;
+ document.getElementById("water-demand-legend").style.display = "none";
+ }
+ }
+ else {
+ alert("Please select the buildings layer under 3D city model first, and then re-select this option.");
+ return false;
+}
+ }
+ }
+
+
+ var roofPVstyle = new Cesium.Cesium3DTileStyle({
+ color : {
+ conditions : [
+ [' Number(${PV_potential_yield}) >= 10', "color('green')"],
+ [' Number(${PV_potential_yield}) >= 5', "mix(color('yellow'), color('green'), (Number(${PV_potential_yield}) -5) /5)"],
+ [' Number(${PV_potential_yield}) >= 1', "mix(color('red'), color('yellow'), (Number(${PV_potential_yield}) ) /5)"],
+ [' Number(${PV_potential_yield}) < 1', "color('red')"],
+ ['true', 'rgb(0, 0, 0)']
+ ]
+
+ },
+ show: true
+ });
+
+ var pvpotentialstyle = document.getElementById('pvpotential');
+ function showpvpotential(){
+ if (document.getElementById('heatdemand').checked) {
+ alert("At a time either of food demand, water demand, heat energy demand or PV potential demand can be selected. Please uncheck the current analysis selection first and then re-select this option.");
+ return false;
+}
+
+
+else if (document.getElementById('fooddemand').checked) {
+ alert("At a time either of food demand, water demand, heat energy demand or PV potential demand can be selected. Please uncheck the current analysis selection first and then re-select this option.");
+ return false;
+}
+
+else if (document.getElementById('waterdemand').checked) {
+ alert("At a time either of food demand, water demand, heat energy demand or PV potential demand can be selected. Please uncheck the current analysis selection first and then re-select this option.");
+ return false;
+}
+
+else {
+ if (document.getElementById('buildings').checked) {
+ if (pvpotentialstyle.checked) {
+
+ roofsurface.show = true;
+ roofsurface.style = roofPVstyle;
+ document.getElementById("pv-potential-legend").style.display = "block";
+ }
+ else {
+
+ roofsurface.show = true;
+ roofsurface.style = roofdefaultstyle;
+ document.getElementById("pv-potential-legend").style.display = "none";
+ }
+ }
+ else {
+ alert("Please select the buildings layer under 3D city model first, and then re-select this option.");
+ return false;
+}
+ }
+ }
+
+
+ //////////////////////////////////////////////////////////////////////////
+ // Custom mouse interaction for highlighting and selecting
+ //////////////////////////////////////////////////////////////////////////
+
+
+//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)) {
+ return;
+ }
+
+ // 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.BLANCHEDALMOND;
+ }
+ }
+ }, 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.BLANCHEDALMOND;
+ // Set feature infobox description - if condition is for different info box for different entities such as building solids, roofs, landuse etc
+
+ if (picked3DtileFeature.getProperty('Semantic') === "Building") {
+
+
+ var featureName = "Information Box";
+ 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('gml_id') + '</td></tr>' +
+ '<tr><th>Building Type</th><td>' + picked3DtileFeature.getProperty('Bldg_Type') + '</td></tr>' +
+ '<tr><th>Building Height</th><td>' + picked3DtileFeature.getProperty('citygml_measured_height') + ' ' + 'm' + '</td></tr>' +
+ '<tr><th>Year of Construction</th><td>' + picked3DtileFeature.getProperty('citygml_ye') + '</td></tr>' +
+ '<tr><th>Building Storeys Above Ground</th><td>' + picked3DtileFeature.getProperty('Stry_Nmbr') + '</td></tr>' +
+ '<tr><th>Average Storey Height</th><td>' + picked3DtileFeature.getProperty('AvgStry_Ht') + ' ' + 'm' + '</td></tr>' +
+ '<tr><th>Estimated Total Housing Units</th><td>' + picked3DtileFeature.getProperty('Nmbr_House') + '</td></tr>' +
+ '<tr><th>Estimated Total Residents</th><td>' + picked3DtileFeature.getProperty('Nmbr_Occ') + '</td></tr>' +
+ '<tr><th>Location</th><td>' + picked3DtileFeature.getProperty('FWE_Area') + '</td></tr>' +
+ '<tr><th>Region</th><td>' + 'Landkreis Ludwigsburg' + '</td></tr>' +
+ '<tr><th>Vegetal Food Demand</th><td>' + picked3DtileFeature.getProperty('Fd_Dmnd_V') + ' ' + '10^3 kcal/yr' + '</td></tr>' +
+ '<tr><th>Animal Food Demand</th><td>' + picked3DtileFeature.getProperty('Fd_Dmnd_A') + ' ' + '10^3 kcal/yr' + '</td></tr>' +
+ '<tr><th>Total Food Demand</th><td>' + picked3DtileFeature.getProperty('T_Fd_Dmnd') + ' ' + '10^3 kcal/yr' + '</td></tr>' +
+ '<tr><th>Water Demand</th><td>' + picked3DtileFeature.getProperty('Wtr_Dmnd') + ' ' + 'cu.m/yr' + '</td></tr>' +
+ '<tr><th>Specific Space Heating Demand</th><td>' + picked3DtileFeature.getProperty('Sp_Ht_Dmnd') + ' ' + 'kWh/m²*yr' + '</td></tr>' +
+ '</tbody></table>';
+
+ console.log(picked3DtileFeature.getProperty('Semantic'));}
+
+
+ else if (picked3DtileFeature.getProperty('Semantic') === "RoofSurface") {
+
+
+ var featureName = "Information Box";
+ 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('gml_id') + '</td></tr>' +
+ '<tr><th>Building Parent ID</th><td>' + picked3DtileFeature.getProperty('gml_parent_id') + '</td></tr>' +
+ '<tr><th>Roof Area </th><td>' + picked3DtileFeature.getProperty('roof_area') + ' ' + 'm²' + '</td></tr>' +
+ '<tr><th>Photovoltaic Potential</th><td>' + picked3DtileFeature.getProperty('PV_potential_yield') + ' ' + 'MWh/yr' + '</td></tr>' +
+ '</tbody></table>';
+
+ console.log(picked3DtileFeature.getProperty('Semantic'));}
+
+ else if (picked3DtileFeature.getProperty('Semantic') === "LandUse") {
+
+
+ var featureName = "Information Box";
+ 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>LandUse ID</th><td>' + picked3DtileFeature.getProperty('LU_ID') + '</td></tr>' +
+ '<tr><th>LandUse Type</th><td>' + picked3DtileFeature.getProperty('LU_Class') + '</td></tr>' +
+ '<tr><th>Polygon Area </th><td>' + picked3DtileFeature.getProperty('Shape_Area') + ' ' + 'm²' + '</td></tr>' +
+ '<tr><th>Crop Type</th><td>' + picked3DtileFeature.getProperty('LU_CropTyp') + '</td></tr>' +
+ '<tr><th>Soil Type</th><td>' + picked3DtileFeature.getProperty('LU_SoilTyp') + '</td></tr>' +
+ '<tr><th>Location</th><td>' + picked3DtileFeature.getProperty('Area_Name') + '</td></tr>' +
+ '<tr><th>Region</th><td>' + picked3DtileFeature.getProperty('Systm_Name') + '</td></tr>' +
+ '<tr><th>Technical Bioenergy Potential</th><td>' + picked3DtileFeature.getProperty('t_bionrg_p') + ' ' + 'GJ/yr' + '</td></tr>' +
+ '<tr><th>Bioenergy2Electricity Potential</th><td>' + picked3DtileFeature.getProperty('nrg_p_elct') + ' ' + 'GJ/yr' + '</td></tr>' +
+ '<tr><th>Bioenerg2Thermal Potential</th><td>' + picked3DtileFeature.getProperty('nrg_p_thrm') + ' ' + 'GJ/yr' + '</td></tr>' +
+ '<tr><th>Vegetal Food Potential</th><td>' + picked3DtileFeature.getProperty('veg_food_p') + ' ' + '10^3 kcal/yr' + '</td></tr>' +
+ '<tr><th>Animal Food Potential</th><td>' + picked3DtileFeature.getProperty('anm_food_p') + ' ' + '10^3 kcal/yr' + '</td></tr>' +
+ '<tr><th>Total Food Potential</th><td>' + picked3DtileFeature.getProperty('t_food_p') + ' ' + '10^3 kcal/yr' + '</td></tr>' +
+ '</tbody></table>';
+
+ console.log(picked3DtileFeature.getProperty('Semantic'));}
+
+
+ else
+ {
+ var featureName = "Information Box";
+ 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('gml_id') + '</td></tr>' +
+ '<tr><th>Building Parent ID</th><td>' + picked3DtileFeature.getProperty('gml_parent_id') + '</td></tr>' +
+ '<tr><th>Installation Area </th><td>' + picked3DtileFeature.getProperty('area') + ' ' + 'm²' + '</td></tr>' +
+ '</tbody></table>';
+
+ console.log(picked3DtileFeature.getProperty('Semantic'));}
+
+ var arrow = document.getElementById('arrow');
+ var arrowPosition = 10 + ((Number(picked3DtileFeature.getProperty('Sp_Ht_Dmnd')) / 250) * 465);
+ if (Number(picked3DtileFeature.getProperty('Sp_Ht_Dmnd')) >= 250) {
+ arrowPosition = 465;
+ }
+ console.log("Width: " + arrow.style.width);
+ arrow.style.left = arrowPosition + "px";
+ console.log("position left: : " + 10 + ((Number(picked3DtileFeature.getProperty('Sp_Ht_Dmnd')) / 250) * 100) * 465 + "px");
+ arrow.style.visibility = 'visible';
+ }
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+}
+
+active3DTilePicker();
+
--
GitLab