Skip to content
GitLab
Commit a9ffee3a authored by Rushikesh Padsala's avatar Rushikesh Padsala
Browse files

Initial commit

parent 5eeab92d
master
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 849 additions and 0 deletions
+849 -0
public/App.js 0 → 100644
+ 396
- 0
View file @ a9ffee3a
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-20T13:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2019-09-20T13:20:00Z");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2019-09-20T13:00:00Z");
document.getElementById("legend").style.display = "none"; //defining legends hidden by default
//////////////////////////////////////////////////////////////////////////
// Configuring the camera
//////////////////////////////////////////////////////////////////////////
var initialPosition = Cesium.Cartesian3.fromDegrees(16.368084, 48.183257, 360);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(249, -17, 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 building = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: 'https://w2.iaf.hft-stuttgart.de/CesiumData/3DTiles/Buildings/BuildingSolid/Meidling_Vienna/tileset.json'}));
var outdoorbuildinginstallation = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: 'https://w2.iaf.hft-stuttgart.de/CesiumData/3DTiles/Buildings/BuildingInstallation/Meidling_Vienna/tileset.json'}));
var roofsurface = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: 'https://w2.iaf.hft-stuttgart.de/CesiumData/3DTiles/Buildings/RoofSurface/Mediling_Vienna/tileset.json'}));
var roofdefaultstyle = new Cesium.Cesium3DTileStyle({color : "color('#ff5500')"});
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/Meidling_Vienna/tileset.json'}));
building.show = true;
outdoorbuildinginstallation.show = true;
landuse.show = false;
function showbuildings() {
if (document.getElementById('buildings').checked) {building.show = true; outdoorbuildinginstallation.show = true;
roofsurface.show = false;
}
else {building.show = false; outdoorbuildinginstallation.show = false;
roofsurface.show = false;}
}
// Style landuse Tileset
var landusestyle = new Cesium.Cesium3DTileStyle({
color : {
conditions : [
['Number(${LE_CODE}) === 1000', "color('#FFFF00')"],
['Number(${LE_CODE}) === 2000', "color('#8B6914')"],
['Number(${LE_CODE}) === 3000', "color('#808080')"],
['Number(${LE_CODE}) === 4000', "color('#008000')"],
['Number(${LE_CODE}) === 5000', "color('#00FFFF')"],
]
},
show: true
});
function showlanduse() {
if (document.getElementById('landuse').checked) {
landuse.show = true;
landuse.style = landusestyle;
document.getElementById("legend").style.display = "block";
}
else {
landuse.show = false;
document.getElementById("legend").style.display = "none";
}
}
//////////////////////////////////////////////////////////////////////////
// Style 3D Tileset
//////////////////////////////////////////////////////////////////////////
var buildingdefaultstyle = new Cesium.Cesium3DTileStyle({
color : "color('WHITE')",
show: true
});
var heatenergydemandstyle = new Cesium.Cesium3DTileStyle({
color : {
conditions : [
[' Number(${nrg_epc_primaryEnergyDemandValue_s1}) >= 225', "color('red')"],
[' Number(${nrg_epc_primaryEnergyDemandValue_s1}) >= 125', "mix(color('yellow'), color('red'), (Number(${nrg_epc_primaryEnergyDemandValue_s1}) -125) / 125)"],
[' Number(${nrg_epc_primaryEnergyDemandValue_s1}) >= 1', "mix(color('green'), color('yellow'), (Number(${nrg_epc_primaryEnergyDemandValue_s1}) ) / 125)"],
[' Number(${nrg_epc_primaryEnergyDemandValue_s1}) < 1', 'rgb(0, 0, 0)'],
['true', 'rgb(0, 0, 0)']
]
},
show: true
});
var heatdemandstyle = document.getElementById('heatdemand');
function showheatdemand() {
if (document.getElementById('pvpotential').checked) {
alert("At a time only one analysis selection 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) {
outdoorbuildinginstallation.show = false;
roofsurface.show = false;
building.style = heatenergydemandstyle;
document.getElementById("heat-demand-legend").style.display = "block";
}
else {
outdoorbuildinginstallation.show = true;
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 roofPVstyle = new Cesium.Cesium3DTileStyle({
color : {
conditions : [
[' Number(${PV_yield}) >= 10', "color('green')"],
[' Number(${PV_yield}) >= 5', "mix(color('yellow'), color('green'), (Number(${PV_yield}) -5) /5)"],
[' Number(${PV_yield}) >= 1', "mix(color('red'), color('yellow'), (Number(${PV_yield}) ) /5)"],
[' Number(${PV_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 only one analysis selection is possible. Please uncheck the current analysis selection first and then re-select this option.");
return false;
}
else {
if (document.getElementById('buildings').checked) {
if (pvpotentialstyle.checked) {
outdoorbuildinginstallation.show = false;
roofsurface.show = true;
roofsurface.style = roofPVstyle;
document.getElementById("pv-potential-legend").style.display = "block";
}
else {
outdoorbuildinginstallation.show = true;
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);
// 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.AQUA;
}
}
}, 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 - if condition is for different info box for different entities such as building solids, roofs, landuse etc
if (picked3DtileFeature.getProperty('SemanticType') === "Building") {
var featureName = "Meidling 3D Viewer - Building";
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 Class Code</th><td>' + picked3DtileFeature.getProperty('citygml_class') + '</td></tr>' +
'<tr><th>Building Type</th><td>' + picked3DtileFeature.getProperty('buildingType') + '</td></tr>' +
'<tr><th>Year of Construction</th><td>' + picked3DtileFeature.getProperty('citygml_year_of_construction') + '</td></tr>' +
'<tr><th>Roof Type</th><td>' + picked3DtileFeature.getProperty('citygml_roof_type') + '</td></tr>' +
'<tr><th>Building Storeys Above Ground</th><td>' + picked3DtileFeature.getProperty('citygml_storeys_above_ground') + '</td></tr>' +
'<tr><th>Building Storeys Below Ground</th><td>' + picked3DtileFeature.getProperty('citygml_storeys_below_ground') + '</td></tr>' +
'<tr><th>Total Residents</th><td>' + picked3DtileFeature.getProperty('num_residents') + '</td></tr>' +
'<tr><th>Building Height</th><td>' + picked3DtileFeature.getProperty('citygml_measured_height') + ' ' + 'm' + '</td></tr>' +
'<tr><th>Footprint Area </th><td>' + picked3DtileFeature.getProperty('footprintArea') + ' ' + 'm²' + '</td></tr>' +
'<tr><th>Building Volume</th><td>' + picked3DtileFeature.getProperty('lod2Volume') + ' ' + 'm³' + '</td></tr>' +
'<tr><th>Specific Space Heating Demand</th><td>' + picked3DtileFeature.getProperty('nrg_epc_primaryEnergyDemandValue_s1') + ' ' + 'kWh/m²*yr' + '</td></tr>' +
'<tr><th>Domestic Hot Water Demand</th><td>' + picked3DtileFeature.getProperty('nrg_dhwDemandYear') + ' ' + 'kWh*yr' + '</td></tr>' +
'<tr><th>Electricity Domestic Hot Water Demand</th><td>' + picked3DtileFeature.getProperty('nrg_electricityDemandYear') + ' ' + 'kWh*yr' + '</td></tr>' +
'</tbody></table>';
console.log(picked3DtileFeature.getProperty('SemanticType'));}
else if (picked3DtileFeature.getProperty('SemanticType') === "RoofSurface") {
var featureName = "Meidling 3D Viewer - Roof Surface";
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 Type</th><td>' + picked3DtileFeature.getProperty('citygml_roof_type') + '</td></tr>' +
'<tr><th>Roof Area </th><td>' + picked3DtileFeature.getProperty('roofArea') + ' ' + 'm²' + '</td></tr>' +
'<tr><th>Photovoltaic Potential</th><td>' + picked3DtileFeature.getProperty('PV_yield') + ' ' + 'MWh/yr' + '</td></tr>' +
'</tbody></table>';
console.log(picked3DtileFeature.getProperty('SemanticType'));}
else if (picked3DtileFeature.getProperty('SemanticType') === "LandUse") {
var featureName = "Meidling 3D Viewer - LandUse";
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('gml_id') + '</td></tr>' +
'<tr><th>LandUse Class</th><td>' + picked3DtileFeature.getProperty('NUTZUNG_LE') + '</td></tr>' +
'<tr><th>LandUse Function</th><td>' + picked3DtileFeature.getProperty('NUTZUNG_L0') + '</td></tr>' +
'<tr><th>LandUse Usage</th><td>' + picked3DtileFeature.getProperty('NUTZUNG_L1') + '</td></tr>' +
'<tr><th>LandUse Area </th><td>' + picked3DtileFeature.getProperty('Shape_Area') + ' ' + 'm²' + '</td></tr>' +
'</tbody></table>';
console.log(picked3DtileFeature.getProperty('SemanticType'));}
else
{
var featureName = "Meidling 3D Viewer - Building Installation";
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('SemanticType'));}
var arrow = document.getElementById('arrow');
var arrowPosition = 10 + ((Number(picked3DtileFeature.getProperty('nrg_epc_primaryEnergyDemandValue_s1')) / 250) * 465);
if (Number(picked3DtileFeature.getProperty('nrg_epc_primaryEnergyDemandValue_s1')) >= 250) {
arrowPosition = 465;
}
console.log("Width: " + arrow.style.width);
arrow.style.left = arrowPosition + "px";
console.log("position left: : " + 10 + ((Number(picked3DtileFeature.getProperty('nrg_epc_primaryEnergyDemandValue_s1')) / 250) * 100) * 465 + "px");
arrow.style.visibility = 'visible';
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
active3DTilePicker();
public/CSS/Images/hft.jpg 0 → 100644
+ 0
- 0
View file @ a9ffee3a
public/CSS/Images/hft.jpg

57.1 KB

public/CSS/index.css 0 → 100644
+ 68
- 0
View file @ a9ffee3a
.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/meidling.css 0 → 100644
+ 247
- 0
View file @ a9ffee3a
/*
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;
}
.legends {
transform: translate(0, 0);
display: none;
bottom: 35px;
right: 10px;
width: 70%;
max-width: 480px;
color: #edffff;
border: 1px solid #444;
border-right: none;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
box-shadow: 0 0 10px 1px #000;
opacity: 0.9;
transition: visibility 0s 0.3s, opacity 0.3s ease-in, transform 0.3s ease-in;
background: rgba(42, 42, 42, 0.9);
position: absolute;
padding: 8px;
border-radius: 10px;
}
.pv-potential-legend-container {
background: rgba(42, 42, 42, 0.9);
padding: 8px;
border-radius: 4px;
text-align: center;
}
#pv-potential-legend-title {
margin: 0px;
padding-bottom: 10px;
}
.pv-potential-Bar {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 30px;
background: linear-gradient(to right, #ff0000 0%, #ffff00 50%, #00ff00 100%);
color: #000;
font-size: 14px;
font-weight: bold;
}
#bottom-round {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.line {
font-size: 145%;
}
.values {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 25px;
color: #edffff;
font-size: 14px;
font-weight: bold;
}
.heat-demand-legend-container {
background: rgba(42, 42, 42, 0.9);
padding: 8px;
border-radius: 4px;
text-align: center;
}
#heat-demand-legend-title {
margin: 0px;
padding-bottom: 10px;
}
.Heat-Demand-Bar {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 30px;
background: linear-gradient(to right, #00ff00 0%, #ffff00 50%, #ff0000 100%);
color: #000;
font-size: 14px;
font-weight: bold;
opacity: 1;
}
#top {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#bottom {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
font-size: 145%;
}
#arrow-slider {
display: block;
width: 100%;
height: 25px;
}
#arrow {
position: absolute;
top: 66%;
left: 0px;
visibility: hidden;
color: #000;
font-size: 35px;
font-weight: bold;
}
.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/index.html 0 → 100644
+ 138
- 0
View file @ a9ffee3a
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- Make the app on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Meidling 3D Viewer</title>
<!-- The Cesium library. -->
<script src="https://cesiumjs.org/releases/1.57/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.57/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<!-- stylesheets -->
<link rel="stylesheet" href="./CSS/index.css" media="screen">
<link rel="stylesheet" type="text/css" href="./CSS/meidling.css">
<!-- external scripts -->
</head>
<body>
<!-- defining container to keep cesium viewer -->
<div id="cesiumContainer"></div>
<!-- defining menu panel -->
<div class="backdrop" id="menu">
<h2>Meidling 3D Viewer</h2>
<span><strong>3D City Model</strong></span>
<div class="nowrap">
<input id="buildings" type="checkbox" checked onclick="showbuildings()" />
<label for="buildings">Buildings</label>
<input id="landuse" type="checkbox" onclick="showlanduse()" />
<label for="landuse">LandUse</label>
</div>
<br>
<span><strong>Analysis</strong></span>
<div class="nowrap">
<input id="heatdemand" type="checkbox" onclick="return showheatdemand()" />
<label for="heatdemand">Specific Space Heating Demand</label>
<br>
<input id="pvpotential" type="checkbox" onclick="return showpvpotential()" />
<label for="pvpotential">Rooftop Photovoltaic Potential</label>
</div>
<br>
<!-- for legend panel -->
<div id=legend>
<hr color='white'>
<div class='my-legend' id="legendcontainer">
<div class='legend-title'>LandUse Classification</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#FFFF00;'></span>Settlmemt Area</li>
<li><span style='background:#8B6914;'></span>Open Plot</li>
<li><span style='background:#808080;'></span>Road</li>
<li><span style='background:#008000;'></span>Vegetation</li>
<li><span style='background:#00FFFF;'></span>Water Body</li>
</ul>
</div>
</div>
</div>
</div>
<!-- defining container to keep cesium viewer -->
<div id="chartcontainer" style="visibility: hidden;"> <div class='legend-title'>Select a Building</div><button type="button" class="cesium-infoBox-close" onclick="closeChart()">×</button>
<div id="chart"></div>
</div>
<a href="https://www.hft-stuttgart.de/" target='_blank'>
<div class="credit"></div>
</a>
<div class="legends" id="pv-potential-legend">
<div class="pv-potential-legend-container">
<h3 id="pv-potential-legend-title">
Rooftop Photovoltaic Potential [MWh/yr]
</h3>
<div class= "pv-potential-Bar" id="bottom-round"/>
</div>
<div class="values">
<div class="value">0</div>
<div class="value">2</div>
<div class="value">4</div>
<div class="value">6</div>
<div class="value">8</div>
<div class="value">>10</div>
</div>
</div>
</div>
<div class="legends" id="heat-demand-legend">
<div class="heat-demand-legend-container">
<h3 id="heat-demand-legend-title">
Specific Space Heating Demand [kWh/(m²*yr)]
</h3>
<div class= "Heat-Demand-Bar" id ="top">
<div class="classes" >A+</div>
<div class="line" >|</div>
<div class="classes" >A</div>
<div class="line" >|</div>
<div class="classes" >B</div>
<div class="line" >|</div>
<div class="classes" >C</div>
<div class="line" >|</div>
<div class="classes" >D</div>
<div class="line" >|</div>
<div class="classes" >E</div>
<div class="line" >|</div>
<div class="classes" >F</div>
<div class="line" >|</div>
<div class="classes" >G</div>
<div class="line" >|</div>
<div class="classes" >H</div>
</div>
<div class="values">
<div class="value">0</div>
<div class="value">25</div>
<div class="value">50</div>
<div class="value">75</div>
<div class="value">100</div>
<div class="value">125</div>
<div class="value">150</div>
<div class="value">175</div>
<div class="value">200</div>
<div class="value">>225</div>
</div>
<div class= "Heat-Demand-Bar" id="bottom"/>
<div id="arrow-slider">
<div id="arrow">&uArr;</div>
</div>
</div>
</div>
<!-- javascript -->
<script src="./App.js"></script>
</body>
</html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal