Commit f07627f1 authored by Sven Schneider's avatar Sven Schneider

first commit of homepage

parent e87d6b17
Pipeline #1033 failed with stages
in 10 seconds

Too many changes to show.

To preserve performance only 1000 of 1000+ files are displayed.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Stuttgart</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/cinergy.css">
<link rel="stylesheet" href="jsq/Cesium/Widgets/widgets.css">
<link rel="stylesheet" href="css/legend.css">
<link rel="stylesheet" href="css/toolbar.css">
<!-- <link rel="stylesheet" href="css/CesiumSandcastle.css"> -->
<script src="jsq/jquery-2.2.3.min.js"></script>
<script src="jsq/jquery.cookie-1.3.1.js"></script>
<script src="jsq/modernizr-2.6.2.min.js"></script>
<script src="jsq/Cesium/Cesium.js"></script>
</head>
<body>
<header>
<h1> <img src="imgs/icity.png" style="height:12%;width:8%;"> i_City </h1>
<h2> TP2.4 - Prototyp 2: Webbasierte Visualisierung von CFD Simulationsdaten </h2>
</header>
<div id="wrapper">
<script src="jsq/stoeckachTimeDynPC.js"></script>
<div id="cesiumContainer" class="pagecesium">
<!--
<div id="toolbar" >
<table class="infoPanel">
<tbody>
<tr>
<td>Click on the 3D window then use the keyboard to change settings.</td>
</tr>
<tr>
<td>Heading: <span id="heading"></span>°</td>
</tr>
<tr>
<td>← to left/→ to right</td>
</tr>
<tr>
<td>Pitch: <span id="pitch"></span>°</td>
</tr>
<tr>
<td>↑ to up/↓ to down</td>
</tr>
<tr>
<td>roll: <span id="roll"></span>°</td>
</tr>
<tr>
<td>← + ⇧ left/→ + ⇧ right</td>
</tr>
<tr>
<td>Speed: <span id="speed"></span>m/s</td>
</tr>
<tr>
<td>↑ + ⇧ to speed up/↓ + ⇧ to speed down</td>
</tr>
</tbody>
</table>
</div>
<div id="legend">
<p>Measured Building Height</p>
<div class="inner"></div>
</div>
-->
</div>
<!-- LEGEND -->
<p align="center"><h5>Copyright &copy; 2018 hft-stuttgart. all rights reserved</h5></p>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Window Detection Demo</title>
<link rel="stylesheet" href="css/myCesiumStyle.css">
<link rel="stylesheet" href="css/legend.css">
<link rel="stylesheet" href="css/index.css" media="screen">
<link rel="stylesheet" href="css/form_joeStyle.css" media="screen">
<link href="https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"
integrity="sha256-1A78rJEdiWTzco6qdn3igTBv9VupN3Q1ozZNTR4WE/Y=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"
integrity="sha256-0rguYS0qgS6L4qVzANq4kjxPLtvnp5nn2nB5G1lWRv4=" crossorigin="anonymous"></script>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>
<header>
<h1> <img src="imgs/LogoSimstadt.png" style="height:12%;width:8%;"> Essen 3D Tiles with Building PointCloud Demo</h1>
</header>
<div id="cesiumContainer"></div>
<script src="EssenPC.js"></script>
<h4 onclick="open3DCMO()" style="cursor:pointer; color:rgb(030, 128, 15)">
<strong><i class="fas fa-copy"></i> PointCloud Layers Menu</strong>
</h4>
<div class="backdrop mainbackdrop" id="DCMO" style="display:none">
<strong>Window corner pts &emsp; </strong>
<button class="myButtonGreen" type="button" onclick="TurnOnPCWindows()">On</button>
<button class="myButtonRed" type="button" onclick="TurnOffPCWindows()">Off</button>
<br>
<br>
<strong>PointCloud <span class="mytab"> &nbsp; &nbsp; &emsp; </span></strong>
<button class="myButtonGreen" type="button" onclick="TurnOnPC()">On</button>
<button class="myButtonRed" type="button" onclick="TurnOffPC()">Off</button>
<br>
<br>
<strong>Hull <span class="mytab"> &nbsp; &nbsp; </span><span class="mytab"> &nbsp; &nbsp; &emsp; </span></strong>
<button class="myButtonGreen" type="button" onclick="TurnOnPCHull()">On</button>
<button class="myButtonRed" type="button" onclick="TurnOffPCHull()">Off</button>
<br>
<br>
<strong>Buildings 3DTiles &nbsp; &emsp; </strong>
<button class="myButtonGreen" type="button" onclick="TurnOnEssen3dT()">On</button>
<button class="myButtonRed" type="button" onclick="TurnOffEssen3dT()">Off</button>
<br>
<br>
</div>
<script src="TopMenuManagement.js"></script>
</body>
</html>
\ No newline at end of file
//$(function () {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ODI4ZTYyZS1mMTg2LTQ5NGEtYjdiOS02ODg2NzVhNjc0MTAiLCJpZCI6MjkwNCwiaWF0IjoxNTM1MTA5OTAzfQ.kyDX_0ScvJBkYnvXI0DW5NfZbiaRL5ezwtAUhxYnk1Y';
var imageryViewModels = [];
imageryViewModels.push(new Cesium.ProviderViewModel({
name: 'Sentinel-2',
iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/sentinel-2.png'),
tooltip: 'Sentinel-2 cloudless.',
creationFunction: function () {
return new Cesium.IonImageryProvider({ assetId: 3954 });
}
}));
imageryViewModels.push(new Cesium.ProviderViewModel({
name: 'Blue Marble',
iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/blueMarble.png'),
tooltip: 'Blue Marble Next Generation July, 2004 imagery from NASA.',
creationFunction: function () {
return new Cesium.IonImageryProvider({ assetId: 3845 });
}
}));
var viewer = new Cesium.Viewer('cesiumContainer',
{
imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 }),
terrainProvider : new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(1)
}),
scene3DOnly: false,
shouldAnimate: true,
animation: true,
infoBox: true,
baseLayerPicker: true,
fullscreenButton: true,
timeline: false,
navigationHelpButton: true,
navigationInstructionsInitiallyVisible: false,
homeButton: false,
selectionIndicator: true,
geocoder: true,
// imageryProviderViewModels: imageryViewModels
});
var imageryLayer = viewer.imageryLayers.addImageryProvider(
new Cesium.IonImageryProvider({ assetId: 3954 })
);
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'buildingTiles/Essen/tileset.json',
show: true
}));
tileset.readyPromise.then(function (tileset){
// set tileset height
var height = 49;
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);
return zoomAll(tileset);
});
tileset.style = new Cesium.Cesium3DTileStyle({
color: 'color("darkgray")' });
//////////////////////////////////////////////////////////////////
var pointCloud = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'results/EssenPointCloud/tileset.json',
show: true
}));
pointCloud.readyPromise.then(function (pointCloud) {
var height = -119;
var cartographic = Cesium.Cartographic.fromCartesian(pointCloud.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());
pointCloud.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
return zoomAll(pointCloud);
});
//pointCloud.style = new Cesium.Cesium3DTileStyle({
// color: "color('gray')" });
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var pcHull = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'results/EssenPCHull/tileset.json',
show: true
}));
pcHull.readyPromise.then(function (pcHull) {
var height = -118.3;
var cartographic = Cesium.Cartographic.fromCartesian(pcHull.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());
//var v = [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, translation["x"], translation["y"],translation["z"], 1.0];
pcHull.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
return zoomAll(pcHull);
});
pcHull.style = new Cesium.Cesium3DTileStyle({
color: "color('yellow')",
pointSize: 2
});
////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////
var pcBBox = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'results/EssenPCBbox/tileset.json',
maximumScreenSpaceError: 2 ,
show: false
}));
pcBBox.readyPromise.then(function (pcBBoxl) {
var height = -118.3;
var cartographic = Cesium.Cartographic.fromCartesian(pcBBox.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());
pcbBBox.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
return zoomAll(pcBBox);
});
pcBBox.style = new Cesium.Cesium3DTileStyle({
color: "color('red')" });
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var pcWindows = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'results/EssenPCWindows/tileset.json',
maximumScreenSpaceError: 2 ,
show: true
}));
pcWindows.readyPromise.then(function (pcWindows) {
var height = -118.3;
var cartographic = Cesium.Cartographic.fromCartesian(pcWindows.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());
//var v = [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, translation["x"], translation["y"],translation["z"], 1.0];
pcWindows.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
return zoomAll(pcWindows);
});
pcWindows.style = new Cesium.Cesium3DTileStyle({
color: "color('red')" ,
pointSize: 3
});
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////
var TurnOnPC = function () {
pointCloud.show = true;
}
var TurnOffPC = function () {
pointCloud.show = false;
}
///////////////////////////////////////////////////////
var TurnOnPCHull = function () {
pcHull.show = true;
}
var TurnOffPCHull = function () {
pcHull.show = false;
}
///////////////////////////////////////////////////////
var TurnOnPCWindows = function () {
pcWindows.show = true;
}
var TurnOffPCWindows = function () {
pcWindows.show = false;
}
///////////////////////////////////////////////////////
///////////////////////////////////////////////////////
var TurnOnEssen3dT = function () {
tileset.show = true;
}
var TurnOffEssen3dT = function () {
tileset.show = false;
}
//////////////////////////////////////////////////////
/*
var terrainProvider = new new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(1), requestVertexNormals: true );
viewer.terrainProvider = terrainProvider;
*/
/*
var terrainProvider = new Cesium.CesiumTerrainProvider({
url: 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
requestWaterMask: true, // required for water effects
requestVertexNormals: true // required for terrain lighting
});
viewer.terrainProvider = terrainProvider;
*/
viewer.scene.globe.enableLighting = true; // set lighting to true
var zoomAll = function (pointCloud) {
return new Promise(function (resolve, reject) {
if (!pointCloud) { reject("Tileset is undifined"); }
viewer.camera.viewBoundingSphere(pointCloud.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 1500));
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
resolve();
});
}
// HTML overlay for showing feature name on mouseover
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 = 'green';
// Information about the currently selected feature
var selected = {
feature: undefined,
originalColor: new Cesium.Color()
};
// Information about the currently highlighted feature
var highlighted = {
feature: undefined,
originalColor: new Cesium.Color()
};
var selectedEntity = new Cesium.Entity();
// Color a feature yellow on hover.
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
// 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 pickedFeature = viewer.scene.pick(movement.endPosition);
if (!Cesium.defined(pickedFeature)) {
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 = pickedFeature.getProperty('name');
if (!Cesium.defined(name)) {
name = pickedFeature.getProperty('id');
}
nameOverlay.textContent = name;
// Highlight the feature if it's not already selected.
if (pickedFeature !== selected.feature) {
highlighted.feature = pickedFeature;
Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
pickedFeature.color = Cesium.Color.AQUA;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// Color a feature on selection and show metadata in the InfoBox.
var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
// If a feature was previously selected, undo the highlight
if (Cesium.defined(selected.feature)) {
selected.feature.color = selected.originalColor;
selected.feature = undefined;
}
// Pick a new feature
var pickedFeature = viewer.scene.pick(movement.position);
if (!Cesium.defined(pickedFeature)) {
clickHandler(movement);
return;
}
// Select the feature if it's not already selected
if (selected.feature === pickedFeature) {
return;
}
selected.feature = pickedFeature;
// Save the selected feature's original color
if (pickedFeature === highlighted.feature) {
Cesium.Color.clone(highlighted.originalColor, selected.originalColor);
highlighted.feature = undefined;
} else {
Cesium.Color.clone(pickedFeature.color, selected.originalColor);
}
// Highlight newly selected feature
pickedFeature.color = Cesium.Color.WHITE;
// Set feature infobox description
var featureName = pickedFeature.getProperty('name');
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>Bld function</th><td>' + pickedFeature.getProperty('Function') + '</td></tr>' +
'<tr><th>gmlID</th><td>' + pickedFeature.getProperty('gmlIDStr') + '</td></tr>' +
'<tr><th>AbsoluteHoehe (m)</th><td>' + pickedFeature.getProperty('AbsoluteHoehe') + '</td></tr>' +
'<tr><th>Lon</th><td>' + pickedFeature.getProperty('Longitude') + '</td></tr>' +
'<tr><th>Lat</th><td>' + pickedFeature.getProperty('Latitude') + '</td></tr>' +
'<tr><th>GebaeudeHoehe (m)</th><td>' + pickedFeature.getProperty('GebaeudeHoehe') + '</td></tr>' +
'<tr><th>YearOfConstruction</th><td>' + pickedFeature.getProperty('YearOfConstruction') + '</td></tr>' +
'<tr><th>MeasuredHeight (m):</th><td>' + pickedFeature.getProperty('MeasuredHeight') + '</td></tr>' +
'<tr><th>HoeheFirst (m)</th><td>' + pickedFeature.getProperty('hoeheFirst') + '</td></tr>' +
'<tr><th>HoeheTrauf (m)</th><td>' + pickedFeature.getProperty('hoeheTrauf') + '</td></tr>' +
'<tr><th>Grundflaeche (sqm)</th><td>' + pickedFeature.getProperty('grundflaeche') + '</td></tr>' +
'<tr><th>StoreysAboveGround: </th><td>' + pickedFeature.getProperty('StoreysAboveGround') + '</td></tr>' +
'<tr><th>StoreysBelowGround: </th><td>' + pickedFeature.getProperty('StoreysBelowGround') + '</td></tr>' +
'</tbody></table>';
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
var scene = viewer.scene;
var longitude;
var latitude;
var fid;
var featuretype;
var gmlid;
var selID = new Array();
var cnt = 0;
var lastPickedObject;
var viewModel = {
rightClickAction: 'properties',
middleClickAction: 'hide'
};
Cesium.knockout.track(viewModel);
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
// makes camera go to a certain position given by the coordinates below
var feature = viewer.scene.pick(movement.position);
if (!Cesium.defined(feature)) {
console.log("no feature defined")
return;
}
var propertyNames = feature.getPropertyNames();
var lat = feature.getProperty("Latitude");
var lon = feature.getProperty("Longitude");
var tmp = feature.getProperty("YearOfConstruction");
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(lon, lat, 900),
maximumHeight: 1500.0,
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90.0),
roll: Cesium.Math.toRadians(45.0)
},
duration: 2
}); }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function (movement) {