Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkNjcyOWZhYi0xZmQ0LTQyYmMtYjQ0MS1hY2YxYzcxYWFmMWEiLCJpZCI6MTEwNzEsImlhdCI6MTYzMDk5MzEyNX0.fcsH4S5hE0ye9s-2cOFMyObiHlhu9vqjWdlYfGkv5gU';
//////////////////////////////////////////////////////////////////////////
// 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
});
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("annualWaterDemandlegend").style.display = "none"; //defining legends hidden by default
document.getElementById("annualWaterDemandpersqmLegend").style.display = "none"; //defining legends hidden by default
//////////////////////////////////////////////////////////////////////////
// Configuring the camera
//////////////////////////////////////////////////////////////////////////
// // Create an initial camera view
var initialPosition = Cesium.Cartesian3.fromDegrees(10.135788, 48.937936, 350);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(172, -14, 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 currentrainau = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: './Source/Data/Bldg/tileset.json'}));
//////////////////////////////////////////////////////////////////////////
// Style 3D Tileset
//////////////////////////////////////////////////////////////////////////
var defaultstyle = new Cesium.Cesium3DTileStyle({
color : "color('WHITE')",
show: true
});
var annualwaterdemandstyle = new Cesium.Cesium3DTileStyle({
color : {
conditions : [
["(${Water_Demand} === 0)", "color('#000000')"],
["(${Water_Demand} > 0) && (${Water_Demand} < 500)", "color('#33ACFF')"],
["(${Water_Demand} >= 500) && (${Water_Demand} < 1000)", "color('#2AFF00')"],
["(${Water_Demand} >= 1000) && (${Water_Demand} < 5000)", "color('#FFFF00')"],
["(${Water_Demand} >= 5000) && (${Water_Demand} < 10000)", "color('#FFA200')"],
["(${Water_Demand} >= 10000)", "color('#FF0000')"]
]
},
show: true
});
var annualwaterdemandpersqmstyle = new Cesium.Cesium3DTileStyle({
color : {
conditions : [
["(${Water_Demand_perSqm} === 0)", "color('#000000')"],
["(${Water_Demand_perSqm} > 0) && (${Water_Demand_perSqm} < 0.50)", "color('#33ACFF')"],
["(${Water_Demand_perSqm} >= 0.50) && (${Water_Demand_perSqm} < 1)", "color('#2AFF00')"],
["(${Water_Demand_perSqm} >= 1) && (${Water_Demand_perSqm} < 1.50)", "color('#FFFF00')"],
["(${Water_Demand_perSqm} >= 1.50) && (${Water_Demand_perSqm} < 2)", "color('#FFA200')"],
["(${Water_Demand_perSqm} >= 2)", "color('#FF0000')"]
]
},
show: true
});
var colorstyle1 = document.getElementById('3dbuildings');
var colorstyle2 = document.getElementById('annualwaterdemand');
var colorstyle3 = document.getElementById('annualwaterdemandpersqm');
function set3DColorStyle() {
if (colorstyle1.checked) {
currentrainau.style = defaultstyle;
document.getElementById("annualWaterDemandlegend").style.display = "none";
document.getElementById("annualWaterDemandpersqmLegend").style.display = "none";
}
else if (colorstyle2.checked) {
currentrainau.style = annualwaterdemandstyle;
document.getElementById("annualWaterDemandlegend").style.display = "block";
document.getElementById("annualWaterDemandpersqmLegend").style.display = "none";
}
else if (colorstyle3.checked) {
currentrainau.style = annualwaterdemandpersqmstyle;
document.getElementById("annualWaterDemandlegend").style.display = "none";
document.getElementById("annualWaterDemandpersqmLegend").style.display = "block";
}
}
colorstyle1.addEventListener('change', set3DColorStyle);
colorstyle2.addEventListener('change', set3DColorStyle);
colorstyle3.addEventListener('change', set3DColorStyle);
//////////////////////////////////////////////////////////////////////////
// Custom mouse interaction for highlighting and selecting
//////////////////////////////////////////////////////////////////////////
//Style the overlay
var nameOverlay = document.createElement('div');
viewer.container.appendChild(nameOverlay);
nameOverlay.className = 'backdrop';
nameOverlay.style.display = 'none';
nameOverlay.style.position = 'absolute';
nameOverlay.style.bottom = '0';
nameOverlay.style.left = '0';
nameOverlay.style['pointer-events'] = 'none';
nameOverlay.style.padding = '4px';
nameOverlay.style.backgroundColor = 'black';
nameOverlay.style.fontFamily = 'Fira Sans, sans-serif';
//Selecting a Building
var Pickers_3DTile_Activated = true;
// Information about the currently highlighted feature
function active3DTilePicker() {
var highlighted = {
feature: undefined,
originalColor: new Cesium.Color()
};
// Information about the currently selected feature
var selected = {
feature: undefined,
originalColor: new Cesium.Color()
};
// An entity object which will hold info about the currently selected feature for infobox display
var selectedEntity = new Cesium.Entity();
// Get default left click handler for when a feature is not picked on left click
var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
// Color a feature yellow on hover.
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
if (Pickers_3DTile_Activated) {
// If a feature was previously highlighted, undo the highlight
if (Cesium.defined(highlighted.feature)) {
highlighted.feature.color = highlighted.originalColor;
highlighted.feature = undefined;
}
// Pick a new feature
var picked3DtileFeature = viewer.scene.pick(movement.endPosition);
if (!Cesium.defined(picked3DtileFeature)) {
nameOverlay.style.display = 'none';
return;
}
// A feature was picked, so show it's overlay content
nameOverlay.style.display = 'block';
nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';
nameOverlay.style.left = movement.endPosition.x + 'px';
var name = picked3DtileFeature.getProperty('Building_Function');
if (!Cesium.defined(name)) {
name = picked3DtileFeature.getProperty('Building_Function');
}
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;
$("#chart").html("");
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 = "Rainau 3D Viewer";
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('GMLID') + '</td></tr>' +
'<tr><th>Building Height</th><td>' + picked3DtileFeature.getProperty('citygml_measured_height')+ ' ' + 'm' + '</td></tr>' +
'<tr><th>Storeys Above Ground</th><td>' + picked3DtileFeature.getProperty('citygml_storeys_above_ground')+ '</td></tr>' +
'<tr><th>Year of Construction</th><td>' + picked3DtileFeature.getProperty('citygml_year_of_construction') + '</td></tr>' +
'<tr><th>Building Function Code</th><td>' + picked3DtileFeature.getProperty('citygml_funct') + '</td></tr>' +
'<tr><th>Building Function</th><td>' + picked3DtileFeature.getProperty('Building_Function') + '</td></tr>' +
'<tr><th>Building Type</th><td>' + picked3DtileFeature.getProperty('Building_Type') + '</td></tr>' +
'<tr><th>Total Occupants</th><td>' + picked3DtileFeature.getProperty('Number_of_Occupants_per_Building') + '</td></tr>' +
'<tr><th>Heated Area </th><td>' + picked3DtileFeature.getProperty('Heated_Area') + ' ' + 'm²' + '</td></tr>' +
'<tr><th>Annual Water Demand</th><td>' + picked3DtileFeature.getProperty('Water_Demand') + ' ' + 'cu.m' + '</td></tr>' +
'<tr><th>Annual Water Demand (per Sq.m)</th><td>' + picked3DtileFeature.getProperty('Water_Demand_perSqm') + ' ' + 'cu.m' + '</td></tr>' +
'</tbody></table>';
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
active3DTilePicker();
//////////////////////////////////////////////////////////////////////////
// Custom mouse interaction for highlighting and selecting
//////////////////////////////////////////////////////////////////////////
function showTable() {
var x = document.getElementById("chartcontainer");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}