Skip to content
GitLab
Commit 70572bae authored by Sven Schneider's avatar Sven Schneider
Browse files

added a working vis and minor updates to design and added a blank publication page

parent 6cbeabea
Pipeline #1649 passed with stages
in 31 seconds
Hide whitespace changes
Inline Side-by-side
public/aoi.html 0 → 100644
View file @ 70572bae
<!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/myCesiumStyle.css">
<link rel="stylesheet" href="css/legend.css">
<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>
</head>
<body>
<header>
<img src="imgs/icity.png" class="titleFigure">
<h2> TP2.4 - Prototyp 4: Webbasierte Visualisierung von CFD Simulationsdaten </h2>
</header>
<script src="aoi.js"></script>
<div id="cesiumContainer" class="pagecesium">
<div id="legend">
<table>
<tr style="height: 30px;vertical-align: top;">
<td colspan="2">Pressure (Pa) </td>
<td></td>
</tr>
<tr>
<td rowspan="1" style="height:100px;text-align:right;"><img src="imgs/colorbarJET.png" height="100" width="20"> </td>
<td>- 113006<p style="margin-top: 78px;"><p> - 112976</td>
</tr>
</table>
</div>
</div>
<footer>
<p align="center">
<h5>Copyright &copy; 2018 - 2020, HFT-Stuttgart. All rights reserved</h5>
</p>
</footer>
</body>
</html>
\ No newline at end of file
public/aoi.js 0 → 100644
View file @ 70572bae
$(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: false,
timeline: false,
navigationHelpButton: true,
navigationInstructionsInitiallyVisible: false,
homeButton: false,
selectionIndicator: true,
geocoder: true,
// imageryProviderViewModels: imageryViewModels
});
// var layer = viewer.imageryLayers.addImageryProvider(
// new Cesium.IonImageryProvider({ assetId: 3 })
// );
var imageryLayer = viewer.imageryLayers.addImageryProvider(
new Cesium.IonImageryProvider({ assetId: 3954 })
);
var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
canvas.addEventListener('click', function() {
canvas.focus();
});
canvas.focus();
var scene = viewer.scene;
// var osmBuildings = viewer.scene.primitives.add(
// new Cesium.Cesium3DTileset({
// url: Cesium.IonResource.fromAssetId(96188),
// })
// );
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'buildingTiles/Aoi/tileset.json',
show: true
}));
tileset.readyPromise.then(function (tileset) {
return zoomAll(tileset);
});
tileset.readyPromise.then(function (tileset) {
var R = 0; // roll
var P = 0; // pitch
var Yaw = 0; // yaw
var height =53;
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());
//var rotMat = new Cesium.Matrix3();
var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R));
tileset.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation);
return zoomAll(tileset);
});
var camera = viewer.camera;
var controller = scene.screenSpaceCameraController;
var r = 0;
var center = new Cesium.Cartesian3();
var hpRoll = new Cesium.HeadingPitchRoll();
var hpRange = new Cesium.HeadingPitchRange();
var speed = 0.1;
var deltaRadians = Cesium.Math.toRadians(3.0);
var position = Cesium.Cartesian3.fromDegrees(9.190471, 48.786782, 0.0);
var speedVector = new Cesium.Cartesian3();
var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');
viewer.scene.globe.enableLighting = true; // set lighting to true
var zoomAll = function (tileset) {
return new Promise(function (resolve, reject) {
if (!tileset) { reject("Tileset is undifined"); }
viewer.camera.viewBoundingSphere(tileset.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>Dachgeschossausbau</th><td>' + pickedFeature.getProperty('dachgeschossausbau') + '</td></tr>' +
'<tr><th>Lon</th><td>' + pickedFeature.getProperty('Longitude') + '</td></tr>' +
'<tr><th>Lat</th><td>' + pickedFeature.getProperty('Latitude') + '</td></tr>' +
'<tr><th>Geschossflaeche (sqm)</th><td>' + pickedFeature.getProperty('geschossflaeche') + '</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>' +
'<tr><th>Durchfahrtsstr.: </th><td>' + pickedFeature.getProperty('ThoroughfareName') + '</td></tr>' +
'<tr><th>Hausnummer.: </th><td>' + pickedFeature.getProperty('ThoroughfareNumber') + '</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) {
var feature = viewer.scene.pick(movement.position);
if (!Cesium.defined(feature)) {
return;
}
var action = viewModel.rightClickAction;
action === 'properties'
printProperties(movement, feature)
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
function printProperties(movement, feature) {
console.log('Properties:');
var propertyNames = feature.getPropertyNames();
var length = propertyNames.length;
for (var i = 0; i < length; ++i) {
var propertyName = propertyNames[i];
if (propertyName == 'gmlIdALKISLageBezeichnung_1' ||
propertyName == 'gmlIdALKISLageBezeichnung_2' ||
propertyName == 'gmlIdALKISLageBezeichnung_3' ||
propertyName == 'gmlIdALKISLageBezeichnung_4' ||
propertyName == 'gmlIdALKISLageBezeichnung_5' ||
propertyName == 'gmlIdALKISLageBezeichnung_6')
console.log(' ' + propertyName + ': ' + 'zensiert');
else
console.log(' ' + propertyName + ': ' + feature.getProperty(propertyName));
}
// Evaluate feature description
//console.log('Description : ' + tileset.style.meta.description.evaluate(scene.frameState, feature));
}
handler.setInputAction(function (movement) {
var feature = viewer.scene.pick(movement.position);
if (!Cesium.defined(feature)) {
return;
}
var action = viewModel.middleClickAction;
if (action === 'hide') {
feature.show = false;
}
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
/*
return Cesium.when(tileset.readyPromise).then(function (tileset) {
tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
["${Latitude} >= 48.8170", "color('purple', 0.5)"],
["${Latitude} >= 48.7950", "color('red')"],
["${Latitude} >= 48.7830", "color('orange')"],
["${Latitude} >= 48.7710", "color('yellow')"],
["${Latitude} >= 48.7690", "color('lime')"],
["${Latitude} >= 48.7570", "color('cyan')"],
["${Latitude} >= 48.7470", "color('CORNFLOWERBLUE')"],
["${Latitude} >= 48.7370", "color('DARKMAGENTA')"],
["true", "color('lightblue')"]
]
}
});
});
*/
function showLegend() {
$("#legend").css("display", "block");
}
function hideLegend() {
$("#legend").css("display", "none");
}
// Legend - Colour Table
function emptyColourTable() {
$(".inner").empty();
}
/*
function setHeightTable() {
$(".inner").append( "<table>" +
"<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> 113007 </td></tr>" +
"<tr><td class='outlined' bgcolor='#ff6b21'></td><td> 113001 </td></tr>" +
"<tr><td class='outlined' bgcolor='#ffb400'></td><td> 112996 </td></tr>" +
"<tr><td class='outlined' bgcolor='yellow'></td><td> 112991</td></tr>" +
"<tr><td class='outlined' bgcolor='#00ff00'></td><td> 112986 </td></tr>" +
"<tr><td class='outlined' bgcolor='cyan'></td><td> 112981 </td></tr>" +
"<tr><td class='outlined' bgcolor='blue'></td><td> 112976 </td></tr>" +
"</table>" );
}
*/
/*
function setHeightTable() {
$(".inner").append( "<table>" +
"<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> x </td></tr>" +
"<tr><td class='outlined' bgcolor='green'></td><td> y </td></tr>" +
"<tr><td class='outlined' bgcolor='blue'></td><td> z </td></tr>" +
"</table>" );
}
*/
function setHeightTable() {
$(".inner").append( "<table>" +
"<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> >30 </td></tr>" +
"<tr><td class='outlined' bgcolor='#ff6b21'></td><td> 24 </td></tr>" +
"<tr><td class='outlined' bgcolor='#FFB300'></td><td> 18</td></tr>" +
"<tr><td class='outlined' bgcolor='#BFBF00'></td><td> 12 </td></tr>" +
"<tr><td class='outlined' bgcolor='#0080FF',0)'></td><td> 6 </td></tr>" +
"<tr><td class='outlined' bgcolor='#0000FF',0)'></td><td> 0 </td></tr>" +
"</table>" );
}
return Cesium.when(tileset.readyPromise).then(function (tileset) {
tileset.style = new Cesium.Cesium3DTileStyle({
color: "color('white',1)",
/*color: {
conditions: [
['Number(${MeasuredHeight}) >= 40', 'rgb(255,0,0)'],
['Number(${MeasuredHeight}) >= 30.', 'rgb(255, 93 , 0)'],
['Number(${MeasuredHeight}) >= 25', 'rgb(255, 180, 0)'],
['Number(${MeasuredHeight}) >= 20', 'rgb(255,255,0)'],
['Number(${MeasuredHeight}) >= 15', 'rgb(0,255,0)'],
['Number(${MeasuredHeight}) >= 10', 'rgb(0,0,255)'],
['Number(${MeasuredHeight}) >= 7.5', 'rgb(75, 0, 130)'],
['Number(${MeasuredHeight}) >= 4', 'rgb(248, 100, 221)'],
['Number(${MeasuredHeight}) >= 0.1', 'rgb(248, 100, 221)'],
['true', 'color("lightblue")']
]
}
*/
});
showLegend();
setHeightTable();
});
/*
return Cesium.when(tileset.readyPromise).then(function (tileset) {
tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
['Number(${YearOfConstruction}) >= 2015', 'rgb(127,201,127)'],
['Number(${YearOfConstruction}) >= 2005', 'rgb(190,174,212)'],
['Number(${YearOfConstruction}) >= 1990', 'rgb(253,192,134)'],
['Number(${YearOfConstruction}) >= 1975', 'rgb(255,255,153)'],
['Number(${YearOfConstruction}) >= 1950', 'rgb(56,108,176)'],
['Number(${YearOfConstruction}) >= 1920', 'rgb(240,2,127)'],
['Number(${YearOfConstruction}) >= 1900', 'rgb(191,91,23)'],
['Number(${YearOfConstruction}) >= 1800', 'rgb(102,102,102)'],
['true', 'color("lightblue")']
]
}
});
}); */
});
\ No newline at end of file
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