Skip to content

GitLab

Commit 90a33317 authored by Sven Schneider's avatar Sven Schneider
Browse files

added new background image

parent 2327af12
Pipeline #3846 passed with stages
in 49 seconds
Hide whitespace changes
Inline Side-by-side
public/css/main.css
View file @ 90a33317
...@@ -11,6 +11,15 @@ ...@@ -11,6 +11,15 @@
} }
} }
.hftBackground {
background-image: url(../imgs/background_blur_bright.jpg);
background-size: cover;
background-blend-mode: normal;
opacity: 1;
}
.jumbotron p:last-child { .jumbotron p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
......
public/index.html
View file @ 90a33317
...@@ -77,17 +77,16 @@ ...@@ -77,17 +77,16 @@
</header> </header>
<main role="main"> <main role="main">
<section class="jumbotron text-center" style="padding-top: 96px"> <section class="jumbotron text-center hftBackground" style="padding-top: 96px; border-radius: 0;">
<div class="container"> <div class="container">
<!-- <h1>A platform for urban CFD</h1> --> <!-- <h1>A platform for urban CFD</h1> -->
<img src="imgs/wind-solid.svg" class="windSVG" width="100px" alt="wind" /> <img src="imgs/wind-solid.svg" class="windSVG" width="100px" alt="wind" />
<h1>Urban Visualization Platform</h1> <h1 style="font-weight: 800;">Urban Visualization Platform</h1>
<p class="lead text-muted"> <p style="font-weight: 700;" class="lead">
On this platform an overview of different visualizations for a A platform for visualizing urban data in 3D
variety of (3D) data is provided.
</p> </p>
<p> <p style="font-weight: 500;">
The examples shown here were mainly created during the iCity The examples shown here were mainly created during the iCity
research projects at HFT Stuttgart (University of Applied Sciences research projects at HFT Stuttgart (University of Applied Sciences
Stuttgart). Stuttgart).
...@@ -488,7 +487,7 @@ ...@@ -488,7 +487,7 @@
</p> </p>
<p> <p>
urbanVIS is &copy; by Sven Schneider and colaborators at HFT urbanVIS is &copy; by Sven Schneider and colaborators at HFT
Stuttgart, <span id="year"></span>. Stuttgart, 2017 - <span id="year"></span>.
</p> </p>
</div> </div>
<div class="container"> <div class="container">
......
public/polylines_with_particles_backup.js deleted 100644 → 0
View file @ 2327af12
$(function () {
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ODI4ZTYyZS1mMTg2LTQ5NGEtYjdiOS02ODg2NzVhNjc0MTAiLCJpZCI6MjkwNCwiaWF0IjoxNTM1MTA5OTAzfQ.kyDX_0ScvJBkYnvXI0DW5NfZbiaRL5ezwtAUhxYnk1Y";
var imageryViewModels = [];
imageryViewModels.push(
new Cesium.ProviderViewModel({
name: "Sentinel-2",
iconUrl: Cesium.buildModuleUrl(
"Widgets/Images/ImageryProviders/sentinel-2.png"
),
tooltip: "Sentinel-2 cloudless.",
creationFunction: function () {
return new Cesium.IonImageryProvider({ assetId: 3954 });
},
})
);
imageryViewModels.push(
new Cesium.ProviderViewModel({
name: "Blue Marble",
iconUrl: Cesium.buildModuleUrl(
"Widgets/Images/ImageryProviders/blueMarble.png"
),
tooltip: "Blue Marble Next Generation July, 2004 imagery from NASA.",
creationFunction: function () {
return new Cesium.IonImageryProvider({ assetId: 3845 });
},
})
);
var viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 }),
terrainProvider: new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(1),
}),
scene3DOnly: false,
shouldAnimate: true,
animation: true,
infoBox: true,
baseLayerPicker: true,
fullscreenButton: false,
timeline: false,
navigationHelpButton: true,
navigationInstructionsInitiallyVisible: false,
homeButton: false,
selectionIndicator: true,
geocoder: true,
// imageryProviderViewModels: imageryViewModels
});
// var layer = viewer.imageryLayers.addImageryProvider(
// new Cesium.IonImageryProvider({ assetId: 3 })
// );
var imageryLayer = viewer.imageryLayers.addImageryProvider(
new Cesium.IonImageryProvider({ assetId: 3954 })
);
var canvas = viewer.canvas;
canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
canvas.addEventListener("click", function () {
canvas.focus();
});
canvas.focus();
var scene = viewer.scene;
var tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: "buildingTiles/StoeckachLOD1/tileset.json",
show: true,
})
);
tileset.readyPromise.then(function (tileset) {
return zoomAll(tileset);
});
tileset.readyPromise.then(function (tileset) {
var R = 0; // roll
var P = 0; // pitch
var Yaw = 0; // yaw
var height = 53;
var cartographic = Cesium.Cartographic.fromCartesian(
tileset.boundingSphere.center
);
var surface = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
0.0
);
var offset = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
height
);
var translation = Cesium.Cartesian3.subtract(
offset,
surface,
new Cesium.Cartesian3()
);
//var rotMat = new Cesium.Matrix3();
var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(
new Cesium.HeadingPitchRoll(Yaw, P, R)
);
tileset.modelMatrix = Cesium.Matrix4.fromRotationTranslation(
rotation,
translation
);
return zoomAll(tileset);
});
viewer.scene.globe.enableLighting = true; // set lighting to true
var zoomAll = function (tileset) {
return new Promise(function (resolve, reject) {
if (!tileset) {
reject("Tileset is undifined");
}
viewer.camera.viewBoundingSphere(
tileset.boundingSphere,
new Cesium.HeadingPitchRange(0, -0.5, 1500)
);
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
resolve();
});
};
//////////////////////////////////////////
// load streamline data from text file and parse it to polyline with multiple colors.
var pos = [];
var cols = [];
var streamID = [];
var Velocity = [];
var pt_to_pt_dist = [];
var avgVelocity = [];
var czmlArray = [];
function get_date_time_dt(deltaTime) {
// deltaTime should be given in SECONDS and is then converted to milliseconds
// set deltaTime to 0 if you want to get current date and time
// set to +60000 to get date and time of 60 seconds = 60000 milliseconds in the future
return (currentdate = new Date(
new Date().getTime() + deltaTime * 1000
).toISOString());
}
d3.dsv(",", "results/polylines_with_velocity.csv").then(function (text) {
const particleDuration = 90; // units in seconds the particle / point should take to move from start to finish
//define the czml structure
var particle_czml = [
{
id: "document",
name: "CZML Point - Time Dynamic",
version: "1.0",
},
{
id: "point",
availability:
get_date_time_dt(0) + "/" + get_date_time_dt(particleDuration),
position: {
epoch: get_date_time_dt(0),
cartographicDegrees: [
// use 4 coordinates / values : (t,x,y,z) or rather (t,lon,lat,alt)
],
},
point: {
color: {
rgba: [0, 0, 0, 250],
},
outlineColor: {
rgba: [255, 0, 0, 128],
},
outlineWidth: 1,
pixelSize: 6,
},
},
];
var temp = text;
for (var i = 0; i < temp.length; i++) {
// use i+=7 when parsed as d3.text(...)
pos.push([
parseFloat(text[i].Lon),
parseFloat(text[i].Lat),
parseFloat(text[i].z),
]);
cols.push([
parseInt(text[i].R),
parseInt(text[i].G),
parseInt(text[i].B),
]);
streamID.push(parseInt(text[i].ID));
Velocity.push(parseFloat(text[i].velocity));
avgVelocity.push(parseFloat(text[i].AverageVelocity));
pt_to_pt_dist.push(parseFloat(text[i].pt_to_pt_dist));
// use these lines if parsed as text. i.e. using d3.text(...)
//pos.push([parseFloat(temp[i+0]), parseFloat(temp[i+1]), parseFloat(temp[i+2])]);
//colors.push([parseFloat(temp[i+3]),parseFloat(temp[i+4]),parseFloat(temp[i+5])])
//streamID.push([parseFloat(temp[i+6])]);
}
const maxID = streamID.reduce(function (a, b) {
return Math.max(a, b);
});
//find out the unique ids within the streamID array
const uniqueStreamID = Array.from(new Set(streamID)); // const uniqueStreamID = [...new Set(streamID)]; // same can be done with spread operator
//get index of each unique id, first element of those
let sIDidx = [];
for (var i = 0; i <= maxID; i++) {
var tmpIdx = streamID.indexOf(i);
if (tmpIdx !== -1) sIDidx.push(tmpIdx);
}
/////////////////////////////////////////////////
// Create and draw a polyline with per vertex colors
/////////////////////////////////////////////////
const heightOffset = 120;
for (var line = 0; line < uniqueStreamID.length; line++) {
let positions = [];
let positionsInDegrees = [];
let colors = [];
let individual_particle_velo = [];
let individual_particle_pt_distance = [];
let individual_particle_avg_velo = [];
for (i = sIDidx[line - 1]; i < sIDidx[line] - 1; ++i) {
positions.push(
Cesium.Cartesian3.fromDegrees(
pos[i][0],
pos[i][1],
pos[i][2] + heightOffset
)
);
positionsInDegrees.push([
pos[i][0],
pos[i][1],
pos[i][2] + heightOffset,
]);
colors.push(
Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 180)
);
individual_particle_avg_velo.push(avgVelocity[i]);
individual_particle_pt_distance.push(pt_to_pt_dist[i]);
individual_particle_velo.push(Velocity[i]);
}
// For per segment coloring, supply the colors option with
// an array of colors for each vertex. Also set the
// colorsPerVertex option to true.
viewer.scene.primitives.add(
new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.PolylineGeometry({
positions: positions,
width: 5.0,
vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
colors: colors,
colorsPerVertex: true,
}),
}),
appearance: new Cesium.PolylineColorAppearance(),
})
);
////////////////////////////////////////////////
// Create and prepare particles for movement
/////////////////////////////////////////////////
let streamDist = individual_particle_pt_distance.reduce(function (a, b) {
return a + b;
}, 0);
// console.log(streamDist);
let t = 0;
let dt = (individual_particle_pt_distance[0] / individual_particle_avg_velo[0])/ 20;
// let dt = streamDist / individual_particle_avg_velo[0] / 500;
let temp_pos = [];
for (i = 0; i < positionsInDegrees.length; i++) {
if (i === 0) {
temp_pos.push(
0,
positionsInDegrees[i][0],
positionsInDegrees[i][1],
positionsInDegrees[i][2]
);
} else {
temp_pos.push(
t,
positionsInDegrees[i][0],
positionsInDegrees[i][1],
positionsInDegrees[i][2]
);
dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[i] / 20;
// console.log(individual_particle_pt_distance[i] + "/" + individual_particle_avg_velo[i] );
// console.log(dt);
}
t += dt;
}
particle_czml[1].id = "point" + String(line);
particle_czml[1].position.cartographicDegrees = temp_pos;
// czmlArray.push(particle_czml);
viewer.dataSources.add(Cesium.CzmlDataSource.load(particle_czml));
}
// for (p = 0; p < czmlArray.length; p++) {
// let temp = czmlArray[p];
// viewer.dataSources.add(Cesium.CzmlDataSource.load(temp));
// }
});
// This adds a large arrow to the viewer. Works fine. for testing
// var purpleArrow = viewer.entities.add({
// name: "Purple straight arrow at height",
// polyline: {
// positions: Cesium.Cartesian3.fromDegreesArrayHeights([
// 9.187290, 48.784567, 400,
// 9.195991, 48.790575, 400
// ]),
// width: 50,
// arcType: Cesium.ArcType.NONE,
// material: new Cesium.PolylineArrowMaterialProperty(
// Cesium.Color.PURPLE
// ),
// },
// });
// var f = new File([""], "results/singlePolyline.csv", {type: "text/plain", lastModified: Date()})
// var temp = text.split(',');
// for(var i = 0; i < temp.length; i+=6) {
// pos.push([parseFloat(temp[i+1]), parseFloat(temp[i+2]), parseFloat(temp[i+3])]);
// colors.push([parseInt(temp[i+4]),parseInt(temp[i+5]),parseInt(temp[i+6])])
// }
console.log("Position data imported.");
//// the following codes will actually generate multicolor polylines
/// just need a away to get the actual data into there...
///
///
// for (var line=0; line < 10; line++){
// // Example 2: Draw a polyline with per vertex colors
// positions = [];
// colors = [];
// for (i = 0; i < 12; ++i) {
// positions.push(Cesium.Cartesian3.fromDegrees(-124.0 + line*5 + 5 * i, 35.0+line));
// colors.push(Cesium.Color.fromRandom({ alpha: 1.0 }));
// }
// // For per segment coloring, supply the colors option with
// // an array of colors for each vertex. Also set the
// // colorsPerVertex option to true.
// scene.primitives.add(
// new Cesium.Primitive({
// geometryInstances: new Cesium.GeometryInstance({
// geometry: new Cesium.PolylineGeometry({
// positions: positions,
// width: 5.0,
// vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
// colors: colors,
// colorsPerVertex: true,
// }),
// }),
// appearance: new Cesium.PolylineColorAppearance(),
// })
// );
// }
// HTML overlay for showing feature name on mouseover
var nameOverlay = document.createElement("div");
viewer.container.appendChild(nameOverlay);
nameOverlay.className = "backdrop";
nameOverlay.style.display = "none";
nameOverlay.style.position = "absolute";
nameOverlay.style.bottom = "0";
nameOverlay.style.left = "0";
nameOverlay.style["pointer-events"] = "none";
nameOverlay.style.padding = "4px";
nameOverlay.style.backgroundColor = "green";
var scene = viewer.scene;
var longitude;
var latitude;
var fid;
var featuretype;
var gmlid;
var selID = new Array();
var cnt = 0;
var lastPickedObject;
var viewModel = {
rightClickAction: "properties",
middleClickAction: "hide",
};
Cesium.knockout.track(viewModel);
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
// makes camera go to a certain position given by the coordinates below
var feature = viewer.scene.pick(movement.position);
if (!Cesium.defined(feature)) {
console.log("no feature defined");
return;
}
var propertyNames = feature.getPropertyNames();
var lat = feature.getProperty("Latitude");
var lon = feature.getProperty("Longitude");
var tmp = feature.getProperty("YearOfConstruction");
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(lon, lat, 900),
maximumHeight: 1500.0,
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90.0),
roll: Cesium.Math.toRadians(45.0),
},
duration: 2,
});
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function (movement) {
var feature = viewer.scene.pick(movement.position);
if (!Cesium.defined(feature)) {
return;
}
var action = viewModel.rightClickAction;
action === "properties";
printProperties(movement, feature);
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
function printProperties(movement, feature) {
console.log("Properties:");
var propertyNames = feature.getPropertyNames();
var length = propertyNames.length;
for (var i = 0; i < length; ++i) {
var propertyName = propertyNames[i];
if (
propertyName == "gmlIdALKISLageBezeichnung_1" ||
propertyName == "gmlIdALKISLageBezeichnung_2" ||
propertyName == "gmlIdALKISLageBezeichnung_3" ||
propertyName == "gmlIdALKISLageBezeichnung_4" ||
propertyName == "gmlIdALKISLageBezeichnung_5" ||
propertyName == "gmlIdALKISLageBezeichnung_6"
)
console.log(" " + propertyName + ": " + "zensiert");
else
console.log(
" " + propertyName + ": " + feature.getProperty(propertyName)
);
}
// Evaluate feature description
//console.log('Description : ' + tileset.style.meta.description.evaluate(scene.frameState, feature));
}
handler.setInputAction(function (movement) {
var feature = viewer.scene.pick(movement.position);
if (!Cesium.defined(feature)) {
return;
}
var action = viewModel.middleClickAction;
if (action === "hide") {
feature.show = false;
} else {
feature.show = true;
}
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
function showLegend() {
$("#legend").css("display", "block");
}
function hideLegend() {
$("#legend").css("display", "none");
}
// Legend - Colour Table
function emptyColourTable() {
$(".inner").empty();
}
function setHeightTable() {
$(".inner").append(
"<table>" +
"<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> > 3.5 </td></tr>" +
"<tr><td class='outlined' bgcolor='#ff6b21'></td><td> 3 </td></tr>" +
"<tr><td class='outlined' bgcolor='#ffb400'></td><td> 2.5 </td></tr>" +
"<tr><td class='outlined' bgcolor='yellow'></td><td> 2</td></tr>" +
"<tr><td class='outlined' bgcolor='#89FF8F'></td><td> 1.5 </td></tr>" +
"<tr><td class='outlined' bgcolor='cyan'></td><td> 1 </td></tr>" +
"<tr><td class='outlined' bgcolor='blue'></td><td> 0.5 </td></tr>" +
"</table>"
);
}
return Cesium.when(tileset.readyPromise).then(function (tileset) {
tileset.style = new Cesium.Cesium3DTileStyle({
color: "color('white',1)",
});
showLegend();
setHeightTable();
});
});
\ No newline at end of file
public/polylines_with_particles_backup_2.js deleted 100644 → 0
View file @ 2327af12
$(function () {
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ODI4ZTYyZS1mMTg2LTQ5NGEtYjdiOS02ODg2NzVhNjc0MTAiLCJpZCI6MjkwNCwiaWF0IjoxNTM1MTA5OTAzfQ.kyDX_0ScvJBkYnvXI0DW5NfZbiaRL5ezwtAUhxYnk1Y";
var imageryViewModels = [];
imageryViewModels.push(
new Cesium.ProviderViewModel({
name: "Sentinel-2",
iconUrl: Cesium.buildModuleUrl(
"Widgets/Images/ImageryProviders/sentinel-2.png"
),
tooltip: "Sentinel-2 cloudless.",
creationFunction: function () {
return new Cesium.IonImageryProvider({ assetId: 3954 });
},
})
);
imageryViewModels.push(
new Cesium.ProviderViewModel({
name: "Blue Marble",
iconUrl: Cesium.buildModuleUrl(
"Widgets/Images/ImageryProviders/blueMarble.png"
),
tooltip: "Blue Marble Next Generation July, 2004 imagery from NASA.",
creationFunction: function () {
return new Cesium.IonImageryProvider({ assetId: 3845 });
},
})
);
var viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 }),
terrainProvider: new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(1),
}),
scene3DOnly: false,
shouldAnimate: true,
animation: true,
infoBox: true,
baseLayerPicker: true,
fullscreenButton: false,
timeline: false,
navigationHelpButton: true,
navigationInstructionsInitiallyVisible: false,
homeButton: false,
selectionIndicator: true,
geocoder: true,
// imageryProviderViewModels: imageryViewModels
});
// var layer = viewer.imageryLayers.addImageryProvider(
// new Cesium.IonImageryProvider({ assetId: 3 })
// );
var imageryLayer = viewer.imageryLayers.addImageryProvider(
new Cesium.IonImageryProvider({ assetId: 3954 })
);
var canvas = viewer.canvas;
canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
canvas.addEventListener("click", function () {
canvas.focus();
});
canvas.focus();
var scene = viewer.scene;
var tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: "buildingTiles/StoeckachLOD1/tileset.json",
show: true,
})
);
tileset.readyPromise.then(function (tileset) {
return zoomAll(tileset);
});
tileset.readyPromise.then(function (tileset) {
var R = 0; // roll
var P = 0; // pitch
var Yaw = 0; // yaw
var height = 53;
var cartographic = Cesium.Cartographic.fromCartesian(
tileset.boundingSphere.center
);
var surface = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
0.0
);
var offset = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
height
);
var translation = Cesium.Cartesian3.subtract(
offset,
surface,
new Cesium.Cartesian3()
);
//var rotMat = new Cesium.Matrix3();
var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(
new Cesium.HeadingPitchRoll(Yaw, P, R)
);
tileset.modelMatrix = Cesium.Matrix4.fromRotationTranslation(
rotation,
translation
);
return zoomAll(tileset);
});
viewer.scene.globe.enableLighting = true; // set lighting to true
var zoomAll = function (tileset) {
return new Promise(function (resolve, reject) {
if (!tileset) {
reject("Tileset is undifined");
}
viewer.camera.viewBoundingSphere(
tileset.boundingSphere,
new Cesium.HeadingPitchRange(0, -0.5, 1500)
);
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
resolve();
});
};
//////////////////////////////////////////
// load streamline data from text file and parse it to polyline with multiple colors.
var pos = [];
var cols = [];
var streamID = [];
var Velocity = [];
var pt_to_pt_dist = [];
var avgVelocity = [];
var czmlArray = [];
function get_date_time_dt(deltaTime) {
// deltaTime should be given in SECONDS and is then converted to milliseconds
// set deltaTime to 0 if you want to get current date and time
// set to +60000 to get date and time of 60 seconds = 60000 milliseconds in the future
return (currentdate = new Date(
new Date().getTime() + deltaTime * 1000
).toISOString());
}
d3.dsv(",", "results/polylines_with_velocity.csv").then(function (text) {
const particleDuration = 90; // units in seconds the particle / point should take to move from start to finish
//define the czml structure
var particle_czml = [
{
id: "document",
name: "CZML Point - Time Dynamic",
version: "1.0",
},
{
id: "point",
availability:
get_date_time_dt(0) + "/" + get_date_time_dt(particleDuration),
position: {
epoch: get_date_time_dt(0),
cartographicDegrees: [
// use 4 coordinates / values : (t,x,y,z) or rather (t,lon,lat,alt)
],
},
point: {
color: {
rgba: [0, 0, 0, 250],
},
outlineColor: {
rgba: [255, 0, 0, 128],
},
outlineWidth: 1,
pixelSize: 6,
},
},
];
//////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////
let package_time_faktor = 8.0;
var particle_czml_2_ = [
{
id: "document",
name: "CZML Point - Time Dynamic",
version: "1.0",
},
{
id: "point_set2_",
availability:
get_date_time_dt(0) + "/" + get_date_time_dt( particleDuration),
position: {
epoch: get_date_time_dt(0),
cartographicDegrees: [
// use 4 coordinates / values : (t,x,y,z) or rather (t,lon,lat,alt)
],
},
point: {
color: {
rgba: [0, 0, 0, 250],
},
outlineColor: {
rgba: [255, 0, 0, 128],
},
outlineWidth: 1,
pixelSize: 6,
},
},
];
var temp = text;
for (var i = 0; i < temp.length; i++) {
// use i+=7 when parsed as d3.text(...)
pos.push([
parseFloat(text[i].Lon),
parseFloat(text[i].Lat),
parseFloat(text[i].z),
]);
cols.push([
parseInt(text[i].R),
parseInt(text[i].G),
parseInt(text[i].B),
]);
streamID.push(parseInt(text[i].ID));
Velocity.push(parseFloat(text[i].velocity));
avgVelocity.push(parseFloat(text[i].AverageVelocity));
pt_to_pt_dist.push(parseFloat(text[i].pt_to_pt_dist));
// use these lines if parsed as text. i.e. using d3.text(...)
//pos.push([parseFloat(temp[i+0]), parseFloat(temp[i+1]), parseFloat(temp[i+2])]);
//colors.push([parseFloat(temp[i+3]),parseFloat(temp[i+4]),parseFloat(temp[i+5])])
//streamID.push([parseFloat(temp[i+6])]);
}
const maxID = streamID.reduce(function (a, b) {
return Math.max(a, b);
});
//find out the unique ids within the streamID array
const uniqueStreamID = Array.from(new Set(streamID)); // const uniqueStreamID = [...new Set(streamID)]; // same can be done with spread operator
//get index of each unique id, first element of those
let sIDidx = [];
for (var i = 0; i <= maxID; i++) {
var tmpIdx = streamID.indexOf(i);
if (tmpIdx !== -1) sIDidx.push(tmpIdx);
}
/////////////////////////////////////////////////
// Create and draw a polyline with per vertex colors
/////////////////////////////////////////////////
const heightOffset = 120;
for (var line = 0; line < uniqueStreamID.length; line++) {
let positions = [];
let positionsInDegrees = [];
let colors = [];
let individual_particle_velo = [];
let individual_particle_pt_distance = [];
let individual_particle_avg_velo = [];
for (i = sIDidx[line - 1]; i < sIDidx[line] - 1; ++i) {
positions.push(
Cesium.Cartesian3.fromDegrees(
pos[i][0],
pos[i][1],
pos[i][2] + heightOffset
)
);
positionsInDegrees.push([
pos[i][0],
pos[i][1],
pos[i][2] + heightOffset,
]);
colors.push(
Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 180)
);
individual_particle_avg_velo.push(avgVelocity[i]);
individual_particle_pt_distance.push(pt_to_pt_dist[i]);
individual_particle_velo.push(Velocity[i]);
}
// For per segment coloring, supply the colors option with
// an array of colors for each vertex. Also set the
// colorsPerVertex option to true.
viewer.scene.primitives.add(
new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.PolylineGeometry({
positions: positions,
width: 5.0,
vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
colors: colors,
colorsPerVertex: true,
}),
}),
appearance: new Cesium.PolylineColorAppearance(),
})
);
////////////////////////////////////////////////
// Create and prepare particles for movement
/////////////////////////////////////////////////
let streamDist = individual_particle_pt_distance.reduce(function (a, b) {
return a + b;
}, 0);
// console.log(streamDist);
let t = 0;
let dt = (individual_particle_pt_distance[0] / individual_particle_avg_velo[0])/ 20;
// let dt = streamDist / individual_particle_avg_velo[0] / 500;
let temp_pos = [];
let temp_pos_2_ = [];
for (i = 0; i < positionsInDegrees.length; i++) {
if (i === 0) {
temp_pos.push(
0,
positionsInDegrees[i][0],
positionsInDegrees[i][1],
positionsInDegrees[i][2]
);
temp_pos_2_.push(
particleDuration/ package_time_faktor,
positionsInDegrees[i][0],
positionsInDegrees[i][1],
positionsInDegrees[i][2]
);
} else {
temp_pos.push(
t,
positionsInDegrees[i][0],
positionsInDegrees[i][1],
positionsInDegrees[i][2]
);
temp_pos_2_.push(
particleDuration / package_time_faktor + t,
positionsInDegrees[i][0],
positionsInDegrees[i][1],
positionsInDegrees[i][2]
);
dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[i] / 20;
// console.log(individual_particle_pt_distance[i] + "/" + individual_particle_avg_velo[i] );
// console.log(dt);
}
t += dt;
}
particle_czml[1].id = "point" + String(line);
particle_czml[1].position.cartographicDegrees = temp_pos;
particle_czml_2_[1].position.cartographicDegrees = temp_pos_2_;
particle_czml_2_[1].id = "point_set2_" + String(line);
// czmlArray.push(particle_czml);
viewer.dataSources.add(Cesium.CzmlDataSource.load(particle_czml));
viewer.dataSources.add(Cesium.CzmlDataSource.load(particle_czml_2_));
}
// for (p = 0; p < czmlArray.length; p++) {
// let temp = czmlArray[p];
// viewer.dataSources.add(Cesium.CzmlDataSource.load(temp));
// }
});
// This adds a large arrow to the viewer. Works fine. for testing
// var purpleArrow = viewer.entities.add({
// name: "Purple straight arrow at height",
// polyline: {
// positions: Cesium.Cartesian3.fromDegreesArrayHeights([
// 9.187290, 48.784567, 400,
// 9.195991, 48.790575, 400
// ]),
// width: 50,
// arcType: Cesium.ArcType.NONE,
// material: new Cesium.PolylineArrowMaterialProperty(
// Cesium.Color.PURPLE
// ),
// },
// });
// var f = new File([""], "results/singlePolyline.csv", {type: "text/plain", lastModified: Date()})
// var temp = text.split(',');
// for(var i = 0; i < temp.length; i+=6) {
// pos.push([parseFloat(temp[i+1]), parseFloat(temp[i+2]), parseFloat(temp[i+3])]);
// colors.push([parseInt(temp[i+4]),parseInt(temp[i+5]),parseInt(temp[i+6])])
// }
console.log("Position data imported.");
//// the following codes will actually generate multicolor polylines
/// just need a away to get the actual data into there...
///
///
// for (var line=0; line < 10; line++){
// // Example 2: Draw a polyline with per vertex colors
// positions = [];
// colors = [];
// for (i = 0; i < 12; ++i) {
// positions.push(Cesium.Cartesian3.fromDegrees(-124.0 + line*5 + 5 * i, 35.0+line));
// colors.push(Cesium.Color.fromRandom({ alpha: 1.0 }));
// }
// // For per segment coloring, supply the colors option with
// // an array of colors for each vertex. Also set the
// // colorsPerVertex option to true.
// scene.primitives.add(
// new Cesium.Primitive({
// geometryInstances: new Cesium.GeometryInstance({
// geometry: new Cesium.PolylineGeometry({
// positions: positions,
// width: 5.0,
// vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
// colors: colors,
// colorsPerVertex: true,
// }),
// }),
// appearance: new Cesium.PolylineColorAppearance(),
// })
// );
// }
// HTML overlay for showing feature name on mouseover
var nameOverlay = document.createElement("div");
viewer.container.appendChild(nameOverlay);
nameOverlay.className = "backdrop";
nameOverlay.style.display = "none";
nameOverlay.style.position = "absolute";
nameOverlay.style.bottom = "0";
nameOverlay.style.left = "0";
nameOverlay.style["pointer-events"] = "none";
nameOverlay.style.padding = "4px";
nameOverlay.style.backgroundColor = "green";
var scene = viewer.scene;
var longitude;
var latitude;
var fid;
var featuretype;
var gmlid;
var selID = new Array();
var cnt = 0;
var lastPickedObject;
var viewModel = {
rightClickAction: "properties",
middleClickAction: "hide",
};
Cesium.knockout.track(viewModel);
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
// makes camera go to a certain position given by the coordinates below
var feature = viewer.scene.pick(movement.position);
if (!Cesium.defined(feature)) {
console.log("no feature defined");
return;
}
var propertyNames = feature.getPropertyNames();
var lat = feature.getProperty("Latitude");
var lon = feature.getProperty("Longitude");
var tmp = feature.getProperty("YearOfConstruction");
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(lon, lat, 900),
maximumHeight: 1500.0,
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90.0),
roll: Cesium.Math.toRadians(45.0),
},
duration: 2,
});
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function (movement) {
var feature = viewer.scene.pick(movement.position);
if (!Cesium.defined(feature)) {
return;
}
var action = viewModel.rightClickAction;
action === "properties";
printProperties(movement, feature);
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
function printProperties(movement, feature) {
console.log("Properties:");
var propertyNames = feature.getPropertyNames();
var length = propertyNames.length;
for (var i = 0; i < length; ++i) {
var propertyName = propertyNames[i];
if (
propertyName == "gmlIdALKISLageBezeichnung_1" ||
propertyName == "gmlIdALKISLageBezeichnung_2" ||
propertyName == "gmlIdALKISLageBezeichnung_3" ||
propertyName == "gmlIdALKISLageBezeichnung_4" ||
propertyName == "gmlIdALKISLageBezeichnung_5" ||
propertyName == "gmlIdALKISLageBezeichnung_6"
)
console.log(" " + propertyName + ": " + "zensiert");
else
console.log(
" " + propertyName + ": " + feature.getProperty(propertyName)
);
}
// Evaluate feature description
//console.log('Description : ' + tileset.style.meta.description.evaluate(scene.frameState, feature));
}
handler.setInputAction(function (movement) {
var feature = viewer.scene.pick(movement.position);
if (!Cesium.defined(feature)) {
return;
}
var action = viewModel.middleClickAction;
if (action === "hide") {
feature.show = false;
} else {
feature.show = true;
}
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
function showLegend() {
$("#legend").css("display", "block");
}
function hideLegend() {
$("#legend").css("display", "none");
}
// Legend - Colour Table
function emptyColourTable() {
$(".inner").empty();
}
function setHeightTable() {
$(".inner").append(
"<table>" +
"<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> > 3.5 </td></tr>" +
"<tr><td class='outlined' bgcolor='#ff6b21'></td><td> 3 </td></tr>" +
"<tr><td class='outlined' bgcolor='#ffb400'></td><td> 2.5 </td></tr>" +
"<tr><td class='outlined' bgcolor='yellow'></td><td> 2</td></tr>" +
"<tr><td class='outlined' bgcolor='#89FF8F'></td><td> 1.5 </td></tr>" +
"<tr><td class='outlined' bgcolor='cyan'></td><td> 1 </td></tr>" +
"<tr><td class='outlined' bgcolor='blue'></td><td> 0.5 </td></tr>" +
"</table>"
);
}
return Cesium.when(tileset.readyPromise).then(function (tileset) {
tileset.style = new Cesium.Cesium3DTileStyle({
color: "color('white',1)",
});
showLegend();
setHeightTable();
});
});
\ No newline at end of file
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