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
Hide 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 = [];
imageryViewModels.push(new Cesium.ProviderViewModel({ var imageryViewModels = [];
name: 'Sentinel-2', imageryViewModels.push(
iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/sentinel-2.png'), new Cesium.ProviderViewModel({
tooltip: 'Sentinel-2 cloudless.', name: "Sentinel-2",
creationFunction: function () { iconUrl: Cesium.buildModuleUrl(
return new Cesium.IonImageryProvider({ assetId: 3954 }); "Widgets/Images/ImageryProviders/sentinel-2.png"
} ),
})); tooltip: "Sentinel-2 cloudless.",
creationFunction: function () {
imageryViewModels.push(new Cesium.ProviderViewModel({ return new Cesium.IonImageryProvider({ assetId: 3954 });
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 }); imageryViewModels.push(
} new Cesium.ProviderViewModel({
})); name: "Blue Marble",
iconUrl: Cesium.buildModuleUrl(
var viewer = new Cesium.Viewer('cesiumContainer', "Widgets/Images/ImageryProviders/blueMarble.png"
{ ),
imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 }), tooltip: "Blue Marble Next Generation July, 2004 imagery from NASA.",
creationFunction: function () {
terrainProvider : new Cesium.CesiumTerrainProvider({ return new Cesium.IonImageryProvider({ assetId: 3845 });
url: Cesium.IonResource.fromAssetId(1) },
}), })
scene3DOnly: false, );
shouldAnimate: true,
animation: true, var viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: true, imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 }),
baseLayerPicker: true,
fullscreenButton: false, terrainProvider: new Cesium.CesiumTerrainProvider({
timeline: false, url: Cesium.IonResource.fromAssetId(1),
navigationHelpButton: true, }),
navigationInstructionsInitiallyVisible: false, scene3DOnly: false,
homeButton: false, shouldAnimate: true,
selectionIndicator: true, animation: true,
geocoder: true, infoBox: true,
// imageryProviderViewModels: imageryViewModels baseLayerPicker: true,
}); fullscreenButton: false,
timeline: false,
var layer = viewer.imageryLayers.addImageryProvider( navigationHelpButton: true,
new Cesium.IonImageryProvider({ assetId: 2 }) navigationInstructionsInitiallyVisible: false,
); homeButton: false,
selectionIndicator: true,
// var imageryLayer = viewer.imageryLayers.addImageryProvider( geocoder: true,
// new Cesium.IonImageryProvider({ assetId: 3954 }) // imageryProviderViewModels: imageryViewModels
// ); });
var layer = viewer.imageryLayers.addImageryProvider(
var canvas = viewer.canvas; new Cesium.IonImageryProvider({ assetId: 2 })
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas );
canvas.addEventListener('click', function() {
canvas.focus(); // var imageryLayer = viewer.imageryLayers.addImageryProvider(
}); // new Cesium.IonImageryProvider({ assetId: 3954 })
canvas.focus(); // );
var scene = viewer.scene;
var canvas = viewer.canvas;
var osmBuildings = viewer.scene.primitives.add( canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
new Cesium.Cesium3DTileset({ canvas.addEventListener("click", function () {
url: Cesium.IonResource.fromAssetId(96188), canvas.focus();
}) });
); canvas.focus();
var scene = viewer.scene;
const buildingHeightOffset = 60; //53
///////////////////// STOECKACH LOD 1 // viewer.scene.globe.depthTestAgainstTerrain = false;
// var stoeckach = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ // var osmBuildings = Cesium.createOsmBuildings();
// url: 'buildingTiles/StoeckachLOD1/tileset.json', // osmBuildings.readyPromise
// show: true // .then(function (osmBuildings) {
// })); // viewer.scene.primitives.add(osmBuildings);
// })
// .otherwise(function (error) {
// console.log(error);
// stoeckach.readyPromise.then(function (stoeckach) { // });
// var R = 0; // roll // osmBuildings.readyPromise.then(function (osmBuildings) {
// var P = 0; // pitch // var height = 60;
// var Yaw = 0; // yaw // var cartographic = Cesium.Cartographic.fromCartesian(
// var height = buildingHeightOffset; // osmBuildings.boundingSphere.center
// var cartographic = Cesium.Cartographic.fromCartesian(stoeckach.boundingSphere.center); // );
// var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); // var surface = Cesium.Cartesian3.fromRadians(
// var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); // cartographic.longitude,
// var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); // cartographic.latitude,
// 0.0
// //var rotMat = new Cesium.Matrix3(); // );
// var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); // var offset = Cesium.Cartesian3.fromRadians(
// cartographic.longitude,
// stoeckach.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); // cartographic.latitude,
// height
// );
// return zoomAll(stoeckach); // var translation = Cesium.Cartesian3.subtract(
// }); // offset,
// surface,
// stoeckach.readyPromise.then(function(stoeckach){ // new Cesium.Cartesian3()
// stoeckach.style = new Cesium.Cesium3DTileStyle({ // );
// color: "color('white',0.5)",
// }) // osmBuildings.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
// });
// });
// viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
///////////////////////////// Target ////////////////////////// // url: Cesium.IonResource.fromAssetId(1)
// })
var target_tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: 'buildingTiles/circularTiles/target_black/tileset.json', const buildingHeightOffset = 60; //53
show: true
}));
// --------------------------------------------------------------------
target_tileset.readyPromise.then(function (target_tileset) { var relativeHeight = 0.0;
var scale = 1.5
var R = 0; // roll
var P = 0; // pitch function getEastNorthUpTransform(tileset, relativeHeight) {
var Yaw = 0; // yaw var origin = tileset.boundingSphere.center;
var height = buildingHeightOffset; var cartographic = Cesium.Cartographic.fromCartesian(origin);
var cartographic = Cesium.Cartographic.fromCartesian(target_tileset.boundingSphere.center); cartographic.height = relativeHeight;
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); origin = Cesium.Cartographic.toCartesian(cartographic);
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); var enu = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); return enu;
}
//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({ function getScaleTransform(tileset, scale, relativeHeight) {
url: 'buildingTiles/circularTiles/L3_green/tileset.json', var toGlobal = getEastNorthUpTransform(tileset, relativeHeight);
show: true, 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;
}
L3.readyPromise.then(function (L3) {
return zoomAll(L3);
});
L3.readyPromise.then(function (L3) {
//////////////////////////////////////////////////////////////////////
///////////////////////////// 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 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()
);
target_tileset.modelMatrix = Cesium.Matrix4.fromTranslation(
translation
);
});
target_tileset.readyPromise.then(function (target_tileset) {
target_tileset.style = new Cesium.Cesium3DTileStyle({
color: "color('black',0.5)",
});
});
// target_tileset.root.transform = getScaleTransform(target_tileset, scale, relativeHeight);
///////////////////////////// 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();
});
};
///////////////// 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(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); var height = buildingHeightOffset-1;
var cartographic = Cesium.Cartographic.fromCartesian(stoeckach.boundingSphere.center);
return zoomAll(L3); 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());
L3.readyPromise.then(function(L3){
L3.style = new Cesium.Cesium3DTileStyle({
color: "color('green',1)",
})
});
///////////////////////////// Layer 3 ////////////////////////// stoeckach.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
var L4 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ });
url: 'buildingTiles/circularTiles/L4_brown/tileset.json',
show: true,
}));
L4.readyPromise.then(function (L4) { stoeckach.readyPromise.then(function(stoeckach){
return zoomAll(L4); 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;
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));
// 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])]);
}
L4.readyPromise.then(function (L4) { // const maxID = streamID.reduce(function(a, b) {
// return Math.max(a, b);
// });
const maxID = text[text.length - 2].ID;
const StreamHeightOffset = 70; //120;
var R = 0; // roll //find out the unique ids within the streamID array
var P = 0; // pitch const uniqueStreamID = [...new Set(streamID)];
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);
});
//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);
}
L4.readyPromise.then(function(L4){ for (var line = 1; line < uniqueStreamID.length; line++) {
L4.style = new Cesium.Cesium3DTileStyle({ // Create and draw a polyline with per vertex colors
color: "color('CORAL',1)", positions = [];
}) colors = [];
}); for (i = sIDidx[line - 1]; i < sIDidx[line] - 1; ++i) {
positions.push(
Cesium.Cartesian3.fromDegrees(
var camera = viewer.camera; pos[i][0],
var controller = scene.screenSpaceCameraController; pos[i][1],
var r = 0; pos[i][2] + StreamHeightOffset
var center = new Cesium.Cartesian3(); )
);
var hpRoll = new Cesium.HeadingPitchRoll(); colors.push(
var hpRange = new Cesium.HeadingPitchRange(); Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 200)
var speed = 0.1; );
var deltaRadians = Cesium.Math.toRadians(3.0); }
// For per segment coloring, supply the colors option with
var position = Cesium.Cartesian3.fromDegrees(9.190471, 48.786782, 0.0); // an array of colors for each vertex. Also set the
var speedVector = new Cesium.Cartesian3(); // colorsPerVertex option to true.
var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west'); viewer.scene.primitives.add(
new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.PolylineGeometry({
viewer.scene.globe.enableLighting = true; // set lighting to true positions: positions,
width: 10.0,
vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
var zoomAll = function (tileset) { colors: colors,
return new Promise(function (resolve, reject) { colorsPerVertex: true,
if (!tileset) { reject("Tileset is undifined"); } }),
viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 1500)); }),
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); appearance: new Cesium.PolylineColorAppearance(),
resolve(); })
}); );
} }
});
// load streamline data from text file and parse it to polyline with multiple colors. // HTML overlay for showing feature name on mouseover
var nameOverlay = document.createElement("div");
var pos=[]; viewer.container.appendChild(nameOverlay);
var cols = []; nameOverlay.className = "backdrop";
var streamID = []; nameOverlay.style.display = "none";
nameOverlay.style.position = "absolute";
// d3.dsv(",", "results/polylines_circularData.csv").then(function(text) { nameOverlay.style.bottom = "0";
d3.dsv(",", "results/Kirchturm1.csv").then(function(text) { nameOverlay.style.left = "0";
// console.log(text); // Hello, world! nameOverlay.style["pointer-events"] = "none";
// var temp = text.split(','); nameOverlay.style.padding = "4px";
nameOverlay.style.backgroundColor = "green";
var temp = text;
for(var i = 0; i < temp.length; i++) { // use i+=7 when parsed as d3.text(...) // Information about the currently selected feature
pos.push([parseFloat(text[i].x), parseFloat(text[i].y), parseFloat(text[i].z)]); var selected = {
cols.push([parseInt(text[i].R), parseInt(text[i].G), parseInt(text[i].B)]); feature: undefined,
streamID.push(parseInt(text[i].ID)); originalColor: new Cesium.Color(),
// 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])]) // Information about the currently highlighted feature
//streamID.push([parseFloat(temp[i+6])]); var highlighted = {
} feature: undefined,
originalColor: new Cesium.Color(),
// const maxID = streamID.reduce(function(a, b) { };
// return Math.max(a, b);
// }); var selectedEntity = new Cesium.Entity();
const maxID = text[text.length-2].ID;
const StreamHeightOffset = 70; //120; // Color a feature yellow on hover.
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
//find out the unique ids within the streamID array // If a feature was previously highlighted, undo the highlight
const uniqueStreamID = [...new Set(streamID)]; if (Cesium.defined(highlighted.feature)) {
highlighted.feature.color = highlighted.originalColor;
//get index of each unique id, first element of those highlighted.feature = undefined;
let sIDidx = []; }
for (var i =0; i<=maxID; i++){
var tmpIdx = streamID.indexOf(i);
if (tmpIdx !== -1)
sIDidx.push(tmpIdx);
}
for (var line=1; line < uniqueStreamID.length; line++){
// Create and draw a polyline with per vertex colors
positions = [];
colors = [];
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));
colors.push(Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 80));
}
// 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: 10.0,
vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
colors: colors,
colorsPerVertex: true,
}),
}),
appearance: new Cesium.PolylineColorAppearance(),
})
);
}
// 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);
// HTML overlay for showing feature name on mouseover // Color a feature on selection and show metadata in the InfoBox.
var nameOverlay = document.createElement('div'); var clickHandler = viewer.screenSpaceEventHandler.getInputAction(
viewer.container.appendChild(nameOverlay); Cesium.ScreenSpaceEventType.LEFT_CLICK
nameOverlay.className = 'backdrop'; );
nameOverlay.style.display = 'none'; viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
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 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;
selected.feature = undefined; selected.feature = undefined;
} }
// Pick a new feature // Pick a new feature
var pickedFeature = viewer.scene.pick(movement.position); var pickedFeature = viewer.scene.pick(movement.position);
if (!Cesium.defined(pickedFeature)) { if (!Cesium.defined(pickedFeature)) {
clickHandler(movement); clickHandler(movement);
return; return;
} }
// Select the feature if it's not already selected // Select the feature if it's not already selected
if (selected.feature === pickedFeature) { if (selected.feature === pickedFeature) {
return; return;
} }
selected.feature = pickedFeature; selected.feature = pickedFeature;
// Save the selected feature's original color // Save the selected feature's original color
if (pickedFeature === highlighted.feature) { if (pickedFeature === highlighted.feature) {
Cesium.Color.clone(highlighted.originalColor, selected.originalColor); Cesium.Color.clone(highlighted.originalColor, selected.originalColor);
highlighted.feature = undefined; highlighted.feature = undefined;
} else { } else {
Cesium.Color.clone(pickedFeature.color, selected.originalColor); Cesium.Color.clone(pickedFeature.color, selected.originalColor);
} }
// Highlight newly selected feature // Highlight newly selected feature
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") +
var scene = viewer.scene; "</td></tr>" +
var longitude; "<tr><th>YearOfConstruction</th><td>" +
var latitude; pickedFeature.getProperty("YearOfConstruction") +
var fid; "</td></tr>" +
var featuretype; "<tr><th>MeasuredHeight (m):</th><td>" +
var gmlid; pickedFeature.getProperty("MeasuredHeight") +
var selID = new Array(); "</td></tr>" +
var cnt = 0; "<tr><th>HoeheFirst (m)</th><td>" +
var lastPickedObject; pickedFeature.getProperty("hoeheFirst") +
"</td></tr>" +
var viewModel = { "<tr><th>HoeheTrauf (m)</th><td>" +
rightClickAction: 'properties', pickedFeature.getProperty("hoeheTrauf") +
middleClickAction: 'hide' "</td></tr>" +
}; "<tr><th>Grundflaeche (sqm)</th><td>" +
pickedFeature.getProperty("grundflaeche") +
Cesium.knockout.track(viewModel); "</td></tr>" +
"<tr><th>StoreysAboveGround: </th><td>" +
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); pickedFeature.getProperty("StoreysAboveGround") +
"</td></tr>" +
"<tr><th>StoreysBelowGround: </th><td>" +
handler.setInputAction(function (movement) { pickedFeature.getProperty("StoreysBelowGround") +
// makes camera go to a certain position given by the coordinates below "</td></tr>" +
"<tr><th>Durchfahrtsstr.: </th><td>" +
var feature = viewer.scene.pick(movement.position); pickedFeature.getProperty("ThoroughfareName") +
if (!Cesium.defined(feature)) { "</td></tr>" +
console.log("no feature defined") "<tr><th>Hausnummer.: </th><td>" +
return; pickedFeature.getProperty("ThoroughfareNumber") +
} "</td></tr>" +
var propertyNames = feature.getPropertyNames(); "</tbody></table>";
var lat = feature.getProperty("Latitude"); }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
var lon = feature.getProperty("Longitude");
var tmp = feature.getProperty("YearOfConstruction"); var scene = viewer.scene;
var longitude;
viewer.camera.flyTo({ var latitude;
destination: Cesium.Cartesian3.fromDegrees(lon, lat, 900), var fid;
maximumHeight: 1500.0, var featuretype;
orientation: { var gmlid;
heading: Cesium.Math.toRadians(0.0), var selID = new Array();
pitch: Cesium.Math.toRadians(-90.0), var cnt = 0;
roll: Cesium.Math.toRadians(45.0) var lastPickedObject;
},
duration: 2 var viewModel = {
}); }, Cesium.ScreenSpaceEventType.LEFT_CLICK); rightClickAction: "properties",
middleClickAction: "hide",
};
handler.setInputAction(function (movement) { Cesium.knockout.track(viewModel);
var feature = viewer.scene.pick(movement.position);
if (!Cesium.defined(feature)) { var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
return;
} handler.setInputAction(function (movement) {
var action = viewModel.rightClickAction; // makes camera go to a certain position given by the coordinates below
action === 'properties'
printProperties(movement, feature) var feature = viewer.scene.pick(movement.position);
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK); if (!Cesium.defined(feature)) {
console.log("no feature defined");
return;
function printProperties(movement, feature) { }
console.log('Properties:'); var propertyNames = feature.getPropertyNames();
var propertyNames = feature.getPropertyNames(); var lat = feature.getProperty("Latitude");
var length = propertyNames.length; var lon = feature.getProperty("Longitude");
for (var i = 0; i < length; ++i) { var tmp = feature.getProperty("YearOfConstruction");
var propertyName = propertyNames[i];
if (propertyName == 'gmlIdALKISLageBezeichnung_1' || viewer.camera.flyTo({
propertyName == 'gmlIdALKISLageBezeichnung_2' || destination: Cesium.Cartesian3.fromDegrees(lon, lat, 900),
propertyName == 'gmlIdALKISLageBezeichnung_3' || maximumHeight: 1500.0,
propertyName == 'gmlIdALKISLageBezeichnung_4' || orientation: {
propertyName == 'gmlIdALKISLageBezeichnung_5' || heading: Cesium.Math.toRadians(0.0),
propertyName == 'gmlIdALKISLageBezeichnung_6') pitch: Cesium.Math.toRadians(-90.0),
console.log(' ' + propertyName + ': ' + 'zensiert'); roll: Cesium.Math.toRadians(45.0),
else },
console.log(' ' + propertyName + ': ' + feature.getProperty(propertyName)); duration: 2,
} });
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 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.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)
);
}
handler.setInputAction(function (movement) { // Evaluate feature description
var feature = viewer.scene.pick(movement.position); //console.log('Description : ' + tileset.style.meta.description.evaluate(scene.frameState, feature));
if (!Cesium.defined(feature)) { }
return;
}
var action = viewModel.middleClickAction; handler.setInputAction(function (movement) {
if (action === 'hide') { var feature = viewer.scene.pick(movement.position);
feature.show = false; if (!Cesium.defined(feature)) {
} return;
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK); }
var action = viewModel.middleClickAction;
if (action === "hide") {
feature.show = false;
}
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
/* /*
return Cesium.when(tileset.readyPromise).then(function (tileset) { return Cesium.when(tileset.readyPromise).then(function (tileset) {
...@@ -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,60 +869,59 @@ function setHeightTable() { ...@@ -680,60 +869,59 @@ function setHeightTable() {
} }
*/ */
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>"
);
}
function setHeightTable() { // return Cesium.when(target_tileset.readyPromise).then(function (target_tileset) {
$(".inner").append( "<table>" + // target_tileset.style = new Cesium.Cesium3DTileStyle({
"<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(target_tileset.readyPromise).then(function (target_tileset) {
// target_tileset.style = new Cesium.Cesium3DTileStyle({
// color: "color('black',1)", // color: "color('black',1)",
// /*color: {
// conditions: [ // /*color: {
// ['Number(${MeasuredHeight}) >= 40', 'rgb(255,0,0)'], // conditions: [
// ['Number(${MeasuredHeight}) >= 30.', 'rgb(255, 93 , 0)'], // ['Number(${MeasuredHeight}) >= 40', 'rgb(255,0,0)'],
// ['Number(${MeasuredHeight}) >= 25', 'rgb(255, 180, 0)'], // ['Number(${MeasuredHeight}) >= 30.', 'rgb(255, 93 , 0)'],
// ['Number(${MeasuredHeight}) >= 20', 'rgb(255,255,0)'], // ['Number(${MeasuredHeight}) >= 25', 'rgb(255, 180, 0)'],
// ['Number(${MeasuredHeight}) >= 15', 'rgb(0,255,0)'], // ['Number(${MeasuredHeight}) >= 20', 'rgb(255,255,0)'],
// ['Number(${MeasuredHeight}) >= 10', 'rgb(0,0,255)'], // ['Number(${MeasuredHeight}) >= 15', 'rgb(0,255,0)'],
// ['Number(${MeasuredHeight}) >= 7.5', 'rgb(75, 0, 130)'], // ['Number(${MeasuredHeight}) >= 10', 'rgb(0,0,255)'],
// ['Number(${MeasuredHeight}) >= 4', 'rgb(248, 100, 221)'], // ['Number(${MeasuredHeight}) >= 7.5', 'rgb(75, 0, 130)'],
// ['Number(${MeasuredHeight}) >= 0.1', 'rgb(248, 100, 221)'], // ['Number(${MeasuredHeight}) >= 4', 'rgb(248, 100, 221)'],
// ['true', 'color("lightblue")'] // ['Number(${MeasuredHeight}) >= 0.1', 'rgb(248, 100, 221)'],
// ] // ['true', 'color("lightblue")']
// } // ]
// */
// }); // }
// showLegend(); // */
// setHeightTable();
// });
/* // });
// showLegend();
// setHeightTable();
// });
/*
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({
...@@ -765,5 +953,4 @@ function setHeightTable() { ...@@ -765,5 +953,4 @@ function setHeightTable() {
}); });
}); */ }); */
});
});
\ No newline at end of file
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