Commit 9a755383 authored by Sven Schneider's avatar Sven Schneider
Browse files

added new demo around churchtower in Stoeckach

parent fa3cf353
<!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>
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script src="https://d3js.org/d3-fetch.v1.min.js"></script>
</head>
<body>
<header>
<img src="imgs/icity.png" class="titleFigure">
<h2> TP2.4 - Prototyp 5: Webbasierte Visualisierung von CFD Simulationsdaten </h2>
</header>
<script src="Kirchturm1.js"></script>
<div id="cesiumContainer" class="pagecesium">
<div id="legend">
<table>
<tr style="height: 30px;vertical-align: top;">
<td colspan="2">Wind speed (m/s) </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>- 3.5<p style="margin-top: 78px;">
<p> - 0
</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
$(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: 2 })
);
// 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),
})
);
const buildingHeightOffset = 60; //53
///////////////////// STOECKACH LOD 1
// var stoeckach = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
// url: 'buildingTiles/StoeckachLOD1/tileset.json',
// show: true
// }));
// stoeckach.readyPromise.then(function (stoeckach) {
// var R = 0; // roll
// var P = 0; // pitch
// var Yaw = 0; // yaw
// var height = buildingHeightOffset;
// var cartographic = Cesium.Cartographic.fromCartesian(stoeckach.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));
// stoeckach.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation);
// return zoomAll(stoeckach);
// });
// stoeckach.readyPromise.then(function(stoeckach){
// stoeckach.style = new Cesium.Cesium3DTileStyle({
// color: "color('white',0.5)",
// })
// });
///////////////////////////// Target //////////////////////////
var target_tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'buildingTiles/circularTiles/target_black/tileset.json',
show: true
}));
target_tileset.readyPromise.then(function (target_tileset) {
var R = 0; // roll
var P = 0; // pitch
var Yaw = 0; // yaw
var height = buildingHeightOffset;
var cartographic = Cesium.Cartographic.fromCartesian(target_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));
target_tileset.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation);
return zoomAll(target_tileset);
});
target_tileset.readyPromise.then(function(target_tileset){
target_tileset.style = new Cesium.Cesium3DTileStyle({
color: "color('black',0.5)",
})
});
///////////////////////////// Layer one //////////////////////////
var L1 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'buildingTiles/circularTiles/L1_yellow/tileset.json',
show: true,
}));
L1.readyPromise.then(function (L1) {
return zoomAll(L1);
});
L1.readyPromise.then(function (L1) {
var R = 0; // roll
var P = 0; // pitch
var Yaw = 0; // yaw
var height = buildingHeightOffset;
var cartographic = Cesium.Cartographic.fromCartesian(L1.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));
L1.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation);
return zoomAll(L1);
});
L1.readyPromise.then(function(L1){
L1.style = new Cesium.Cesium3DTileStyle({
color: "color('yellow',1)",
})
});
///////////////////////////// Layer 2 //////////////////////////
var L2 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'buildingTiles/circularTiles/L2_red/tileset.json',
show: true,
}));
L2.readyPromise.then(function (L2) {
return zoomAll(L2);
});
L2.readyPromise.then(function (L2) {
var R = 0; // roll
var P = 0; // pitch
var Yaw = 0; // yaw
var height = buildingHeightOffset;
var cartographic = Cesium.Cartographic.fromCartesian(L2.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));
L2.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation);
return zoomAll(L2);
});
L2.readyPromise.then(function(L2){
L2.style = new Cesium.Cesium3DTileStyle({
color: "color('red',1)",
})
});
///////////////////////////// Layer 3 //////////////////////////
var L3 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'buildingTiles/circularTiles/L3_green/tileset.json',
show: true,
}));
L3.readyPromise.then(function (L3) {
return zoomAll(L3);
});
L3.readyPromise.then(function (L3) {
var R = 0; // roll
var P = 0; // pitch
var Yaw = 0; // yaw
var height = buildingHeightOffset;
var cartographic = Cesium.Cartographic.fromCartesian(L3.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));
L3.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation);
return zoomAll(L3);
});
L3.readyPromise.then(function(L3){
L3.style = new Cesium.Cesium3DTileStyle({
color: "color('green',1)",
})
});
///////////////////////////// Layer 3 //////////////////////////
var L4 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'buildingTiles/circularTiles/L4_brown/tileset.json',
show: true,
}));
L4.readyPromise.then(function (L4) {
return zoomAll(L4);
});
L4.readyPromise.then(function (L4) {
var R = 0; // roll
var P = 0; // pitch
var Yaw = 0; // yaw
var height = buildingHeightOffset;
var cartographic = Cesium.Cartographic.fromCartesian(L4.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));
L4.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation);
return zoomAll(L4);
});
L4.readyPromise.then(function(L4){
L4.style = new Cesium.Cesium3DTileStyle({
color: "color('CORAL',1)",
})
});
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();
});
}
//////////////////////////////////////////
//////////////////////////////////////////
// load streamline data from text file and parse it to polyline with multiple colors.
var pos = [];
var cols = [];
var streamID = [];
var Velocity = [];
var pt_to_pt_dist = [];
var avgVelocity = [];
function get_date_time_dt(deltaTime) {
// deltaTime should be given in SECONDS and is then converted to milliseconds
// set deltaTime to 0 if you want to get current date and time
// set to +60000 to get date and time of 60 seconds = 60000 milliseconds in the future
return (currentdate = new Date(
new Date().getTime() + deltaTime * 1000
).toISOString());
}
d3.dsv(",", "results/Kirchturm1.csv").then(function (text) {
const particleDuration = 90; // units in seconds the particle / point should take to move from start to finish
//define the czml structure
var particle_czml = [
{
id: "document",
name: "CZML Point - Time Dynamic",
version: "1.0",
clock: {
interval: get_date_time_dt(0) + "/" + get_date_time_dt(particleDuration), // This is the time range of our simulation
currentTime: '', // This is the time associated with the start view
currentTime: get_date_time_dt(0),
multiplier: 5,
// range: 'LOOP_STOP',
}
},
{
id: "point",
availability: get_date_time_dt(0) + "/" + get_date_time_dt(particleDuration),
position: {
epoch: get_date_time_dt(0),
cartographicDegrees: [
// use 4 coordinates / values : (t,x,y,z) or rather (t,lon,lat,alt)
],
//"interpolationAlgorithm": "LAGRANGE",
//"interpolationDegree": 1
},
point: {
color: {
rgba: [0, 0, 0, 250],
},
outlineColor: {
rgba: [255, 0, 0, 128],
},
outlineWidth: 1,
pixelSize: 6,
},
},
];
//////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////
let package_time_faktor = 6.0;
// create an array of deep copies of the original czml data structure, to be modified below.
let czmlArr = [];
for (c=0; c < package_time_faktor; c++){
czmlArr.push(JSON.parse(JSON.stringify(particle_czml)));
czmlArr[c][1].id = "point_arr_" + String(c);
}
var temp = text;
for (var i = 0; i < temp.length; i++) {
// use i+=7 when parsed as d3.text(...)
pos.push([
parseFloat(text[i].x),
parseFloat(text[i].y),
parseFloat(text[i].z),
]);
cols.push([
parseInt(text[i].R),
parseInt(text[i].G),
parseInt(text[i].B),
]);
streamID.push(parseInt(text[i].ID));
Velocity.push(parseFloat(text[i].velocity));
avgVelocity.push(parseFloat(text[i].AverageVelocity));
pt_to_pt_dist.push(parseFloat(text[i].pt_to_pt_dist));
// use these lines if parsed as text. i.e. using d3.text(...)
//pos.push([parseFloat(temp[i+0]), parseFloat(temp[i+1]), parseFloat(temp[i+2])]);
//colors.push([parseFloat(temp[i+3]),parseFloat(temp[i+4]),parseFloat(temp[i+5])])
//streamID.push([parseFloat(temp[i+6])]);
}
const maxID = streamID.reduce(function (a, b) {
return Math.max(a, b);
});
//find out the unique ids within the streamID array
const uniqueStreamID = Array.from(new Set(streamID)); // const uniqueStreamID = [...new Set(streamID)]; // same can be done with spread operator
//get index of each unique id, first element of those
let sIDidx = [];
for (var i = 0; i <= maxID; i++) {
var tmpIdx = streamID.indexOf(i);
if (tmpIdx !== -1) sIDidx.push(tmpIdx);
}
/////////////////////////////////////////////////
// Create and draw a polyline with per vertex colors
/////////////////////////////////////////////////
const heightOffset = 70;
for (var line = 0; line < uniqueStreamID.length; line++) {
let positions = [];
let positionsInDegrees = [];
let colors = [];
let individual_particle_velo = [];
let individual_particle_pt_distance = [];
let individual_particle_avg_velo = [];
curr_pos = sIDidx[line];
for (i = curr_pos; i < streamID.length; ++i) {
if (line === streamID[i]){
positions.push(
Cesium.Cartesian3.fromDegrees(
pos[i][0],
pos[i][1],
pos[i][2] + heightOffset
)
);
positionsInDegrees.push([
pos[i][0],
pos[i][1],
pos[i][2] + heightOffset,
]);
colors.push(
Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 180)
);
individual_particle_avg_velo.push(avgVelocity[i]);
individual_particle_pt_distance.push(pt_to_pt_dist[i]);
individual_particle_velo.push(Velocity[i]);
} // if end brace
}
// For per segment coloring, supply the colors option with
// an array of colors for each vertex. Also set the
// colorsPerVertex option to true.
viewer.scene.primitives.add(
new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.PolylineGeometry({
positions: positions,
width: 5.0,
vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
colors: colors,
colorsPerVertex: true,
}),
}),
appearance: new Cesium.PolylineColorAppearance(),
})
);
////////////////////////////////////////////////
// Create and prepare particles for movement
/////////////////////////////////////////////////
let streamDist = individual_particle_pt_distance.reduce(function (a, b) {
return a + b;
}, 0);
// console.log(streamDist);
let t = 0;
let dt = (individual_particle_pt_distance[1] / individual_particle_avg_velo[0]) / 20;
// let dt = streamDist / individual_particle_avg_velo[0] / 500;
/////////////////////////////////////
var temp_pos = [];
for (i = 0; i < positionsInDegrees.length; i++) {
if (i === 0) {
temp_pos.push(
0,
positionsInDegrees[i][0],
positionsInDegrees[i][1],
positionsInDegrees[i][2]
);
} else {
temp_pos.push(
t,
positionsInDegrees[i][0],
positionsInDegrees[i][1],
positionsInDegrees[i][2]
);
dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[0] / 20; // avg_velo is always the same per streamline
// console.log(individual_particle_pt_distance[i] + "/" + individual_particle_avg_velo[i] );
// console.log(dt);
}
t += dt;
}
particle_czml[1].id = "point" + String(line);
particle_czml[1].position.cartographicDegrees = temp_pos;
viewer.dataSources.add(Cesium.CzmlDataSource.load(particle_czml));
////////////////////////////////////////////////
dt = (individual_particle_pt_distance[1] / individual_particle_avg_velo[0]) / 20;
for (c=0; c < czmlArr.length ; c++){
temp_pos = [];