diff --git a/public/css/main.css b/public/css/main.css
index 6a65d6900880dc4a6bd2117c72cd71dc72c5144a..ccb4454df65abff19b068cbfd16559fdfda21dc6 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -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 {
margin-bottom: 0;
}
diff --git a/public/imgs/thumbnails/EssenPC.PNG b/public/imgs/thumbnails/EssenPC.PNG
deleted file mode 100644
index 62e9c313cf5ed7b7dbc878388032f0f2e48937b4..0000000000000000000000000000000000000000
Binary files a/public/imgs/thumbnails/EssenPC.PNG and /dev/null differ
diff --git a/public/imgs/thumbnails/HexGrid15m.PNG b/public/imgs/thumbnails/HexGrid15m.PNG
deleted file mode 100644
index dd19232907cd39c5f22ffa4a91ffd331ce33032b..0000000000000000000000000000000000000000
Binary files a/public/imgs/thumbnails/HexGrid15m.PNG and /dev/null differ
diff --git a/public/imgs/thumbnails/HexGrid2m_PressureMean3DTiles.PNG b/public/imgs/thumbnails/HexGrid2m_PressureMean3DTiles.PNG
deleted file mode 100644
index 8687df389dd348ddd193486ae836de7e7a7e87d2..0000000000000000000000000000000000000000
Binary files a/public/imgs/thumbnails/HexGrid2m_PressureMean3DTiles.PNG and /dev/null differ
diff --git a/public/imgs/thumbnails/HexGrid2m_PressureMeanGeoJSON.PNG b/public/imgs/thumbnails/HexGrid2m_PressureMeanGeoJSON.PNG
deleted file mode 100644
index e93b6943a5f55ac6bc1f23554337e691c3605735..0000000000000000000000000000000000000000
Binary files a/public/imgs/thumbnails/HexGrid2m_PressureMeanGeoJSON.PNG and /dev/null differ
diff --git a/public/imgs/thumbnails/HexGrid5m_PressureMean3dTiles.PNG b/public/imgs/thumbnails/HexGrid5m_PressureMean3dTiles.PNG
deleted file mode 100644
index 42983f7901e0450c33375c0885978ff20e328eff..0000000000000000000000000000000000000000
Binary files a/public/imgs/thumbnails/HexGrid5m_PressureMean3dTiles.PNG and /dev/null differ
diff --git a/public/imgs/thumbnails/HexGrid5m_PressureMeanGeoJSON.PNG b/public/imgs/thumbnails/HexGrid5m_PressureMeanGeoJSON.PNG
deleted file mode 100644
index 5c4c277cb3791388ad02a04509456cb29147a36e..0000000000000000000000000000000000000000
Binary files a/public/imgs/thumbnails/HexGrid5m_PressureMeanGeoJSON.PNG and /dev/null differ
diff --git a/public/imgs/thumbnails/PointCloud.PNG b/public/imgs/thumbnails/PointCloud.PNG
deleted file mode 100644
index 8bdc65d4f42a5bc9f0a9d60e7877791968de84b6..0000000000000000000000000000000000000000
Binary files a/public/imgs/thumbnails/PointCloud.PNG and /dev/null differ
diff --git a/public/imgs/thumbnails/StreamLinesCesiumOverview.PNG b/public/imgs/thumbnails/StreamLinesCesiumOverview.PNG
deleted file mode 100644
index 771bada6a0db7855fa313a4515b30efcacbf9af9..0000000000000000000000000000000000000000
Binary files a/public/imgs/thumbnails/StreamLinesCesiumOverview.PNG and /dev/null differ
diff --git a/public/imgs/thumbnails/StreamLinesCesiumOverview2.PNG b/public/imgs/thumbnails/StreamLinesCesiumOverview2.PNG
deleted file mode 100644
index f95c57b127dda5f1e0186f47f8a107169bb80db3..0000000000000000000000000000000000000000
Binary files a/public/imgs/thumbnails/StreamLinesCesiumOverview2.PNG and /dev/null differ
diff --git a/public/imgs/thumbnails/StreamLinesCesiumOverview_cropped.png b/public/imgs/thumbnails/StreamLinesCesiumOverview_cropped.png
deleted file mode 100644
index 2b576999f6755d04455b9cefdac4ea0b8a1de348..0000000000000000000000000000000000000000
Binary files a/public/imgs/thumbnails/StreamLinesCesiumOverview_cropped.png and /dev/null differ
diff --git a/public/imgs/thumbnails/StreamLinesCesiumZoom2.PNG b/public/imgs/thumbnails/StreamLinesCesiumZoom2.PNG
deleted file mode 100644
index 52c21e81e1fd761357638dd66e67adf7722bcbaa..0000000000000000000000000000000000000000
Binary files a/public/imgs/thumbnails/StreamLinesCesiumZoom2.PNG and /dev/null differ
diff --git a/public/imgs/thumbnails/StreamLinesCesiumZoom4.PNG b/public/imgs/thumbnails/StreamLinesCesiumZoom4.PNG
deleted file mode 100644
index 585a1a19a3dad81b0c26c3431238c54fc57e4966..0000000000000000000000000000000000000000
Binary files a/public/imgs/thumbnails/StreamLinesCesiumZoom4.PNG and /dev/null differ
diff --git a/public/imgs/thumbnails/StreamlinesMultipart.PNG b/public/imgs/thumbnails/StreamlinesMultipart.PNG
deleted file mode 100644
index 068a15c5d7faacb66b628cacb240f08f92c77baa..0000000000000000000000000000000000000000
Binary files a/public/imgs/thumbnails/StreamlinesMultipart.PNG and /dev/null differ
diff --git a/public/imgs/thumbnails/StreamlinesMultipart_particles.PNG b/public/imgs/thumbnails/StreamlinesMultipart_particles.PNG
deleted file mode 100644
index a754ae5fc925e7a85371e0053668c5b83414c1fe..0000000000000000000000000000000000000000
Binary files a/public/imgs/thumbnails/StreamlinesMultipart_particles.PNG and /dev/null differ
diff --git a/public/index.html b/public/index.html
index 3d0aac6fe2a9ed494974ba949692501cb1e6decc..c43c865dbff54430da4b48b5bff1b1c9b20fe838 100644
--- a/public/index.html
+++ b/public/index.html
@@ -77,17 +77,16 @@
</header>
<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">
<!-- <h1>A platform for urban CFD</h1> -->
<img src="imgs/wind-solid.svg" class="windSVG" width="100px" alt="wind" />
- <h1>Urban Visualization Platform</h1>
- <p class="lead text-muted">
- On this platform an overview of different visualizations for a
- variety of (3D) data is provided.
+ <h1 style="font-weight: 800;">Urban Visualization Platform</h1>
+ <p style="font-weight: 700;" class="lead">
+ A platform for visualizing urban data in 3D
</p>
- <p>
+ <p style="font-weight: 500;">
The examples shown here were mainly created during the iCity
research projects at HFT Stuttgart (University of Applied Sciences
Stuttgart).
@@ -488,7 +487,7 @@
</p>
<p>
urbanVIS is © by Sven Schneider and colaborators at HFT
- Stuttgart, <span id="year"></span>.
+ Stuttgart, 2017 - <span id="year"></span>.
</p>
</div>
<div class="container">
diff --git a/public/polylines_with_particles_backup.js b/public/polylines_with_particles_backup.js
deleted file mode 100644
index b4c6e27ccdbbd211ea570bb0f5b1fa8299484967..0000000000000000000000000000000000000000
--- a/public/polylines_with_particles_backup.js
+++ /dev/null
@@ -1,520 +0,0 @@
-$(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'> </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
diff --git a/public/polylines_with_particles_backup_2.js b/public/polylines_with_particles_backup_2.js
deleted file mode 100644
index be11df7bef90d317ab457f7ad23389949c73328a..0000000000000000000000000000000000000000
--- a/public/polylines_with_particles_backup_2.js
+++ /dev/null
@@ -1,569 +0,0 @@
-$(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'> </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