Skip to content

GitLab

Commit 40bd40c6 authored by Rushikesh Padsala's avatar Rushikesh Padsala
Browse files

viewer added

parent 79ec5751
Expand all Hide whitespace changes
Inline Side-by-side
public/CSS/Montreal3DViewer.css 0 → 100644
View file @ 40bd40c6
#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;
}
table {
display: table;
border-collapse: separate;
border-spacing: 1px;
border-color: grey;
}
.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;
}
.credit1 {
width: 75px;
height: 75px;
overflow: hidden;
position: fixed;
z-index: 99999;
background: url(Images/hft.jpg) no-repeat;
background-size: 75px;
bottom: 0px;
left: 10px;
box-shadow: 0 0 10px 1px #000;
}
.credit2 {
width: 75px;
height: 75px;
overflow: hidden;
position: fixed;
z-index: 99999;
background: url(Images/CU.jpg) no-repeat;
background-size: 75px;
bottom: 80px;
left: 10px;
box-shadow: 0 0 10px 1px #000;
}
.credit3 {
width: 75px;
height: 75px;
overflow: hidden;
position: fixed;
z-index: 99999;
background: url(Images/stt.png) no-repeat;
background-size: 75px;
bottom: 0px;
left: 90px;
box-shadow: 0 0 10px 1px #000;
}
.credit4 {
width: 75px;
height: 75px;
overflow: hidden;
position: fixed;
z-index: 99999;
background: url(Images/email.jpg) no-repeat;
background-size: 75px;
bottom: 80px;
left: 90px;
box-shadow: 0 0 10px 1px #000;
}
#spinner {
width: 287px;
height: 141px;
overflow: hidden;
position: fixed;
z-index: 99999;
background-color: white;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
box-shadow: 0 0 10px 1px #000;
}
\ No newline at end of file
public/CSS/index.css 0 → 100644
View file @ 40bd40c6
.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/widgets.css 0 → 100644
View file @ 40bd40c6
This diff is collapsed.
public/Source/App.js 0 → 100644
View file @ 40bd40c6
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxYjBlYmYyNC1kNWRhLTRiNTUtOGNlYi02NGY1YWVhNjI2MjIiLCJpZCI6MTEwNzEsImlhdCI6MTYxOTcwNjI0M30.tlpaagcH93SjaHIn7eEVpanGSiH2yDylbGJZr2gsXnY';
//////////////////////////////////////////////////////////////////////////
// Loading Montreal Terrain
//////////////////////////////////////////////////////////////////////////
var montrealterrain = new Cesium.CesiumTerrainProvider({
url: 'https://w2.iaf-ex.hft-stuttgart.de/CesiumData/QuantizedMesh/Montreal/',
});
var terrainProviderViewModels = [];
terrainProviderViewModels.push(new Cesium.ProviderViewModel({
name: 'Montreal Terrain',
iconUrl: Cesium.buildModuleUrl('https://w2.iaf-ex.hft-stuttgart.de/CesiumData/Images/TerrainProviders/MontrealTerrain.png'),
tooltip: 'Terrain of Montreal 5m x 5m',
creationFunction: function () {
return montrealterrain;
}
}));
//////////////////////////////////////////////////////////////////////////
// Creating the Viewer
//////////////////////////////////////////////////////////////////////////
var viewer = new Cesium.Viewer('cesiumContainer', {
scene3DOnly: true,
selectionIndicator: false,
timeline: false,
animation: false,
shadow: false,
imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
enablePickFeatures: false
}),
baseLayerPicker: true,
terrainProviderViewModels: terrainProviderViewModels
});
viewer.clock.shouldAnimate = false;
viewer.scene.globe.enableLighting = true;
//////////////////////////////////////////////////////////////////////////
// Load 3D Tileset
//////////////////////////////////////////////////////////////////////////
var bldgtileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: 'https://w2.iaf-ex.hft-stuttgart.de/CesiumData/3DTiles/Buildings/BuildingSolid/Montreal/tileset.json'
}));
bldgtileset.readyPromise.then(function (tileset) {
height = 4;
viewer.scene.primitives.add(tileset);
var spinner = document.getElementById("spinner");
spinner.style.display = "none";
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);
});
var bldgdefaultstyle = new Cesium.Cesium3DTileStyle({
color: "color('#ffffff')"
});
bldgtileset.style = bldgdefaultstyle;
//////////////////////////////////////////////////////////////////////////
// Configuring the camera
//////////////////////////////////////////////////////////////////////////
var initialPosition = Cesium.Cartesian3.fromDegrees(-73.593335, 45.503595, 300);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(101, -5, 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 = 5;
});
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 === 'Ahuntsic-Cartierville') {
geocoder.searchText = "-73.680319, 45.541892, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Anjou') {
geocoder.searchText = "-73.546672, 45.604898, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Baie-dUrfé') {
geocoder.searchText = "-73.91608, 45.416456, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Beaconsfield') {
geocoder.searchText = "-73.852930, 45.433455, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Côte-des-Neiges-Notre-Dame-de-Grâce') {
geocoder.searchText = "-73.627539, 45.498587, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Côte-Saint-Luc') {
geocoder.searchText = "-73.663752, 45.477272, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Dollard-des-Ormeaux') {
geocoder.searchText = "-73.806455, 45.48423, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Dorval') {
geocoder.searchText = "-73.751089, 45.445308, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Hampstead') {
geocoder.searchText = "-73.646991, 45.481155, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Kirkland') {
geocoder.searchText = "-73.864756, 45.452919, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Lachine') {
geocoder.searchText = "-73.711186, 45.448668, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'LaSalle') {
geocoder.searchText = "-73.629267, 45.432514, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Le-Plateau-Mont-Royal') {
geocoder.searchText = "-73.574066, 45.531365, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Le-Sud-Ouest') {
geocoder.searchText = "-73.588565, 45.467991, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'LÎle-Bizard-Sainte-Geneviève') {
geocoder.searchText = "-73.890756, 45.494889, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'LÎle-Dorval') {
geocoder.searchText = "-73.742947, 45.43244, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Mercier-Hochelaga-Maisonneuve') {
geocoder.searchText = "-73.525846, 45.574106, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Montréal-Est') {
geocoder.searchText = "-73.497744, 45.63098, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Montréal-Nord') {
geocoder.searchText = "-73.627658, 45.604753, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Montréal-Ouest') {
geocoder.searchText = "-73.644244, 45.452855, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Mont-Royal') {
geocoder.searchText = "-73.645477, 45.515008, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Outremont') {
geocoder.searchText = "-73.611145, 45.522466, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Pierrefonds-Roxboro') {
geocoder.searchText = "-73.847175, 45.495508, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Pointe-Claire') {
geocoder.searchText = "-73.806744, 45.456677, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Rivière-des-Prairies-Pointe-aux-Trembles') {
geocoder.searchText = "-73.560902, 45.661352, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Rosemont-La-Petite-Patrie') {
geocoder.searchText = "-73.576036, 45.553384, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Sainte-Anne-de-Bellevue') {
geocoder.searchText = "-73.952398, 45.403856, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Saint-Laurent') {
geocoder.searchText = "-73.705215, 45.505384, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Saint-Léonard') {
geocoder.searchText = "-73.596949, 45.58671, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Senneville') {
geocoder.searchText = "-73.960325, 45.414543, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Verdun') {
geocoder.searchText = "-73.557587, 45.460131, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Ville-Marie') {
viewer.scene.camera.setView(homeCameraView);
geocoder.flightDuration = 5;
}
else if (selectedscenario === 'Villeray-Saint-Michel-Parc-Extension') {
geocoder.searchText = "-73.627625, 45.541465, 700";
geocoder.flightDuration = 5;
geocoder.search();}
else if (selectedscenario === 'Westmount') {
geocoder.searchText = "-73.596395, 45.485733, 700";
geocoder.flightDuration = 5;
geocoder.search();}
}
selectscenario.addEventListener('change', setscenario);
//////////////////////////////////////////////////////////////////////////
// Selecting geometries in 3D Tileset
//////////////////////////////////////////////////////////////////////////
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('LIBELLE_EN');
if (!Cesium.defined(name)) {
name = picked3DtileFeature.getProperty('LIBELLE_EN');
}
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 = "Montreal 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('gml_id') + '</td></tr>' +
'<tr><th>Original Building ID</th><td>' + picked3DtileFeature.getProperty('ori_bldgID') + '</td></tr>' +
'<tr><th>Parcel ID</th><td>' + picked3DtileFeature.getProperty('ID_UEV') + '</td></tr>' +
'<tr><th>Level of Detail</th><td>' + picked3DtileFeature.getProperty('gml_lod') + '</td></tr>' +
'<tr><th>Maximum Building Height</th><td>' + picked3DtileFeature.getProperty('citygml_measured_height') + ' ' + 'm' + '</td></tr>' +
'<tr><th>Building Function Code</th><td>' + picked3DtileFeature.getProperty('CODE_UTILI') + '</td></tr>' +
'<tr><th>Building Function Description (FR)</th><td>' + picked3DtileFeature.getProperty('LIBELLE_UT') + '</td></tr>' +
'<tr><th>Building Function Description (EN)</th><td>' + picked3DtileFeature.getProperty('LIBELLE_EN') + '</td></tr>' +
'<tr><th>Building Category</th><td>' + picked3DtileFeature.getProperty('CATEGORIE') + '</td></tr>' +
'<tr><th>Year of Construction</th><td>' + picked3DtileFeature.getProperty('ANNEE_CONS') + '</td></tr>' +
'<tr><th>Neighborhood</th><td>' + picked3DtileFeature.getProperty('NOM') + '</td></tr>' +
'</tbody></table>';
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
active3DTilePicker();
\ No newline at end of file
public/Source/AppSkeleton.js 0 → 100644
View file @ 40bd40c6
(function () {
"use strict";
// TODO: Add your ion access token from cesium.com/ion/
// Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>';
//////////////////////////////////////////////////////////////////////////
// Creating the Viewer
//////////////////////////////////////////////////////////////////////////
// var viewer = new Cesium.Viewer('cesiumContainer', {
// scene3DOnly: true,
// selectionIndicator: false,
// baseLayerPicker: false
// });
//////////////////////////////////////////////////////////////////////////
// Loading Imagery
//////////////////////////////////////////////////////////////////////////
// // Remove default base layer
// viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
// // Add Sentinel-2 imagery
// viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3954 }));
//////////////////////////////////////////////////////////////////////////
// Loading Terrain
//////////////////////////////////////////////////////////////////////////
// // Load Cesium World Terrain
// viewer.terrainProvider = Cesium.createWorldTerrain({
// requestWaterMask : true, // required for water effects
// requestVertexNormals : true // required for terrain lighting
// });
// // Enable depth testing so things behind the terrain disappear.
// viewer.scene.globe.depthTestAgainstTerrain = true;
//////////////////////////////////////////////////////////////////////////
// Configuring the Scene
//////////////////////////////////////////////////////////////////////////
// // Enable lighting based on sun/moon positions
// viewer.scene.globe.enableLighting = true;
// // Create an initial camera view
// var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
// var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
// var homeCameraView = {
// destination : initialPosition,
// orientation : {
// heading : initialOrientation.heading,
// pitch : initialOrientation.pitch,
// roll : initialOrientation.roll
// }
// };
// // Set the initial view
// viewer.scene.camera.setView(homeCameraView);
// // Add some camera flight animation options
// homeCameraView.duration = 2.0;
// homeCameraView.maximumHeight = 2000;
// homeCameraView.pitchAdjustHeight = 2000;
// homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// // Override the default home button
// viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
// e.cancel = true;
// viewer.scene.camera.flyTo(homeCameraView);
// });
// // Set up clock and timeline.
// viewer.clock.shouldAnimate = true; // default
// viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
// viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
// viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
// viewer.clock.multiplier = 2; // sets a speedup
// viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
// viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
// viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range
//////////////////////////////////////////////////////////////////////////
// Loading and Styling Entity Data
//////////////////////////////////////////////////////////////////////////
// var kmlOptions = {
// camera : viewer.scene.camera,
// canvas : viewer.scene.canvas,
// clampToGround : true
// };
// // Load geocache points of interest from a KML file
// // Data from : http://catalog.opendata.city/dataset/pediacities-nyc-neighborhoods/resource/91778048-3c58-449c-a3f9-365ed203e914
// var geocachePromise = Cesium.KmlDataSource.load('./Source/SampleData/sampleGeocacheLocations.kml', kmlOptions);
// // Add geocache billboard entities to scene and style them
// geocachePromise.then(function(dataSource) {
// // Add the new data as entities to the viewer
// viewer.dataSources.add(dataSource);
// // Get the array of entities
// var geocacheEntities = dataSource.entities.values;
// for (var i = 0; i < geocacheEntities.length; i++) {
// var entity = geocacheEntities[i];
// if (Cesium.defined(entity.billboard)) {
// // Adjust the vertical origin so pins sit on terrain
// entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
// // Disable the labels to reduce clutter
// entity.label = undefined;
// // Add distance display condition
// entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
// // Compute latitude and longitude in degrees
// var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
// var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
// var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
// // Modify description
// var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
// '<tr><th>' + "Longitude" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
// '<tr><th>' + "Latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
// '</tbody></table>';
// entity.description = description;
// }
// }
// });
// var geojsonOptions = {
// clampToGround : true
// };
// // Load neighborhood boundaries from a GeoJson file
// // Data from : https://data.cityofnewyork.us/City-Government/Neighborhood-Tabulation-Areas/cpf4-rkhq
// var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./Source/SampleData/sampleNeighborhoods.geojson', geojsonOptions);
// // Save an new entity collection of neighborhood data
// var neighborhoods;
// neighborhoodsPromise.then(function(dataSource) {
// // Add the new data as entities to the viewer
// viewer.dataSources.add(dataSource);
// neighborhoods = dataSource.entities;
// // Get the array of entities
// var neighborhoodEntities = dataSource.entities.values;
// for (var i = 0; i < neighborhoodEntities.length; i++) {
// var entity = neighborhoodEntities[i];
// if (Cesium.defined(entity.polygon)) {
// // Use kml neighborhood value as entity name
// entity.name = entity.properties.neighborhood;
// // Set the polygon material to a random, translucent color
// entity.polygon.material = Cesium.Color.fromRandom({
// red : 0.1,
// maximumGreen : 0.5,
// minimumBlue : 0.5,
// alpha : 0.6
// });
// // Tells the polygon to color the terrain. ClassificationType.CESIUM_3D_TILE will color the 3D tileset, and ClassificationType.BOTH will color both the 3d tiles and terrain (BOTH is the default)
// entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
// // Generate Polygon center
// var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
// var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
// polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
// entity.position = polyCenter;
// // Generate labels
// entity.label = {
// text : entity.name,
// showBackground : true,
// scale : 0.6,
// horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
// verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
// distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
// disableDepthTestDistance : 100.0
// };
// }
// }
// });
// // Load a drone flight path from a CZML file
// var dronePromise = Cesium.CzmlDataSource.load('./Source/SampleData/SampleFlight.czml');
// // Save a new drone model entity
// var drone;
// dronePromise.then(function(dataSource) {
// viewer.dataSources.add(dataSource);
// // Get the entity using the id defined in the CZML data
// drone = dataSource.entities.getById('Aircraft/Aircraft1');
// // Attach a 3D model
// drone.model = {
// uri : './Source/SampleData/Models/CesiumDrone.gltf',
// minimumPixelSize : 128,
// maximumScale : 1000,
// silhouetteColor : Cesium.Color.WHITE,
// silhouetteSize : 2
// };
// // Add computed orientation based on sampled positions
// drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);
// // Smooth path interpolation
// drone.position.setInterpolationOptions({
// interpolationAlgorithm : Cesium.HermitePolynomialApproximation,
// interpolationDegree : 2
// });
// drone.viewFrom = new Cesium.Cartesian3(-30, 0, 0);
// });
//////////////////////////////////////////////////////////////////////////
// Load 3D Tileset
//////////////////////////////////////////////////////////////////////////
// // Load the NYC buildings tileset
// var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));
// // Adjust the tileset height so it's not floating above terrain
// var heightOffset = -32;
// city.readyPromise.then(function(tileset) {
// // Position tileset
// var boundingSphere = tileset.boundingSphere;
// var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
// var surfacePosition = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
// var offsetPosition = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
// var translation = Cesium.Cartesian3.subtract(offsetPosition, surfacePosition, new Cesium.Cartesian3());
// tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
// });
//////////////////////////////////////////////////////////////////////////
// Style 3D Tileset
//////////////////////////////////////////////////////////////////////////
// // Define a white, opaque building style
// var defaultStyle = new Cesium.Cesium3DTileStyle({
// color : "color('white')",
// show : true
// });
// // Set the tileset style to default
// city.style = defaultStyle;
// // Define a white, transparent building style
// var transparentStyle = new Cesium.Cesium3DTileStyle({
// color : "color('white', 0.3)",
// show : true
// });
// // Define a style in which buildings are colored by height
// var heightStyle = new Cesium.Cesium3DTileStyle({
// color : {
// conditions : [
// ["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
// ["${height} >= 200", "rgb(102, 71, 151)"],
// ["${height} >= 100", "rgb(170, 162, 204)"],
// ["${height} >= 50", "rgb(224, 226, 238)"],
// ["${height} >= 25", "rgb(252, 230, 200)"],
// ["${height} >= 10", "rgb(248, 176, 87)"],
// ["${height} >= 5", "rgb(198, 106, 11)"],
// ["true", "rgb(127, 59, 8)"]
// ]
// }
// });
// var tileStyle = document.getElementById('tileStyle');
// function set3DTileStyle() {
// var selectedStyle = tileStyle.options[tileStyle.selectedIndex].value;
// if (selectedStyle === 'none') {
// city.style = defaultStyle;
// } else if (selectedStyle === 'height') {
// city.style = heightStyle;
// } else if (selectedStyle === 'transparent') {
// city.style = transparentStyle;
// }
// }
// tileStyle.addEventListener('change', set3DTileStyle);
//////////////////////////////////////////////////////////////////////////
// Custom mouse interaction for highlighting and selecting
//////////////////////////////////////////////////////////////////////////
// // If the mouse is over a point of interest, change the entity billboard scale and color
// var previousPickedEntity;
// var handler = viewer.screenSpaceEventHandler;
// handler.setInputAction(function (movement) {
// var pickedPrimitive = viewer.scene.pick(movement.endPosition);
// var pickedEntity = Cesium.defined(pickedPrimitive) ? pickedPrimitive.id : undefined;
// // Unhighlight the previously picked entity
// if (Cesium.defined(previousPickedEntity)) {
// previousPickedEntity.billboard.scale = 1.0;
// previousPickedEntity.billboard.color = Cesium.Color.WHITE;
// }
// // Highlight the currently picked entity
// if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
// pickedEntity.billboard.scale = 2.0;
// pickedEntity.billboard.color = Cesium.Color.ORANGERED;
// previousPickedEntity = pickedEntity;
// }
// }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//////////////////////////////////////////////////////////////////////////
// Setup Camera Modes
//////////////////////////////////////////////////////////////////////////
// var freeModeElement = document.getElementById('freeMode');
// var droneModeElement = document.getElementById('droneMode');
// // Create a follow camera by tracking the drone entity
// function setViewMode() {
// if (droneModeElement.checked) {
// viewer.trackedEntity = drone;
// } else {
// viewer.trackedEntity = undefined;
// viewer.scene.camera.flyTo(homeCameraView);
// }
// }
// freeModeElement.addEventListener('change', setViewMode);
// droneModeElement.addEventListener('change', setViewMode);
// viewer.trackedEntityChanged.addEventListener(function() {
// if (viewer.trackedEntity === drone) {
// freeModeElement.checked = false;
// droneModeElement.checked = true;
// }
// });
//////////////////////////////////////////////////////////////////////////
// Setup Display Options
//////////////////////////////////////////////////////////////////////////
// var shadowsElement = document.getElementById('shadows');
// var neighborhoodsElement = document.getElementById('neighborhoods');
// shadowsElement.addEventListener('change', function (e) {
// viewer.shadows = e.target.checked;
// });
// neighborhoodsElement.addEventListener('change', function (e) {
// neighborhoods.show = e.target.checked;
// });
// // Finally, wait for the initial city to be ready before removing the loading indicator.
// var loadingIndicator = document.getElementById('loadingIndicator');
// loadingIndicator.style.display = 'block';
// city.readyPromise.then(function () {
// loadingIndicator.style.display = 'none';
// });
}());
public/index.html 0 → 100644
View file @ 40bd40c6
<!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>Montreal 3D Viewer</title>
<!-- The Cesium library. -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"></script>
<link href="./CSS/widgets.css" rel="stylesheet">
<!-- stylesheets -->
<link rel="stylesheet" href="CSS/index.css" media="screen">
<link rel="stylesheet" type="text/css" href="CSS/Montreal3DViewer.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- defining container to keep cesium viewer -->
<div id="cesiumContainer"></div>
<!-- defining menu panel -->
<div class="backdrop" id="menu">
<h2>Montreal 3D Viewer <i class="fa fa-info-circle" style="font-size:15px;color:yellow" onclick="window.open('https://donnees.montreal.ca/ville-de-montreal/batiment-3d-2016-maquette-citygml-lod2-avec-textures2')"> </i></h2>
<span><strong>Select Neighborhood</strong></span>
<div class="nowrap">
<select id="selectscenario">
<option value="Ahuntsic-Cartierville">Ahuntsic-Cartierville</option>
<option value="Anjou">Anjou</option>
<option value="Baie-dUrfé">Baie-d'Urfé</option>
<option value="Beaconsfield">Beaconsfield</option>
<option value="Côte-des-Neiges-Notre-Dame-de-Grâce">Côte-des-Neiges-Notre-Dame-de-Grâce</option>
<option value="Côte-Saint-Luc">Côte-Saint-Luc</option>
<option value="Dollard-des-Ormeaux">Dollard-des-Ormeaux</option>
<option value="Dorval">Dorval</option>
<option value="Hampstead">Hampstead</option>
<option value="Kirkland">Kirkland</option>
<option value="Lachine">Lachine</option>
<option value="LaSalle">LaSalle</option>
<option value="Le-Plateau-Mont-Royal">Le-Plateau-Mont-Royal</option>
<option value="Le-Sud-Ouest">Le-Sud-Ouest</option>
<option value="LÎle-Bizard-Sainte-Geneviève">L'Île-Bizard-Sainte-Geneviève</option>
<option value="LÎle-Dorval">L'Île-Dorval</option>
<option value="Mercier-Hochelaga-Maisonneuve">Mercier-Hochelaga-Maisonneuve</option>
<option value="Montréal-Est">Montréal-Est</option>
<option value="Montréal-Nord">Montréal-Nord</option>
<option value="Montréal-Ouest">Montréal-Ouest</option>
<option value="Mont-Royal">Mont-Royal</option>
<option value="Outremont">Outremont</option>
<option value="Pierrefonds-Roxboro">Pierrefonds-Roxboro</option>
<option value="Pointe-Claire">Pointe-Claire</option>
<option value="Rivière-des-Prairies-Pointe-aux-Trembles">Rivière-des-Prairies-Pointe-aux-Trembles</option>
<option value="Rosemont-La-Petite-Patrie">Rosemont-La-Petite-Patrie</option>
<option value="Sainte-Anne-de-Bellevue">Sainte-Anne-de-Bellevue</option>
<option value="Saint-Laurent">Saint-Laurent</option>
<option value="Saint-Léonard">Saint-Léonard</option>
<option value="Senneville">Senneville</option>
<option value="Verdun">Verdun</option>
<option value="Ville-Marie" selected>Ville-Marie</option>
<option value="Villeray-Saint-Michel-Parc-Extension">Villeray-Saint-Michel-Parc-Extension</option>
<option value="Westmount">Westmount</option>
</select>
</div>
</div>
<div id = "spinner">
<img src="./CSS/Images/loading.gif" />
</div>
<a href = "mailto: rushikesh.padsala@hft-stuttgart.de" target='_blank'>
<div class="credit4"></div>
</a>
<a href="https://steinbeis-3dps.eu/" target='_blank'>
<div class="credit3"></div>
</a>
<a href="https://www.concordia.ca/research/chairs/smart-cities.html" target='_blank'>
<div class="credit2"></div>
</a>
<a href="https://ugl.hft-stuttgart.de/" target='_blank'>
<div class="credit1"></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