Skip to content

GitLab

Commit 18ae7912 authored by Rushikesh Padsala's avatar Rushikesh Padsala
Browse files

added viewer

parent bb12f491
Pipeline #4519 passed with stage
in 18 seconds
Hide whitespace changes
Inline Side-by-side
public/CSS/index.css 0 → 100644
View file @ 18ae7912
.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/rosensteinviertel3D.css 0 → 100644
View file @ 18ae7912
/*
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 0 → 100644
View file @ 18ae7912
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
//////////////////////////////////////////////////////////////////////////
// Configuring the camera
//////////////////////////////////////////////////////////////////////////
// // Create an initial camera view
var initialPosition = Cesium.Cartesian3.fromDegrees(9.197574, 48.788913, 900);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(360, -45, 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 rosensteinviertelBldgSld = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: './Source/Data/Bldg/tileset.json'}));
//viewer.zoomTo(rosensteinviertelBldgSld);
var rosensteinviertelBldgSrf = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: './Source/Data/Srf/tileset.json'}));
rosensteinviertelBldgSld.show = true;
rosensteinviertelBldgSrf.show = false;
//////////////////////////////////////////////////////////////////////////
// Style 3D Tileset
//////////////////////////////////////////////////////////////////////////
var defaultstyle = new Cesium.Cesium3DTileStyle({
color : "color('WHITE')",
show: true
});
var irradiancestyle = new Cesium.Cesium3DTileStyle({
color : {
conditions : [
["(${Irr_kWh} > 0) && (${Irr_kWh} < 200)", "color('#6495ED')"],
["(${Irr_kWh} >= 200) && (${Irr_kWh} < 450)", "color('#9370DB')"],
["(${Irr_kWh} >= 450) && (${Irr_kWh} < 700)", "color('#8B0000')"],
["(${Irr_kWh} >= 700) && (${Irr_kWh} < 950)", "color('#D2691E')"],
["(${Irr_kWh} >= 950) && (${Irr_kWh} < 1250)", "color('#FFEBCD')"],
["(${Irr_kWh} >= 1250)", "color('#EC1414')"],
["true", "color('#000000')"]
]
},
show: true
});
var colorstyle1 = document.getElementById('3dbuildings');
var colorstyle2 = document.getElementById('irradiance');
function set3DColorStyle() {
if (colorstyle1.checked) {
rosensteinviertelBldgSld.show = true;
rosensteinviertelBldgSrf.show = false;
rosensteinviertelBldgSld.style = defaultstyle;
document.getElementById("irradianceLegend").style.display = "none";
}
else if (colorstyle2.checked) {
rosensteinviertelBldgSld.show = false;
rosensteinviertelBldgSrf.show = true;
rosensteinviertelBldgSrf.style = irradiancestyle;
document.getElementById("irradianceLegend").style.display = "block";
}
}
colorstyle1.addEventListener('change', set3DColorStyle);
colorstyle2.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('Type');
if (!Cesium.defined(name)) {
name = picked3DtileFeature.getProperty('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('PolygonID') + '</td></tr>' +
'<tr><th>Building ID</th><td>' + picked3DtileFeature.getProperty('bldgID') + '</td></tr>' +
'<tr><th>Surface Area (m²)</th><td>' + picked3DtileFeature.getProperty('Area') + '</td></tr>' +
'<tr><th>Irradiance (kWh/(m².a))</th><td>' + picked3DtileFeature.getProperty('Irr_kWh') + '</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>Height (m)</th><td>' + picked3DtileFeature.getProperty('citygml_measured_height') + '</td></tr>' +
'</tbody></table>';
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
active3DTilePicker();
public/Source/Data/Bldg/tileset.json 0 → 100644
View file @ 18ae7912
{
"asset" : {
"version" : "0.0"
},
"properties" : {
"gml_id" : {},
"gml_parent_id" : {},
"citygml_target_uri" : {},
"citygml_feature_role" : {},
"citygml_feature_role_attr_name" : {},
"citygml_feature_role_attr_val" : {},
"gml_description" : {},
"gml_name" : {},
"citygml_creationDate" : {},
"citygml_terminationDate" : {},
"externalReference{}.externalObject.name" : {},
"externalReference{}.externalObject.uri" : {},
"externalReference{}.informationSystem" : {},
"citygml_generalizes_to{}.xlink_href" : {},
"citygml_relative_to_terrain" : {},
"citygml_relative_to_water" : {},
"citygml_appearance{}.xlink_href" : {},
"citygml_class" : {},
"citygml_class_codeSpace" : {},
"citygml_function{}" : {},
"citygml_function{}.codeSpace" : {},
"citygml_usage{}" : {},
"citygml_usage{}.codeSpace" : {},
"citygml_year_of_construction" : {},
"citygml_year_of_demolition" : {},
"citygml_roof_type" : {},
"citygml_roof_type_codeSpace" : {},
"citygml_measured_height" : {
"minimum" : 6,
"maximum" : 47
},
"citygml_measured_height_units" : {},
"citygml_storeys_above_ground" : {},
"citygml_storeys_below_ground" : {},
"citygml_storey_heights_above_ground" : {},
"citygml_storey_heights_above_ground_units" : {},
"citygml_storey_heights_below_ground" : {},
"citygml_storey_heights_below_ground_units" : {},
"citygml_outer_building_installation{}.xlink_href" : {},
"citygml_interior_building_installation{}.xlink_href" : {},
"citygml_bounded_by{}.xlink_href" : {},
"citygml_level_of_detail{}" : {},
"citygml_interior_room{}.xlink_href" : {},
"citygml_consists_of_building_part{}.xlink_href" : {},
"citygml_address{}.xlink_href" : {},
"_xmax" : {
"minimum" : 514339.57247924805,
"maximum" : 514803.9310913086
},
"_xmin" : {
"minimum" : 514297.1757507324,
"maximum" : 514761.53436279297
},
"_ymax" : {
"minimum" : 5404612.538024902,
"maximum" : 5405382.968414307
},
"_ymin" : {
"minimum" : 5404569.954559326,
"maximum" : 5405345.932447874
},
"_zmax" : {
"minimum" : 5.999999999999915,
"maximum" : 47.31066894531196
},
"_zmin" : {
"minimum" : 0,
"maximum" : 0
},
"Feature" : {},
"Type" : {}
},
"geometricError" : 143.69848866946995,
"root" : {
"boundingVolume" : {
"box" : [ 4155317.853090036, 672849.4253329008, 4775779.984113993, 636.8256774907932, 0, 0, 0, 531.7086586746154, 0, 0, 0, 569.5859788591042 ]
},
"refine" : "ADD",
"content" : {
"boundingVolume" : {
"box" : [ 4155317.853090036, 672849.4253329008, 4775779.984113993, 636.8256774907932, 0, 0, 0, 531.7086586746154, 0, 0, 0, 569.5859788591042 ]
},
"url" : "data/data0.b3dm"
}
}
}
\ No newline at end of file
public/Source/Data/Srf/tileset.json 0 → 100644
View file @ 18ae7912
{
"asset" : {
"version" : "0.0"
},
"properties" : {
"gml_id" : {},
"gml_parent_id" : {},
"citygml_target_uri" : {},
"citygml_feature_role" : {},
"citygml_feature_role_attr_name" : {},
"citygml_feature_role_attr_val" : {},
"gml_description" : {},
"gml_name" : {},
"citygml_creationDate" : {},
"citygml_terminationDate" : {},
"externalReference{}.externalObject.name" : {},
"externalReference{}.externalObject.uri" : {},
"externalReference{}.informationSystem" : {},
"citygml_generalizes_to{}.xlink_href" : {},
"citygml_relative_to_terrain" : {},
"citygml_relative_to_water" : {},
"citygml_appearance{}.xlink_href" : {},
"citygml_class" : {},
"citygml_class_codeSpace" : {},
"citygml_function{}" : {},
"citygml_function{}.codeSpace" : {},
"citygml_usage{}" : {},
"citygml_usage{}.codeSpace" : {},
"citygml_year_of_construction" : {},
"citygml_year_of_demolition" : {},
"citygml_roof_type" : {},
"citygml_roof_type_codeSpace" : {},
"citygml_measured_height" : {},
"citygml_measured_height_units" : {},
"citygml_storeys_above_ground" : {},
"citygml_storeys_below_ground" : {},
"citygml_storey_heights_above_ground" : {},
"citygml_storey_heights_above_ground_units" : {},
"citygml_storey_heights_below_ground" : {},
"citygml_storey_heights_below_ground_units" : {},
"citygml_outer_building_installation{}.xlink_href" : {},
"citygml_interior_building_installation{}.xlink_href" : {},
"citygml_bounded_by{}.xlink_href" : {},
"citygml_level_of_detail{}" : {},
"citygml_interior_room{}.xlink_href" : {},
"citygml_consists_of_building_part{}.xlink_href" : {},
"citygml_address{}.xlink_href" : {},
"_geometry_name" : {},
"_part_number" : {},
"bldgID" : {},
"PolygonID" : {},
"Feature" : {},
"Area" : {},
"Azimuth" : {},
"Building ID" : {},
"Inclination" : {},
"Irr_kWh" : {
"minimum" : 0,
"maximum" : 1165.7808
},
"Irradiance_Wm" : {},
"Surface ID" : {},
"Type" : {},
"_matched_records" : {
"minimum" : 1,
"maximum" : 1
}
},
"geometricError" : 142.6456858300371,
"root" : {
"boundingVolume" : {
"box" : [ 4155317.853090036, 672849.4253329008, 4775779.984113993, 636.8256774907932, 0, 0, 0, 531.7086586746154, 0, 0, 0, 569.5859788591042 ]
},
"refine" : "ADD",
"content" : {
"boundingVolume" : {
"box" : [ 4155317.853090036, 672849.4253329008, 4775779.984113993, 636.8256774907932, 0, 0, 0, 531.7086586746154, 0, 0, 0, 569.5859788591042 ]
},
"url" : "data/data0.b3dm"
}
}
}
\ No newline at end of file
public/index.html 0 → 100644
View file @ 18ae7912
<!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>Rosensteinviertel 3D Viewer</title>
<!-- The Cesium library. -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.81/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/rosensteinviertel3D.css">
</head>
<body>
<!-- defining container to keep cesium viewer -->
<div id="cesiumContainer"></div>
<!-- defining menu panel -->
<div class="backdrop" id="menu">
<h2>Rosensteinviertel 3D Viewer</h2>
<span><strong>Show</strong></span>
<div class="nowrap">
<input id="3dbuildings" name="source" type="radio" checked/>
<label for="3dbuildings">3D Buildings</label>
</div>
<div class="nowrap">
<input id="irradiance" name="source" type="radio"/>
<label for="irradiance">Solar Irradiance</label>
</div>
<br>
<!-- for legend panel -->
<div id=irradianceLegend>
<hr color='white'>
<div class='my-legend' id="legendcontainer">
<div class='legend-title'>Solar Irradiance (kWh/(m².a))</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#6495ED;'></span>Less than 200</li>
<li><span style='background:#9370DB;'></span>200 to 450</li>
<li><span style='background:#8B0000;'></span>450 to 700</li>
<li><span style='background:#D2691E;'></span>700 to 950</li>
<li><span style='background:#FFEBCD;'></span>950 to 1250</li>
<li><span style='background:#EC1414;'></span>More than 1250</li>
</ul>
</div>
</div>
</div>
</div>
<a href="https://www.hft-stuttgart.de/" target='_blank'>
<div class="credit"></div>
</a>
<!-- javascript -->
<script src="./Source/App.js"></script>
</body>
</html>
Markdown is supported
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