Skip to content

GitLab

Commit cf0e6357 authored by Sven Schneider's avatar Sven Schneider
Browse files

made some change requests from Martina regarding text on main page and using... 

made some change requests from Martina regarding text on main page and using the Stoeckach Lod1 instead of OSM Building layer
parent 6588d258
Show whitespace changes
Inline Side-by-side
public/circData.js
View file @ cf0e6357
$(function () { $(function () {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ODI4ZTYyZS1mMTg2LTQ5NGEtYjdiOS02ODg2NzVhNjc0MTAiLCJpZCI6MjkwNCwiaWF0IjoxNTM1MTA5OTAzfQ.kyDX_0ScvJBkYnvXI0DW5NfZbiaRL5ezwtAUhxYnk1Y'; Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ODI4ZTYyZS1mMTg2LTQ5NGEtYjdiOS02ODg2NzVhNjc0MTAiLCJpZCI6MjkwNCwiaWF0IjoxNTM1MTA5OTAzfQ.kyDX_0ScvJBkYnvXI0DW5NfZbiaRL5ezwtAUhxYnk1Y";
var imageryViewModels = []; var imageryViewModels = [];
imageryViewModels.push(new Cesium.ProviderViewModel({ imageryViewModels.push(
name: 'Sentinel-2', new Cesium.ProviderViewModel({
iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/sentinel-2.png'), name: "Sentinel-2",
tooltip: 'Sentinel-2 cloudless.', iconUrl: Cesium.buildModuleUrl(
"Widgets/Images/ImageryProviders/sentinel-2.png"
),
tooltip: "Sentinel-2 cloudless.",
creationFunction: function () { creationFunction: function () {
return new Cesium.IonImageryProvider({ assetId: 3954 }); return new Cesium.IonImageryProvider({ assetId: 3954 });
} },
})); })
);
imageryViewModels.push(new Cesium.ProviderViewModel({ imageryViewModels.push(
name: 'Blue Marble', new Cesium.ProviderViewModel({
iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/blueMarble.png'), name: "Blue Marble",
tooltip: 'Blue Marble Next Generation July, 2004 imagery from NASA.', iconUrl: Cesium.buildModuleUrl(
"Widgets/Images/ImageryProviders/blueMarble.png"
),
tooltip: "Blue Marble Next Generation July, 2004 imagery from NASA.",
creationFunction: function () { creationFunction: function () {
return new Cesium.IonImageryProvider({ assetId: 3845 }); return new Cesium.IonImageryProvider({ assetId: 3845 });
} },
})); })
);
var viewer = new Cesium.Viewer('cesiumContainer', var viewer = new Cesium.Viewer("cesiumContainer", {
{
imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 }), imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 }),
terrainProvider : new Cesium.CesiumTerrainProvider({ terrainProvider: new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(1) url: Cesium.IonResource.fromAssetId(1),
}), }),
scene3DOnly: false, scene3DOnly: false,
shouldAnimate: true, shouldAnimate: true,
...@@ -50,255 +58,361 @@ $(function () { ...@@ -50,255 +58,361 @@ $(function () {
// new Cesium.IonImageryProvider({ assetId: 3954 }) // new Cesium.IonImageryProvider({ assetId: 3954 })
// ); // );
var canvas = viewer.canvas; var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
canvas.addEventListener('click', function() { canvas.addEventListener("click", function () {
canvas.focus(); canvas.focus();
}); });
canvas.focus(); canvas.focus();
var scene = viewer.scene; var scene = viewer.scene;
var osmBuildings = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(96188),
})
);
const buildingHeightOffset = 60; //53
// viewer.scene.globe.depthTestAgainstTerrain = false;
///////////////////// STOECKACH LOD 1 // var osmBuildings = Cesium.createOsmBuildings();
// osmBuildings.readyPromise
// .then(function (osmBuildings) {
// viewer.scene.primitives.add(osmBuildings);
// })
// .otherwise(function (error) {
// console.log(error);
// });
// var stoeckach = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ // osmBuildings.readyPromise.then(function (osmBuildings) {
// url: 'buildingTiles/StoeckachLOD1/tileset.json', // var height = 60;
// show: true // var cartographic = Cesium.Cartographic.fromCartesian(
// })); // osmBuildings.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()
// );
// osmBuildings.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
// });
// stoeckach.readyPromise.then(function (stoeckach) { // viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
// url: Cesium.IonResource.fromAssetId(1)
// })
// var R = 0; // roll const buildingHeightOffset = 60; //53
// 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); // --------------------------------------------------------------------
// }); var relativeHeight = 0.0;
var scale = 1.5
// stoeckach.readyPromise.then(function(stoeckach){ function getEastNorthUpTransform(tileset, relativeHeight) {
// stoeckach.style = new Cesium.Cesium3DTileStyle({ var origin = tileset.boundingSphere.center;
// color: "color('white',0.5)", var cartographic = Cesium.Cartographic.fromCartesian(origin);
// }) cartographic.height = relativeHeight;
// }); origin = Cesium.Cartographic.toCartesian(cartographic);
var enu = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
return enu;
}
function getScaleTransform(tileset, scale, relativeHeight) {
var toGlobal = getEastNorthUpTransform(tileset, relativeHeight);
var toLocal = Cesium.Matrix4.inverse(toGlobal, new Cesium.Matrix4());
var localScale = new Cesium.Cartesian3(scale, scale, scale);
var localScaleMatrix = Cesium.Matrix4.fromScale(localScale);
var transform = Cesium.Matrix4.multiply(toGlobal, Cesium.Matrix4.multiply(localScaleMatrix, toLocal, new Cesium.Matrix4()), new Cesium.Matrix4());
return transform;
}
///////////////////////////// Target //////////////////////////
var target_tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ //////////////////////////////////////////////////////////////////////
url: 'buildingTiles/circularTiles/target_black/tileset.json',
show: true
}));
///////////////////////////// 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) { target_tileset.readyPromise.then(function (target_tileset) {
var R = 0; // roll
var P = 0; // pitch
var Yaw = 0; // yaw
var height = buildingHeightOffset; var height = buildingHeightOffset;
var cartographic = Cesium.Cartographic.fromCartesian(target_tileset.boundingSphere.center); var cartographic = Cesium.Cartographic.fromCartesian(
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); target_tileset.boundingSphere.center
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); );
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); 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); target_tileset.modelMatrix = Cesium.Matrix4.fromTranslation(
translation
);
return zoomAll(target_tileset);
}); });
target_tileset.readyPromise.then(function(target_tileset){ target_tileset.readyPromise.then(function (target_tileset) {
target_tileset.style = new Cesium.Cesium3DTileStyle({ target_tileset.style = new Cesium.Cesium3DTileStyle({
color: "color('black',0.5)", color: "color('black',0.5)",
}) });
}); });
// target_tileset.root.transform = getScaleTransform(target_tileset, scale, relativeHeight);
///////////////////////////// Layer one ////////////////////////// ///////////////////////////// Layer one //////////////////////////
var L1 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ var L1 = viewer.scene.primitives.add(
url: 'buildingTiles/circularTiles/L1_yellow/tileset.json', new Cesium.Cesium3DTileset({
url: "buildingTiles/circularTiles/L1_yellow/tileset.json",
show: true, show: true,
})
})); );
L1.readyPromise.then(function (L1) { L1.readyPromise.then(function (L1) {
return zoomAll(L1); return zoomAll(L1);
}); });
L1.readyPromise.then(function (L1) { L1.readyPromise.then(function (L1) {
var R = 0; // roll var R = 0; // roll
var P = 0; // pitch var P = 0; // pitch
var Yaw = 0; // yaw var Yaw = 0; // yaw
var height = buildingHeightOffset; var height = buildingHeightOffset;
var cartographic = Cesium.Cartographic.fromCartesian(L1.boundingSphere.center); var cartographic = Cesium.Cartographic.fromCartesian(
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); L1.boundingSphere.center
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); );
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); 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 rotMat = new Cesium.Matrix3();
var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(
new Cesium.HeadingPitchRoll(Yaw, P, R)
);
L1.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); L1.modelMatrix = Cesium.Matrix4.fromRotationTranslation(
rotation,
translation
);
return zoomAll(L1); return zoomAll(L1);
}); });
L1.readyPromise.then(function (L1) {
L1.readyPromise.then(function(L1){
L1.style = new Cesium.Cesium3DTileStyle({ L1.style = new Cesium.Cesium3DTileStyle({
color: "color('yellow',1)", color: "color('yellow',1)",
}) });
}); });
///////////////////////////// Layer 2 ////////////////////////// ///////////////////////////// Layer 2 //////////////////////////
var L2 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ var L2 = viewer.scene.primitives.add(
url: 'buildingTiles/circularTiles/L2_red/tileset.json', new Cesium.Cesium3DTileset({
url: "buildingTiles/circularTiles/L2_red/tileset.json",
show: true, show: true,
})
})); );
L2.readyPromise.then(function (L2) { L2.readyPromise.then(function (L2) {
return zoomAll(L2); return zoomAll(L2);
}); });
L2.readyPromise.then(function (L2) { L2.readyPromise.then(function (L2) {
var R = 0; // roll var R = 0; // roll
var P = 0; // pitch var P = 0; // pitch
var Yaw = 0; // yaw var Yaw = 0; // yaw
var height = buildingHeightOffset; var height = buildingHeightOffset;
var cartographic = Cesium.Cartographic.fromCartesian(L2.boundingSphere.center); var cartographic = Cesium.Cartographic.fromCartesian(
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); L2.boundingSphere.center
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); );
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); 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 rotMat = new Cesium.Matrix3();
var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(
new Cesium.HeadingPitchRoll(Yaw, P, R)
);
L2.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); L2.modelMatrix = Cesium.Matrix4.fromRotationTranslation(
rotation,
translation
);
return zoomAll(L2); return zoomAll(L2);
}); });
L2.readyPromise.then(function (L2) {
L2.readyPromise.then(function(L2){
L2.style = new Cesium.Cesium3DTileStyle({ L2.style = new Cesium.Cesium3DTileStyle({
color: "color('red',1)", color: "color('red',1)",
})
}); });
});
///////////////////////////// Layer 3 ////////////////////////// ///////////////////////////// Layer 3 //////////////////////////
var L3 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ var L3 = viewer.scene.primitives.add(
url: 'buildingTiles/circularTiles/L3_green/tileset.json', new Cesium.Cesium3DTileset({
url: "buildingTiles/circularTiles/L3_green/tileset.json",
show: true, show: true,
})
})); );
L3.readyPromise.then(function (L3) { L3.readyPromise.then(function (L3) {
return zoomAll(L3); return zoomAll(L3);
}); });
L3.readyPromise.then(function (L3) { L3.readyPromise.then(function (L3) {
var R = 0; // roll var R = 0; // roll
var P = 0; // pitch var P = 0; // pitch
var Yaw = 0; // yaw var Yaw = 0; // yaw
var height = buildingHeightOffset; var height = buildingHeightOffset;
var cartographic = Cesium.Cartographic.fromCartesian(L3.boundingSphere.center); var cartographic = Cesium.Cartographic.fromCartesian(
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); L3.boundingSphere.center
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); );
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); 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 rotMat = new Cesium.Matrix3();
var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(
new Cesium.HeadingPitchRoll(Yaw, P, R)
);
L3.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); L3.modelMatrix = Cesium.Matrix4.fromRotationTranslation(
rotation,
translation
);
return zoomAll(L3); return zoomAll(L3);
}); });
L3.readyPromise.then(function (L3) {
L3.readyPromise.then(function(L3){
L3.style = new Cesium.Cesium3DTileStyle({ L3.style = new Cesium.Cesium3DTileStyle({
color: "color('green',1)", color: "color('green',1)",
})
}); });
});
///////////////////////////// Layer 3 ////////////////////////// ///////////////////////////// Layer 3 //////////////////////////
var L4 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ var L4 = viewer.scene.primitives.add(
url: 'buildingTiles/circularTiles/L4_brown/tileset.json', new Cesium.Cesium3DTileset({
url: "buildingTiles/circularTiles/L4_brown/tileset.json",
show: true, show: true,
})
})); );
L4.readyPromise.then(function (L4) { L4.readyPromise.then(function (L4) {
return zoomAll(L4); return zoomAll(L4);
}); });
L4.readyPromise.then(function (L4) { L4.readyPromise.then(function (L4) {
var R = 0; // roll var R = 0; // roll
var P = 0; // pitch var P = 0; // pitch
var Yaw = 0; // yaw var Yaw = 0; // yaw
var height = buildingHeightOffset; var height = buildingHeightOffset;
var cartographic = Cesium.Cartographic.fromCartesian(L4.boundingSphere.center); var cartographic = Cesium.Cartographic.fromCartesian(
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); L4.boundingSphere.center
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); );
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); 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 rotMat = new Cesium.Matrix3();
var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(
new Cesium.HeadingPitchRoll(Yaw, P, R)
);
L4.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); L4.modelMatrix = Cesium.Matrix4.fromRotationTranslation(
rotation,
translation
);
return zoomAll(L4); return zoomAll(L4);
}); });
L4.readyPromise.then(function (L4) {
L4.readyPromise.then(function(L4){
L4.style = new Cesium.Cesium3DTileStyle({ L4.style = new Cesium.Cesium3DTileStyle({
color: "color('CORAL',1)", color: "color('CORAL',1)",
})
}); });
});
var camera = viewer.camera; var camera = viewer.camera;
var controller = scene.screenSpaceCameraController; var controller = scene.screenSpaceCameraController;
...@@ -312,38 +426,77 @@ $(function () { ...@@ -312,38 +426,77 @@ $(function () {
var position = Cesium.Cartesian3.fromDegrees(9.190471, 48.786782, 0.0); var position = Cesium.Cartesian3.fromDegrees(9.190471, 48.786782, 0.0);
var speedVector = new Cesium.Cartesian3(); var speedVector = new Cesium.Cartesian3();
var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west'); var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator(
"north",
"west"
);
viewer.scene.globe.enableLighting = true; // set lighting to true viewer.scene.globe.enableLighting = true; // set lighting to true
var zoomAll = function (tileset) { var zoomAll = function (tileset) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
if (!tileset) { reject("Tileset is undifined"); } if (!tileset) {
viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 1500)); reject("Tileset is undifined");
}
viewer.camera.viewBoundingSphere(
tileset.boundingSphere,
new Cesium.HeadingPitchRange(0, -0.5, 1500)
);
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
resolve(); resolve();
}); });
} };
///////////////// STOECKACH LOD 1
// load streamline data from text file and parse it to polyline with multiple colors. var stoeckach = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'buildingTiles/StoeckachLOD1/tileset.json',
show: true
}));
var pos=[]; stoeckach.readyPromise.then(function (stoeckach) {
var cols = [];
var streamID = [];
var height = buildingHeightOffset-1;
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());
// d3.dsv(",", "results/polylines_circularData.csv").then(function(text) { stoeckach.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
d3.dsv(",", "results/Kirchturm1.csv").then(function(text) {
// console.log(text); // Hello, world! });
stoeckach.readyPromise.then(function(stoeckach){
stoeckach.style = new Cesium.Cesium3DTileStyle({
color: "color('white',1)",
})
});
// load streamline data from text file and parse it to polyline with multiple colors.
var pos = [];
var cols = [];
var streamID = [];
// d3.dsv(",", "results/polylines_circularData.csv").then(function(text) {
d3.dsv(",", "results/Kirchturm1.csv").then(function (text) {
// console.log(text); // Hello, world!
// var temp = text.split(','); // var temp = text.split(',');
var temp = text; var temp = text;
for(var i = 0; i < temp.length; i++) { // use i+=7 when parsed as d3.text(...) for (var i = 0; i < temp.length; i++) {
pos.push([parseFloat(text[i].x), parseFloat(text[i].y), parseFloat(text[i].z)]); // use i+=7 when parsed as d3.text(...)
cols.push([parseInt(text[i].R), parseInt(text[i].G), parseInt(text[i].B)]); 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)); streamID.push(parseInt(text[i].ID));
// use these lines if parsed as text. i.e. using d3.text(...) // 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])]); //pos.push([parseFloat(temp[i+0]), parseFloat(temp[i+1]), parseFloat(temp[i+2])]);
...@@ -354,7 +507,7 @@ d3.dsv(",", "results/Kirchturm1.csv").then(function(text) { ...@@ -354,7 +507,7 @@ d3.dsv(",", "results/Kirchturm1.csv").then(function(text) {
// const maxID = streamID.reduce(function(a, b) { // const maxID = streamID.reduce(function(a, b) {
// return Math.max(a, b); // return Math.max(a, b);
// }); // });
const maxID = text[text.length-2].ID; const maxID = text[text.length - 2].ID;
const StreamHeightOffset = 70; //120; const StreamHeightOffset = 70; //120;
//find out the unique ids within the streamID array //find out the unique ids within the streamID array
...@@ -362,21 +515,26 @@ d3.dsv(",", "results/Kirchturm1.csv").then(function(text) { ...@@ -362,21 +515,26 @@ d3.dsv(",", "results/Kirchturm1.csv").then(function(text) {
//get index of each unique id, first element of those //get index of each unique id, first element of those
let sIDidx = []; let sIDidx = [];
for (var i =0; i<=maxID; i++){ for (var i = 0; i <= maxID; i++) {
var tmpIdx = streamID.indexOf(i); var tmpIdx = streamID.indexOf(i);
if (tmpIdx !== -1) if (tmpIdx !== -1) sIDidx.push(tmpIdx);
sIDidx.push(tmpIdx);
} }
for (var line = 1; line < uniqueStreamID.length; line++) {
for (var line=1; line < uniqueStreamID.length; line++){
// Create and draw a polyline with per vertex colors // Create and draw a polyline with per vertex colors
positions = []; positions = [];
colors = []; colors = [];
for (i = sIDidx[line-1]; i < sIDidx[line]-1; ++i) { for (i = sIDidx[line - 1]; i < sIDidx[line] - 1; ++i) {
positions.push(Cesium.Cartesian3.fromDegrees(pos[i][0],pos[i][1],pos[i][2]+StreamHeightOffset)); positions.push(
colors.push(Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 80)); Cesium.Cartesian3.fromDegrees(
pos[i][0],
pos[i][1],
pos[i][2] + StreamHeightOffset
)
);
colors.push(
Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 200)
);
} }
// For per segment coloring, supply the colors option with // For per segment coloring, supply the colors option with
// an array of colors for each vertex. Also set the // an array of colors for each vertex. Also set the
...@@ -396,33 +554,30 @@ d3.dsv(",", "results/Kirchturm1.csv").then(function(text) { ...@@ -396,33 +554,30 @@ d3.dsv(",", "results/Kirchturm1.csv").then(function(text) {
}) })
); );
} }
});
})
// HTML overlay for showing feature name on mouseover // HTML overlay for showing feature name on mouseover
var nameOverlay = document.createElement('div'); var nameOverlay = document.createElement("div");
viewer.container.appendChild(nameOverlay); viewer.container.appendChild(nameOverlay);
nameOverlay.className = 'backdrop'; nameOverlay.className = "backdrop";
nameOverlay.style.display = 'none'; nameOverlay.style.display = "none";
nameOverlay.style.position = 'absolute'; nameOverlay.style.position = "absolute";
nameOverlay.style.bottom = '0'; nameOverlay.style.bottom = "0";
nameOverlay.style.left = '0'; nameOverlay.style.left = "0";
nameOverlay.style['pointer-events'] = 'none'; nameOverlay.style["pointer-events"] = "none";
nameOverlay.style.padding = '4px'; nameOverlay.style.padding = "4px";
nameOverlay.style.backgroundColor = 'green'; nameOverlay.style.backgroundColor = "green";
// Information about the currently selected feature // Information about the currently selected feature
var selected = { var selected = {
feature: undefined, feature: undefined,
originalColor: new Cesium.Color() originalColor: new Cesium.Color(),
}; };
// Information about the currently highlighted feature // Information about the currently highlighted feature
var highlighted = { var highlighted = {
feature: undefined, feature: undefined,
originalColor: new Cesium.Color() originalColor: new Cesium.Color(),
}; };
var selectedEntity = new Cesium.Entity(); var selectedEntity = new Cesium.Entity();
...@@ -438,17 +593,18 @@ d3.dsv(",", "results/Kirchturm1.csv").then(function(text) { ...@@ -438,17 +593,18 @@ d3.dsv(",", "results/Kirchturm1.csv").then(function(text) {
// Pick a new feature // Pick a new feature
var pickedFeature = viewer.scene.pick(movement.endPosition); var pickedFeature = viewer.scene.pick(movement.endPosition);
if (!Cesium.defined(pickedFeature)) { if (!Cesium.defined(pickedFeature)) {
nameOverlay.style.display = 'none'; nameOverlay.style.display = "none";
return; return;
} }
// A feature was picked, so show it's overlay content // A feature was picked, so show it's overlay content
nameOverlay.style.display = 'block'; nameOverlay.style.display = "block";
nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px'; nameOverlay.style.bottom =
nameOverlay.style.left = movement.endPosition.x + 'px'; viewer.canvas.clientHeight - movement.endPosition.y + "px";
var name = pickedFeature.getProperty('name'); nameOverlay.style.left = movement.endPosition.x + "px";
var name = pickedFeature.getProperty("name");
if (!Cesium.defined(name)) { if (!Cesium.defined(name)) {
name = pickedFeature.getProperty('id'); name = pickedFeature.getProperty("id");
} }
nameOverlay.textContent = name; nameOverlay.textContent = name;
...@@ -461,8 +617,10 @@ d3.dsv(",", "results/Kirchturm1.csv").then(function(text) { ...@@ -461,8 +617,10 @@ d3.dsv(",", "results/Kirchturm1.csv").then(function(text) {
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE); }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// Color a feature on selection and show metadata in the InfoBox. // Color a feature on selection and show metadata in the InfoBox.
var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); var clickHandler = viewer.screenSpaceEventHandler.getInputAction(
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { Cesium.ScreenSpaceEventType.LEFT_CLICK
);
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
// If a feature was previously selected, undo the highlight // If a feature was previously selected, undo the highlight
if (Cesium.defined(selected.feature)) { if (Cesium.defined(selected.feature)) {
selected.feature.color = selected.originalColor; selected.feature.color = selected.originalColor;
...@@ -494,28 +652,60 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { ...@@ -494,28 +652,60 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
pickedFeature.color = Cesium.Color.WHITE; pickedFeature.color = Cesium.Color.WHITE;
// Set feature infobox description // Set feature infobox description
var featureName = pickedFeature.getProperty('name'); var featureName = pickedFeature.getProperty("name");
selectedEntity.name = featureName; selectedEntity.name = featureName;
selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>'; selectedEntity.description =
'Loading <div class="cesium-infoBox-loading"></div>';
viewer.selectedEntity = selectedEntity; viewer.selectedEntity = selectedEntity;
selectedEntity.description = '<table class="cesium-infoBox-defaultTable"><tbody>' + selectedEntity.description =
'<tr><th>Bld function</th><td>' + pickedFeature.getProperty('Function') + '</td></tr>' + '<table class="cesium-infoBox-defaultTable"><tbody>' +
'<tr><th>gmlID</th><td>' + pickedFeature.getProperty('gmlIDStr') + '</td></tr>' + "<tr><th>Bld function</th><td>" +
'<tr><th>Dachgeschossausbau</th><td>' + pickedFeature.getProperty('dachgeschossausbau') + '</td></tr>' + pickedFeature.getProperty("Function") +
'<tr><th>Lon</th><td>' + pickedFeature.getProperty('Longitude') + '</td></tr>' + "</td></tr>" +
'<tr><th>Lat</th><td>' + pickedFeature.getProperty('Latitude') + '</td></tr>' + "<tr><th>gmlID</th><td>" +
'<tr><th>Geschossflaeche (sqm)</th><td>' + pickedFeature.getProperty('geschossflaeche') + '</td></tr>' + pickedFeature.getProperty("gmlIDStr") +
'<tr><th>YearOfConstruction</th><td>' + pickedFeature.getProperty('YearOfConstruction') + '</td></tr>' + "</td></tr>" +
'<tr><th>MeasuredHeight (m):</th><td>' + pickedFeature.getProperty('MeasuredHeight') + '</td></tr>' + "<tr><th>Dachgeschossausbau</th><td>" +
'<tr><th>HoeheFirst (m)</th><td>' + pickedFeature.getProperty('hoeheFirst') + '</td></tr>' + pickedFeature.getProperty("dachgeschossausbau") +
'<tr><th>HoeheTrauf (m)</th><td>' + pickedFeature.getProperty('hoeheTrauf') + '</td></tr>' + "</td></tr>" +
'<tr><th>Grundflaeche (sqm)</th><td>' + pickedFeature.getProperty('grundflaeche') + '</td></tr>' + "<tr><th>Lon</th><td>" +
'<tr><th>StoreysAboveGround: </th><td>' + pickedFeature.getProperty('StoreysAboveGround') + '</td></tr>' + pickedFeature.getProperty("Longitude") +
'<tr><th>StoreysBelowGround: </th><td>' + pickedFeature.getProperty('StoreysBelowGround') + '</td></tr>' + "</td></tr>" +
'<tr><th>Durchfahrtsstr.: </th><td>' + pickedFeature.getProperty('ThoroughfareName') + '</td></tr>' + "<tr><th>Lat</th><td>" +
'<tr><th>Hausnummer.: </th><td>' + pickedFeature.getProperty('ThoroughfareNumber') + '</td></tr>' + pickedFeature.getProperty("Latitude") +
'</tbody></table>'; "</td></tr>" +
}, Cesium.ScreenSpaceEventType.LEFT_CLICK); "<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 scene = viewer.scene;
var longitude; var longitude;
...@@ -528,21 +718,20 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { ...@@ -528,21 +718,20 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
var lastPickedObject; var lastPickedObject;
var viewModel = { var viewModel = {
rightClickAction: 'properties', rightClickAction: "properties",
middleClickAction: 'hide' middleClickAction: "hide",
}; };
Cesium.knockout.track(viewModel); Cesium.knockout.track(viewModel);
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) { handler.setInputAction(function (movement) {
// makes camera go to a certain position given by the coordinates below // makes camera go to a certain position given by the coordinates below
var feature = viewer.scene.pick(movement.position); var feature = viewer.scene.pick(movement.position);
if (!Cesium.defined(feature)) { if (!Cesium.defined(feature)) {
console.log("no feature defined") console.log("no feature defined");
return; return;
} }
var propertyNames = feature.getPropertyNames(); var propertyNames = feature.getPropertyNames();
...@@ -556,12 +745,11 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { ...@@ -556,12 +745,11 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
orientation: { orientation: {
heading: Cesium.Math.toRadians(0.0), heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90.0), pitch: Cesium.Math.toRadians(-90.0),
roll: Cesium.Math.toRadians(45.0) roll: Cesium.Math.toRadians(45.0),
}, },
duration: 2 duration: 2,
}); }, Cesium.ScreenSpaceEventType.LEFT_CLICK); });
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function (movement) { handler.setInputAction(function (movement) {
var feature = viewer.scene.pick(movement.position); var feature = viewer.scene.pick(movement.position);
...@@ -569,26 +757,29 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { ...@@ -569,26 +757,29 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
return; return;
} }
var action = viewModel.rightClickAction; var action = viewModel.rightClickAction;
action === 'properties' action === "properties";
printProperties(movement, feature) printProperties(movement, feature);
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK); }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
function printProperties(movement, feature) { function printProperties(movement, feature) {
console.log('Properties:'); console.log("Properties:");
var propertyNames = feature.getPropertyNames(); var propertyNames = feature.getPropertyNames();
var length = propertyNames.length; var length = propertyNames.length;
for (var i = 0; i < length; ++i) { for (var i = 0; i < length; ++i) {
var propertyName = propertyNames[i]; var propertyName = propertyNames[i];
if (propertyName == 'gmlIdALKISLageBezeichnung_1' || if (
propertyName == 'gmlIdALKISLageBezeichnung_2' || propertyName == "gmlIdALKISLageBezeichnung_1" ||
propertyName == 'gmlIdALKISLageBezeichnung_3' || propertyName == "gmlIdALKISLageBezeichnung_2" ||
propertyName == 'gmlIdALKISLageBezeichnung_4' || propertyName == "gmlIdALKISLageBezeichnung_3" ||
propertyName == 'gmlIdALKISLageBezeichnung_5' || propertyName == "gmlIdALKISLageBezeichnung_4" ||
propertyName == 'gmlIdALKISLageBezeichnung_6') propertyName == "gmlIdALKISLageBezeichnung_5" ||
console.log(' ' + propertyName + ': ' + 'zensiert'); propertyName == "gmlIdALKISLageBezeichnung_6"
)
console.log(" " + propertyName + ": " + "zensiert");
else else
console.log(' ' + propertyName + ': ' + feature.getProperty(propertyName)); console.log(
" " + propertyName + ": " + feature.getProperty(propertyName)
);
} }
// Evaluate feature description // Evaluate feature description
...@@ -602,13 +793,11 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { ...@@ -602,13 +793,11 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
} }
var action = viewModel.middleClickAction; var action = viewModel.middleClickAction;
if (action === 'hide') { if (action === "hide") {
feature.show = false; feature.show = false;
} }
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK); }, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
/* /*
return Cesium.when(tileset.readyPromise).then(function (tileset) { return Cesium.when(tileset.readyPromise).then(function (tileset) {
tileset.style = new Cesium.Cesium3DTileStyle({ tileset.style = new Cesium.Cesium3DTileStyle({
...@@ -644,19 +833,19 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { ...@@ -644,19 +833,19 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
}); });
*/ */
function showLegend() { function showLegend() {
$("#legend").css("display", "block"); $("#legend").css("display", "block");
} }
function hideLegend() { function hideLegend() {
$("#legend").css("display", "none"); $("#legend").css("display", "none");
} }
// Legend - Colour Table // Legend - Colour Table
function emptyColourTable() { function emptyColourTable() {
$(".inner").empty(); $(".inner").empty();
} }
/* /*
function setHeightTable() { function setHeightTable() {
$(".inner").append( "<table>" + $(".inner").append( "<table>" +
"<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> 113007 </td></tr>" + "<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> 113007 </td></tr>" +
...@@ -670,7 +859,7 @@ function setHeightTable() { ...@@ -670,7 +859,7 @@ function setHeightTable() {
} }
*/ */
/* /*
function setHeightTable() { function setHeightTable() {
$(".inner").append( "<table>" + $(".inner").append( "<table>" +
"<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> x </td></tr>" + "<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> x </td></tr>" +
...@@ -680,17 +869,18 @@ function setHeightTable() { ...@@ -680,17 +869,18 @@ function setHeightTable() {
} }
*/ */
function setHeightTable() {
function setHeightTable() { $(".inner").append(
$(".inner").append( "<table>" + "<table>" +
"<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> >30 </td></tr>" + "<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='#ff6b21'></td><td> 24 </td></tr>" +
"<tr><td class='outlined' bgcolor='#FFB300'></td><td> 18</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='#BFBF00'></td><td> 12 </td></tr>" +
"<tr><td class='outlined' bgcolor='#0080FF',0)'></td><td> 6 </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>" + "<tr><td class='outlined' bgcolor='#0000FF',0)'></td><td> 0 </td></tr>" +
"</table>" ); "</table>"
} );
}
// return Cesium.when(target_tileset.readyPromise).then(function (target_tileset) { // return Cesium.when(target_tileset.readyPromise).then(function (target_tileset) {
// target_tileset.style = new Cesium.Cesium3DTileStyle({ // target_tileset.style = new Cesium.Cesium3DTileStyle({
...@@ -701,8 +891,6 @@ function setHeightTable() { ...@@ -701,8 +891,6 @@ function setHeightTable() {
// conditions: [ // conditions: [
// ['Number(${MeasuredHeight}) >= 40', 'rgb(255,0,0)'], // ['Number(${MeasuredHeight}) >= 40', 'rgb(255,0,0)'],
// ['Number(${MeasuredHeight}) >= 30.', 'rgb(255, 93 , 0)'], // ['Number(${MeasuredHeight}) >= 30.', 'rgb(255, 93 , 0)'],
...@@ -765,5 +953,4 @@ function setHeightTable() { ...@@ -765,5 +953,4 @@ function setHeightTable() {
}); });
}); */ }); */
}); });
public/circularData.html
View file @ cf0e6357
...@@ -11,14 +11,14 @@ ...@@ -11,14 +11,14 @@
<title>Stuttgart</title> <title>Stuttgart</title>
<link rel="stylesheet" href="css/myCesiumStyle.css"> <link rel="stylesheet" href="css/myCesiumStyle.css">
<link rel="stylesheet" href="css/legend.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"> <link href="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" <script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js" <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"
integrity="sha256-1A78rJEdiWTzco6qdn3igTBv9VupN3Q1ozZNTR4WE/Y=" crossorigin="anonymous"></script> integrity="sha256-1A78rJEdiWTzco6qdn3igTBv9VupN3Q1ozZNTR4WE/Y=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"
integrity="sha256-0rguYS0qgS6L4qVzANq4kjxPLtvnp5nn2nB5G1lWRv4=" crossorigin="anonymous"></script> integrity="sha256-0rguYS0qgS6L4qVzANq4kjxPLtvnp5nn2nB5G1lWRv4=" crossorigin="anonymous"></script>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Cesium.js"></script> <script src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"></script>
<script src="https://d3js.org/d3-dsv.v1.min.js"></script> <script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script src="https://d3js.org/d3-fetch.v1.min.js"></script> <script src="https://d3js.org/d3-fetch.v1.min.js"></script>
......
public/index.html
View file @ cf0e6357
...@@ -266,11 +266,11 @@ ...@@ -266,11 +266,11 @@
<div class="col-md-4"> <div class="col-md-4">
<div class="card mb-4 shadow-sm extension"> <div class="card mb-4 shadow-sm extension">
<h5>Kirchturm Stoeckach </h5> <h5>Wind in Stuttgart, Kernerviertel</h5>
<!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> --> <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
<img class="thumbimg" src="imgs/thumbnails/Kirchturm.JPG" alt=""> <img class="thumbimg" src="imgs/thumbnails/Kirchturm.JPG" alt="">
<div class="card-body"> <div class="card-body">
<p class="card-text">Wind visualization around a church tower in Stoeckach, Stuttgart </p> <p class="card-text">Visualisation of wind around three target buildings (black) near a church with spire and surrounded by numerous building layers (colors). The streamlines results from a Computational Fluid Dynamic simulation of the air flow with RANS (Reynold-Averaged Navier Stokes Equations) and the k-omega SST Turbulence model.</p>
<!-- <small class="text-muted">9 mins</small> --> <!-- <small class="text-muted">9 mins</small> -->
</div> </div>
<div class="d-flex justify-content-between align-items-center btnGroupDiv"> <div class="d-flex justify-content-between align-items-center btnGroupDiv">
...@@ -295,11 +295,11 @@ ...@@ -295,11 +295,11 @@
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<div class="card mb-4 shadow-sm extension"> <div class="card mb-4 shadow-sm extension">
<h5>Kirchturm Stoeckach (Partikel), ver 1</h5> <h5>Wind in Stuttgart, Kernerviertel (Partikel)</h5>
<!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> --> <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
<img class="thumbimg" src="imgs/thumbnails/Kirchturm1.JPG" alt=""> <img class="thumbimg" src="imgs/thumbnails/Kirchturm1.JPG" alt="">
<div class="card-body"> <div class="card-body">
<p class="card-text">Wind visualization with particles around a church tower in Stoeckach, Stuttgart </p> <p class="card-text">Wind visualisation with particles around three target buildings (black) near a church with spire and surrounded by numerous building layers (colors). The streamlines results from a Computational Fluid Dynamic simulation of the air flow with RANS (Reynold-Averaged Navier Stokes Equations) and the k-omega SST Turbulence model.</p>
<!-- <small class="text-muted">9 mins</small> --> <!-- <small class="text-muted">9 mins</small> -->
</div> </div>
<div class="d-flex justify-content-between align-items-center btnGroupDiv"> <div class="d-flex justify-content-between align-items-center btnGroupDiv">
...@@ -313,11 +313,11 @@ ...@@ -313,11 +313,11 @@
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="card mb-4 shadow-sm extension"> <div class="card mb-4 shadow-sm extension">
<h5>Kirchturm Stoeckach Version 2</h5> <h5>Wind in Stuttgart, Kernerviertel (Partikel)</h5>
<!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> --> <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
<img class="thumbimg" src="imgs/thumbnails/Kirchturm2.JPG" alt=""> <img class="thumbimg" src="imgs/thumbnails/Kirchturm2.JPG" alt="">
<div class="card-body"> <div class="card-body">
<p class="card-text">Wind visualization with particles around a church tower in Stoeckach, Stuttgart </p> <p class="card-text">Wind visualisation with particles around three target buildings (black) near a church with spire and surrounded by numerous building layers (colors). The streamlines results from a Computational Fluid Dynamic simulation of the air flow with RANS (Reynold-Averaged Navier Stokes Equations) and the k-omega SST Turbulence model.</p>
<!-- <small class="text-muted">9 mins</small> --> <!-- <small class="text-muted">9 mins</small> -->
</div> </div>
<div class="d-flex justify-content-between align-items-center btnGroupDiv"> <div class="d-flex justify-content-between align-items-center btnGroupDiv">
......
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