diff --git a/public/Kirchturm1.html b/public/Kirchturm1.html new file mode 100644 index 0000000000000000000000000000000000000000..942c1292d8cdadd94b1257e1dc5e0ccb0c9ed549 --- /dev/null +++ b/public/Kirchturm1.html @@ -0,0 +1,66 @@ + + + + + + + + + + + Stuttgart + + + + + + + + + + + + + +
+ +

TP2.4 - Prototyp 5: Webbasierte Visualisierung von CFD Simulationsdaten

+ + +
+ + +
+ +
+ + + + + + + + + +
Wind speed (m/s)
- 3.5

+

- 0 +

+
+ +
+ + + + + + + + \ No newline at end of file diff --git a/public/Kirchturm1.js b/public/Kirchturm1.js new file mode 100644 index 0000000000000000000000000000000000000000..2673719292fd4d253579e5397e86ae79c5ecb844 --- /dev/null +++ b/public/Kirchturm1.js @@ -0,0 +1,940 @@ +$(function () { + Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ODI4ZTYyZS1mMTg2LTQ5NGEtYjdiOS02ODg2NzVhNjc0MTAiLCJpZCI6MjkwNCwiaWF0IjoxNTM1MTA5OTAzfQ.kyDX_0ScvJBkYnvXI0DW5NfZbiaRL5ezwtAUhxYnk1Y'; + + var imageryViewModels = []; + imageryViewModels.push(new Cesium.ProviderViewModel({ + name: 'Sentinel-2', + iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/sentinel-2.png'), + tooltip: 'Sentinel-2 cloudless.', + creationFunction: function () { + return new Cesium.IonImageryProvider({ assetId: 3954 }); + } + })); + + imageryViewModels.push(new Cesium.ProviderViewModel({ + name: 'Blue Marble', + iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/blueMarble.png'), + tooltip: 'Blue Marble Next Generation July, 2004 imagery from NASA.', + creationFunction: function () { + return new Cesium.IonImageryProvider({ assetId: 3845 }); + } + })); + + var viewer = new Cesium.Viewer('cesiumContainer', + { + imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 }), + + terrainProvider : new Cesium.CesiumTerrainProvider({ + url: Cesium.IonResource.fromAssetId(1) + }), + scene3DOnly: false, + shouldAnimate: true, + animation: true, + infoBox: true, + baseLayerPicker: true, + fullscreenButton: false, + timeline: false, + navigationHelpButton: true, + navigationInstructionsInitiallyVisible: false, + homeButton: false, + selectionIndicator: true, + geocoder: true, + // imageryProviderViewModels: imageryViewModels + }); + + var layer = viewer.imageryLayers.addImageryProvider( + new Cesium.IonImageryProvider({ assetId: 2 }) + ); + + // var imageryLayer = viewer.imageryLayers.addImageryProvider( + // new Cesium.IonImageryProvider({ assetId: 3954 }) + // ); + + + var canvas = viewer.canvas; + canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas + canvas.addEventListener('click', function() { + canvas.focus(); + }); + canvas.focus(); + var scene = viewer.scene; + + var osmBuildings = viewer.scene.primitives.add( + new Cesium.Cesium3DTileset({ + url: Cesium.IonResource.fromAssetId(96188), + }) + ); + + + + const buildingHeightOffset = 60; //53 + + + ///////////////////// STOECKACH LOD 1 + + // var stoeckach = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ + // url: 'buildingTiles/StoeckachLOD1/tileset.json', + // show: true + // })); + + + + // stoeckach.readyPromise.then(function (stoeckach) { + + // var R = 0; // roll + // var P = 0; // pitch + // var Yaw = 0; // yaw + // var height = buildingHeightOffset; + // var cartographic = Cesium.Cartographic.fromCartesian(stoeckach.boundingSphere.center); + // var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); + // var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); + // var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); + + // //var rotMat = new Cesium.Matrix3(); + // var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); + + // stoeckach.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); + + + // return zoomAll(stoeckach); + // }); + + // stoeckach.readyPromise.then(function(stoeckach){ + // stoeckach.style = new Cesium.Cesium3DTileStyle({ + // color: "color('white',0.5)", + // }) + // }); + + + + ///////////////////////////// Target ////////////////////////// + + var target_tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ + url: 'buildingTiles/circularTiles/target_black/tileset.json', + show: true + })); + + + + target_tileset.readyPromise.then(function (target_tileset) { + + var R = 0; // roll + var P = 0; // pitch + var Yaw = 0; // yaw + var height = buildingHeightOffset; + var cartographic = Cesium.Cartographic.fromCartesian(target_tileset.boundingSphere.center); + var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); + var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); + var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); + + //var rotMat = new Cesium.Matrix3(); + var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); + + target_tileset.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); + + + return zoomAll(target_tileset); + }); + + target_tileset.readyPromise.then(function(target_tileset){ + target_tileset.style = new Cesium.Cesium3DTileStyle({ + color: "color('black',0.5)", + }) + }); + + + + + ///////////////////////////// Layer one ////////////////////////// + + var L1 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ + url: 'buildingTiles/circularTiles/L1_yellow/tileset.json', + show: true, + + })); + + L1.readyPromise.then(function (L1) { + return zoomAll(L1); + }); + + L1.readyPromise.then(function (L1) { + + var R = 0; // roll + var P = 0; // pitch + var Yaw = 0; // yaw + var height = buildingHeightOffset; + var cartographic = Cesium.Cartographic.fromCartesian(L1.boundingSphere.center); + var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); + var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); + var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); + + //var rotMat = new Cesium.Matrix3(); + var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); + + L1.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); + + return zoomAll(L1); + }); + + + L1.readyPromise.then(function(L1){ + L1.style = new Cesium.Cesium3DTileStyle({ + color: "color('yellow',1)", + }) + }); + + ///////////////////////////// Layer 2 ////////////////////////// + + var L2 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ + url: 'buildingTiles/circularTiles/L2_red/tileset.json', + show: true, + + })); + + L2.readyPromise.then(function (L2) { + return zoomAll(L2); + }); + + L2.readyPromise.then(function (L2) { + + var R = 0; // roll + var P = 0; // pitch + var Yaw = 0; // yaw + var height = buildingHeightOffset; + var cartographic = Cesium.Cartographic.fromCartesian(L2.boundingSphere.center); + var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); + var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); + var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); + + //var rotMat = new Cesium.Matrix3(); + var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); + + L2.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); + + return zoomAll(L2); + }); + + + L2.readyPromise.then(function(L2){ + L2.style = new Cesium.Cesium3DTileStyle({ + color: "color('red',1)", + }) + }); + + + ///////////////////////////// Layer 3 ////////////////////////// + + var L3 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ + url: 'buildingTiles/circularTiles/L3_green/tileset.json', + show: true, + + })); + + L3.readyPromise.then(function (L3) { + return zoomAll(L3); + }); + + L3.readyPromise.then(function (L3) { + + var R = 0; // roll + var P = 0; // pitch + var Yaw = 0; // yaw + var height = buildingHeightOffset; + var cartographic = Cesium.Cartographic.fromCartesian(L3.boundingSphere.center); + var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); + var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); + var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); + + //var rotMat = new Cesium.Matrix3(); + var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); + + L3.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); + + return zoomAll(L3); + }); + + + L3.readyPromise.then(function(L3){ + L3.style = new Cesium.Cesium3DTileStyle({ + color: "color('green',1)", + }) + }); + + + ///////////////////////////// Layer 3 ////////////////////////// + + var L4 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ + url: 'buildingTiles/circularTiles/L4_brown/tileset.json', + show: true, + + })); + + L4.readyPromise.then(function (L4) { + return zoomAll(L4); + }); + + L4.readyPromise.then(function (L4) { + + var R = 0; // roll + var P = 0; // pitch + var Yaw = 0; // yaw + var height = buildingHeightOffset; + var cartographic = Cesium.Cartographic.fromCartesian(L4.boundingSphere.center); + var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); + var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); + var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); + + //var rotMat = new Cesium.Matrix3(); + var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); + + L4.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); + + return zoomAll(L4); + }); + + + L4.readyPromise.then(function(L4){ + L4.style = new Cesium.Cesium3DTileStyle({ + color: "color('CORAL',1)", + }) + }); + + + var camera = viewer.camera; + var controller = scene.screenSpaceCameraController; + var r = 0; + var center = new Cesium.Cartesian3(); + + var hpRoll = new Cesium.HeadingPitchRoll(); + var hpRange = new Cesium.HeadingPitchRange(); + var speed = 0.1; + var deltaRadians = Cesium.Math.toRadians(3.0); + + var position = Cesium.Cartesian3.fromDegrees(9.190471, 48.786782, 0.0); + var speedVector = new Cesium.Cartesian3(); + var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west'); + + + + viewer.scene.globe.enableLighting = true; // set lighting to true + + + var zoomAll = function (tileset) { + return new Promise(function (resolve, reject) { + if (!tileset) { reject("Tileset is undifined"); } + viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 1500)); + viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); + resolve(); + }); + } + + +////////////////////////////////////////// +////////////////////////////////////////// + // load streamline data from text file and parse it to polyline with multiple colors. + + var pos = []; + var cols = []; + var streamID = []; + var Velocity = []; + var pt_to_pt_dist = []; + var avgVelocity = []; + + + function get_date_time_dt(deltaTime) { + // deltaTime should be given in SECONDS and is then converted to milliseconds + // set deltaTime to 0 if you want to get current date and time + // set to +60000 to get date and time of 60 seconds = 60000 milliseconds in the future + + return (currentdate = new Date( + new Date().getTime() + deltaTime * 1000 + ).toISOString()); + } + + d3.dsv(",", "results/Kirchturm1.csv").then(function (text) { + const particleDuration = 90; // units in seconds the particle / point should take to move from start to finish + //define the czml structure + var particle_czml = [ + { + id: "document", + name: "CZML Point - Time Dynamic", + version: "1.0", + clock: { + interval: get_date_time_dt(0) + "/" + get_date_time_dt(particleDuration), // This is the time range of our simulation + currentTime: '', // This is the time associated with the start view + currentTime: get_date_time_dt(0), + multiplier: 5, + // range: 'LOOP_STOP', + } + }, + { + id: "point", + availability: get_date_time_dt(0) + "/" + get_date_time_dt(particleDuration), + position: { + epoch: get_date_time_dt(0), + cartographicDegrees: [ + // use 4 coordinates / values : (t,x,y,z) or rather (t,lon,lat,alt) + ], + //"interpolationAlgorithm": "LAGRANGE", + //"interpolationDegree": 1 + }, + point: { + color: { + rgba: [0, 0, 0, 250], + }, + outlineColor: { + rgba: [255, 0, 0, 128], + }, + outlineWidth: 1, + pixelSize: 6, + }, + }, + ]; + ////////////////////////////////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////// + let package_time_faktor = 6.0; + + // create an array of deep copies of the original czml data structure, to be modified below. + let czmlArr = []; + for (c=0; c < package_time_faktor; c++){ + czmlArr.push(JSON.parse(JSON.stringify(particle_czml))); + czmlArr[c][1].id = "point_arr_" + String(c); + } + + + + var temp = text; + for (var i = 0; i < temp.length; i++) { + // use i+=7 when parsed as d3.text(...) + pos.push([ + parseFloat(text[i].x), + parseFloat(text[i].y), + parseFloat(text[i].z), + ]); + cols.push([ + parseInt(text[i].R), + parseInt(text[i].G), + parseInt(text[i].B), + ]); + streamID.push(parseInt(text[i].ID)); + Velocity.push(parseFloat(text[i].velocity)); + avgVelocity.push(parseFloat(text[i].AverageVelocity)); + pt_to_pt_dist.push(parseFloat(text[i].pt_to_pt_dist)); + // use these lines if parsed as text. i.e. using d3.text(...) + //pos.push([parseFloat(temp[i+0]), parseFloat(temp[i+1]), parseFloat(temp[i+2])]); + //colors.push([parseFloat(temp[i+3]),parseFloat(temp[i+4]),parseFloat(temp[i+5])]) + //streamID.push([parseFloat(temp[i+6])]); + } + + const maxID = streamID.reduce(function (a, b) { + return Math.max(a, b); + }); + + //find out the unique ids within the streamID array + const uniqueStreamID = Array.from(new Set(streamID)); // const uniqueStreamID = [...new Set(streamID)]; // same can be done with spread operator + + //get index of each unique id, first element of those + let sIDidx = []; + for (var i = 0; i <= maxID; i++) { + var tmpIdx = streamID.indexOf(i); + if (tmpIdx !== -1) sIDidx.push(tmpIdx); + } + + ///////////////////////////////////////////////// + // Create and draw a polyline with per vertex colors + ///////////////////////////////////////////////// + const heightOffset = 70; + + for (var line = 0; line < uniqueStreamID.length; line++) { + let positions = []; + let positionsInDegrees = []; + let colors = []; + let individual_particle_velo = []; + let individual_particle_pt_distance = []; + let individual_particle_avg_velo = []; + + curr_pos = sIDidx[line]; + + for (i = curr_pos; i < streamID.length; ++i) { + if (line === streamID[i]){ + positions.push( + Cesium.Cartesian3.fromDegrees( + pos[i][0], + pos[i][1], + pos[i][2] + heightOffset + ) + ); + positionsInDegrees.push([ + pos[i][0], + pos[i][1], + pos[i][2] + heightOffset, + ]); + colors.push( + Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 180) + ); + individual_particle_avg_velo.push(avgVelocity[i]); + individual_particle_pt_distance.push(pt_to_pt_dist[i]); + individual_particle_velo.push(Velocity[i]); + } // if end brace + } + // For per segment coloring, supply the colors option with + // an array of colors for each vertex. Also set the + // colorsPerVertex option to true. + viewer.scene.primitives.add( + new Cesium.Primitive({ + geometryInstances: new Cesium.GeometryInstance({ + geometry: new Cesium.PolylineGeometry({ + positions: positions, + width: 5.0, + vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT, + colors: colors, + colorsPerVertex: true, + }), + }), + appearance: new Cesium.PolylineColorAppearance(), + }) + ); + + //////////////////////////////////////////////// + // Create and prepare particles for movement + ///////////////////////////////////////////////// + let streamDist = individual_particle_pt_distance.reduce(function (a, b) { + return a + b; + }, 0); + // console.log(streamDist); + + let t = 0; + let dt = (individual_particle_pt_distance[1] / individual_particle_avg_velo[0]) / 20; + // let dt = streamDist / individual_particle_avg_velo[0] / 500; + + ///////////////////////////////////// + var temp_pos = []; + for (i = 0; i < positionsInDegrees.length; i++) { + if (i === 0) { + temp_pos.push( + 0, + positionsInDegrees[i][0], + positionsInDegrees[i][1], + positionsInDegrees[i][2] + ); + } else { + temp_pos.push( + t, + positionsInDegrees[i][0], + positionsInDegrees[i][1], + positionsInDegrees[i][2] + ); + dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[0] / 20; // avg_velo is always the same per streamline + // console.log(individual_particle_pt_distance[i] + "/" + individual_particle_avg_velo[i] ); + // console.log(dt); + } + t += dt; + } + particle_czml[1].id = "point" + String(line); + particle_czml[1].position.cartographicDegrees = temp_pos; + viewer.dataSources.add(Cesium.CzmlDataSource.load(particle_czml)); + + //////////////////////////////////////////////// + dt = (individual_particle_pt_distance[1] / individual_particle_avg_velo[0]) / 20; + for (c=0; c < czmlArr.length ; c++){ + + temp_pos = []; + for (i = 0; i < positionsInDegrees.length; i++) { + if (i === 0) { + temp_pos.push( + t, + positionsInDegrees[i][0], + positionsInDegrees[i][1], + positionsInDegrees[i][2] + ); + } else { + temp_pos.push( + t, + positionsInDegrees[i][0], + positionsInDegrees[i][1], + positionsInDegrees[i][2] + ); + dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[0] / 20; + // console.log(individual_particle_pt_distance[i] + "/" + individual_particle_avg_velo[i] ); + // console.log(dt); + } + + t += dt; + } + czmlArr[c][1].position.cartographicDegrees = temp_pos; + czmlArr[c][1].id = "point_set_" + String(c) + "_" + String(line); + czmlArr[c][1].position.epoch = get_date_time_dt(0); + viewer.dataSources.add(Cesium.CzmlDataSource.load(czmlArr[c])); + } + + + } // end bracket for: for (var line = 0; line < uniqueStreamID.length; line++) { + + + }); // end bracket for: d3.dsv(...).then(... + // 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'; + + // 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 (Cesium.defined(selected.feature)) { + selected.feature.color = selected.originalColor; + selected.feature = undefined; + } + + // Pick a new feature + var pickedFeature = viewer.scene.pick(movement.position); + if (!Cesium.defined(pickedFeature)) { + clickHandler(movement); + return; + } + + // Select the feature if it's not already selected + if (selected.feature === pickedFeature) { + return; + } + selected.feature = pickedFeature; + + // Save the selected feature's original color + if (pickedFeature === highlighted.feature) { + Cesium.Color.clone(highlighted.originalColor, selected.originalColor); + highlighted.feature = undefined; + } else { + Cesium.Color.clone(pickedFeature.color, selected.originalColor); + } + + // Highlight newly selected feature + pickedFeature.color = Cesium.Color.WHITE; + + // Set feature infobox description + var featureName = pickedFeature.getProperty('name'); + selectedEntity.name = featureName; + selectedEntity.description = 'Loading
'; + viewer.selectedEntity = selectedEntity; + selectedEntity.description = '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '
Bld function' + pickedFeature.getProperty('Function') + '
gmlID' + pickedFeature.getProperty('gmlIDStr') + '
Dachgeschossausbau' + pickedFeature.getProperty('dachgeschossausbau') + '
Lon' + pickedFeature.getProperty('Longitude') + '
Lat' + pickedFeature.getProperty('Latitude') + '
Geschossflaeche (sqm)' + pickedFeature.getProperty('geschossflaeche') + '
YearOfConstruction' + pickedFeature.getProperty('YearOfConstruction') + '
MeasuredHeight (m):' + pickedFeature.getProperty('MeasuredHeight') + '
HoeheFirst (m)' + pickedFeature.getProperty('hoeheFirst') + '
HoeheTrauf (m)' + pickedFeature.getProperty('hoeheTrauf') + '
Grundflaeche (sqm)' + pickedFeature.getProperty('grundflaeche') + '
StoreysAboveGround: ' + pickedFeature.getProperty('StoreysAboveGround') + '
StoreysBelowGround: ' + pickedFeature.getProperty('StoreysBelowGround') + '
Durchfahrtsstr.: ' + pickedFeature.getProperty('ThoroughfareName') + '
Hausnummer.: ' + pickedFeature.getProperty('ThoroughfareNumber') + '
'; +}, Cesium.ScreenSpaceEventType.LEFT_CLICK); + + 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; + } + }, Cesium.ScreenSpaceEventType.MIDDLE_CLICK); + + + + /* + return Cesium.when(tileset.readyPromise).then(function (tileset) { + tileset.style = new Cesium.Cesium3DTileStyle({ + + color: { + + conditions: [ + + + ["${Latitude} >= 48.8170", "color('purple', 0.5)"], + + ["${Latitude} >= 48.7950", "color('red')"], + + ["${Latitude} >= 48.7830", "color('orange')"], + + ["${Latitude} >= 48.7710", "color('yellow')"], + + ["${Latitude} >= 48.7690", "color('lime')"], + + ["${Latitude} >= 48.7570", "color('cyan')"], + + ["${Latitude} >= 48.7470", "color('CORNFLOWERBLUE')"], + + ["${Latitude} >= 48.7370", "color('DARKMAGENTA')"], + + ["true", "color('lightblue')"] + + ] + + } + + }); + }); +*/ + +function showLegend() { + $("#legend").css("display", "block"); +} +function hideLegend() { + $("#legend").css("display", "none"); +} + +// Legend - Colour Table +function emptyColourTable() { + $(".inner").empty(); +} + +/* +function setHeightTable() { + $(".inner").append( "" + + "" + + "" + + "" + + "" + + "" + + "" + + "" + + "
     113007
113001
112996
112991
112986
112981
112976
" ); +} +*/ + +/* +function setHeightTable() { + $(".inner").append( "" + + "" + + "" + + "" + + "
     x
y
z
" ); +} +*/ + + +function setHeightTable() { + $(".inner").append( "" + + "" + + "" + + "" + + "" + + "" + + "" + + "
     >30
24
18
12
6
0
" ); +} + + // return Cesium.when(target_tileset.readyPromise).then(function (target_tileset) { + // target_tileset.style = new Cesium.Cesium3DTileStyle({ + + // color: "color('black',1)", + + // /*color: { + + // conditions: [ + + + + // ['Number(${MeasuredHeight}) >= 40', 'rgb(255,0,0)'], + + // ['Number(${MeasuredHeight}) >= 30.', 'rgb(255, 93 , 0)'], + + // ['Number(${MeasuredHeight}) >= 25', 'rgb(255, 180, 0)'], + + // ['Number(${MeasuredHeight}) >= 20', 'rgb(255,255,0)'], + + // ['Number(${MeasuredHeight}) >= 15', 'rgb(0,255,0)'], + + // ['Number(${MeasuredHeight}) >= 10', 'rgb(0,0,255)'], + + // ['Number(${MeasuredHeight}) >= 7.5', 'rgb(75, 0, 130)'], + + // ['Number(${MeasuredHeight}) >= 4', 'rgb(248, 100, 221)'], + + // ['Number(${MeasuredHeight}) >= 0.1', 'rgb(248, 100, 221)'], + + // ['true', 'color("lightblue")'] + + // ] + + // } + // */ + + // }); + // showLegend(); + // setHeightTable(); + // }); + + /* + return Cesium.when(tileset.readyPromise).then(function (tileset) { + tileset.style = new Cesium.Cesium3DTileStyle({ + + color: { + + conditions: [ + + ['Number(${YearOfConstruction}) >= 2015', 'rgb(127,201,127)'], + + ['Number(${YearOfConstruction}) >= 2005', 'rgb(190,174,212)'], + + ['Number(${YearOfConstruction}) >= 1990', 'rgb(253,192,134)'], + + ['Number(${YearOfConstruction}) >= 1975', 'rgb(255,255,153)'], + + ['Number(${YearOfConstruction}) >= 1950', 'rgb(56,108,176)'], + + ['Number(${YearOfConstruction}) >= 1920', 'rgb(240,2,127)'], + + ['Number(${YearOfConstruction}) >= 1900', 'rgb(191,91,23)'], + + ['Number(${YearOfConstruction}) >= 1800', 'rgb(102,102,102)'], + + ['true', 'color("lightblue")'] + + ] + + } + + }); + }); */ + +}); \ No newline at end of file diff --git a/public/Kirchturm2.html b/public/Kirchturm2.html new file mode 100644 index 0000000000000000000000000000000000000000..21ecffa8d07136bec8af74c397e7d87ef42939f3 --- /dev/null +++ b/public/Kirchturm2.html @@ -0,0 +1,66 @@ + + + + + + + + + + + Stuttgart + + + + + + + + + + + + + +
+ +

TP2.4 - Prototyp 5: Webbasierte Visualisierung von CFD Simulationsdaten

+ + +
+ + +
+ +
+ + + + + + + + + +
Wind speed (m/s)
- 3.5

+

- 0 +

+
+ +
+ + + + + + + + \ No newline at end of file diff --git a/public/Kirchturm2.js b/public/Kirchturm2.js new file mode 100644 index 0000000000000000000000000000000000000000..3bfcb4cb8edf7c6549c293bbb464f9b380a55e69 --- /dev/null +++ b/public/Kirchturm2.js @@ -0,0 +1,940 @@ +$(function () { + Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ODI4ZTYyZS1mMTg2LTQ5NGEtYjdiOS02ODg2NzVhNjc0MTAiLCJpZCI6MjkwNCwiaWF0IjoxNTM1MTA5OTAzfQ.kyDX_0ScvJBkYnvXI0DW5NfZbiaRL5ezwtAUhxYnk1Y'; + + var imageryViewModels = []; + imageryViewModels.push(new Cesium.ProviderViewModel({ + name: 'Sentinel-2', + iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/sentinel-2.png'), + tooltip: 'Sentinel-2 cloudless.', + creationFunction: function () { + return new Cesium.IonImageryProvider({ assetId: 3954 }); + } + })); + + imageryViewModels.push(new Cesium.ProviderViewModel({ + name: 'Blue Marble', + iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/blueMarble.png'), + tooltip: 'Blue Marble Next Generation July, 2004 imagery from NASA.', + creationFunction: function () { + return new Cesium.IonImageryProvider({ assetId: 3845 }); + } + })); + + var viewer = new Cesium.Viewer('cesiumContainer', + { + imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 }), + + terrainProvider : new Cesium.CesiumTerrainProvider({ + url: Cesium.IonResource.fromAssetId(1) + }), + scene3DOnly: false, + shouldAnimate: true, + animation: true, + infoBox: true, + baseLayerPicker: true, + fullscreenButton: false, + timeline: false, + navigationHelpButton: true, + navigationInstructionsInitiallyVisible: false, + homeButton: false, + selectionIndicator: true, + geocoder: true, + // imageryProviderViewModels: imageryViewModels + }); + + var layer = viewer.imageryLayers.addImageryProvider( + new Cesium.IonImageryProvider({ assetId: 2 }) + ); + + // var imageryLayer = viewer.imageryLayers.addImageryProvider( + // new Cesium.IonImageryProvider({ assetId: 3954 }) + // ); + + + var canvas = viewer.canvas; + canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas + canvas.addEventListener('click', function() { + canvas.focus(); + }); + canvas.focus(); + var scene = viewer.scene; + + var osmBuildings = viewer.scene.primitives.add( + new Cesium.Cesium3DTileset({ + url: Cesium.IonResource.fromAssetId(96188), + }) + ); + + + + const buildingHeightOffset = 60; //53 + + + ///////////////////// STOECKACH LOD 1 + + // var stoeckach = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ + // url: 'buildingTiles/StoeckachLOD1/tileset.json', + // show: true + // })); + + + + // stoeckach.readyPromise.then(function (stoeckach) { + + // var R = 0; // roll + // var P = 0; // pitch + // var Yaw = 0; // yaw + // var height = buildingHeightOffset; + // var cartographic = Cesium.Cartographic.fromCartesian(stoeckach.boundingSphere.center); + // var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); + // var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); + // var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); + + // //var rotMat = new Cesium.Matrix3(); + // var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); + + // stoeckach.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); + + + // return zoomAll(stoeckach); + // }); + + // stoeckach.readyPromise.then(function(stoeckach){ + // stoeckach.style = new Cesium.Cesium3DTileStyle({ + // color: "color('white',0.5)", + // }) + // }); + + + + ///////////////////////////// Target ////////////////////////// + + var target_tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ + url: 'buildingTiles/circularTiles/target_black/tileset.json', + show: true + })); + + + + target_tileset.readyPromise.then(function (target_tileset) { + + var R = 0; // roll + var P = 0; // pitch + var Yaw = 0; // yaw + var height = buildingHeightOffset; + var cartographic = Cesium.Cartographic.fromCartesian(target_tileset.boundingSphere.center); + var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); + var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); + var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); + + //var rotMat = new Cesium.Matrix3(); + var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); + + target_tileset.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); + + + return zoomAll(target_tileset); + }); + + target_tileset.readyPromise.then(function(target_tileset){ + target_tileset.style = new Cesium.Cesium3DTileStyle({ + color: "color('black',0.5)", + }) + }); + + + + + ///////////////////////////// Layer one ////////////////////////// + + var L1 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ + url: 'buildingTiles/circularTiles/L1_yellow/tileset.json', + show: true, + + })); + + L1.readyPromise.then(function (L1) { + return zoomAll(L1); + }); + + L1.readyPromise.then(function (L1) { + + var R = 0; // roll + var P = 0; // pitch + var Yaw = 0; // yaw + var height = buildingHeightOffset; + var cartographic = Cesium.Cartographic.fromCartesian(L1.boundingSphere.center); + var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); + var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); + var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); + + //var rotMat = new Cesium.Matrix3(); + var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); + + L1.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); + + return zoomAll(L1); + }); + + + L1.readyPromise.then(function(L1){ + L1.style = new Cesium.Cesium3DTileStyle({ + color: "color('yellow',1)", + }) + }); + + ///////////////////////////// Layer 2 ////////////////////////// + + var L2 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ + url: 'buildingTiles/circularTiles/L2_red/tileset.json', + show: true, + + })); + + L2.readyPromise.then(function (L2) { + return zoomAll(L2); + }); + + L2.readyPromise.then(function (L2) { + + var R = 0; // roll + var P = 0; // pitch + var Yaw = 0; // yaw + var height = buildingHeightOffset; + var cartographic = Cesium.Cartographic.fromCartesian(L2.boundingSphere.center); + var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); + var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); + var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); + + //var rotMat = new Cesium.Matrix3(); + var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); + + L2.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); + + return zoomAll(L2); + }); + + + L2.readyPromise.then(function(L2){ + L2.style = new Cesium.Cesium3DTileStyle({ + color: "color('red',1)", + }) + }); + + + ///////////////////////////// Layer 3 ////////////////////////// + + var L3 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ + url: 'buildingTiles/circularTiles/L3_green/tileset.json', + show: true, + + })); + + L3.readyPromise.then(function (L3) { + return zoomAll(L3); + }); + + L3.readyPromise.then(function (L3) { + + var R = 0; // roll + var P = 0; // pitch + var Yaw = 0; // yaw + var height = buildingHeightOffset; + var cartographic = Cesium.Cartographic.fromCartesian(L3.boundingSphere.center); + var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); + var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); + var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); + + //var rotMat = new Cesium.Matrix3(); + var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); + + L3.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); + + return zoomAll(L3); + }); + + + L3.readyPromise.then(function(L3){ + L3.style = new Cesium.Cesium3DTileStyle({ + color: "color('green',1)", + }) + }); + + + ///////////////////////////// Layer 3 ////////////////////////// + + var L4 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ + url: 'buildingTiles/circularTiles/L4_brown/tileset.json', + show: true, + + })); + + L4.readyPromise.then(function (L4) { + return zoomAll(L4); + }); + + L4.readyPromise.then(function (L4) { + + var R = 0; // roll + var P = 0; // pitch + var Yaw = 0; // yaw + var height = buildingHeightOffset; + var cartographic = Cesium.Cartographic.fromCartesian(L4.boundingSphere.center); + var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); + var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); + var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); + + //var rotMat = new Cesium.Matrix3(); + var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); + + L4.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); + + return zoomAll(L4); + }); + + + L4.readyPromise.then(function(L4){ + L4.style = new Cesium.Cesium3DTileStyle({ + color: "color('CORAL',1)", + }) + }); + + + var camera = viewer.camera; + var controller = scene.screenSpaceCameraController; + var r = 0; + var center = new Cesium.Cartesian3(); + + var hpRoll = new Cesium.HeadingPitchRoll(); + var hpRange = new Cesium.HeadingPitchRange(); + var speed = 0.1; + var deltaRadians = Cesium.Math.toRadians(3.0); + + var position = Cesium.Cartesian3.fromDegrees(9.190471, 48.786782, 0.0); + var speedVector = new Cesium.Cartesian3(); + var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west'); + + + + viewer.scene.globe.enableLighting = true; // set lighting to true + + + var zoomAll = function (tileset) { + return new Promise(function (resolve, reject) { + if (!tileset) { reject("Tileset is undifined"); } + viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 1500)); + viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); + resolve(); + }); + } + + +////////////////////////////////////////// +////////////////////////////////////////// + // load streamline data from text file and parse it to polyline with multiple colors. + + var pos = []; + var cols = []; + var streamID = []; + var Velocity = []; + var pt_to_pt_dist = []; + var avgVelocity = []; + + + function get_date_time_dt(deltaTime) { + // deltaTime should be given in SECONDS and is then converted to milliseconds + // set deltaTime to 0 if you want to get current date and time + // set to +60000 to get date and time of 60 seconds = 60000 milliseconds in the future + + return (currentdate = new Date( + new Date().getTime() + deltaTime * 1000 + ).toISOString()); + } + + d3.dsv(",", "results/Kirchturm2.csv").then(function (text) { + const particleDuration = 70; // units in seconds the particle / point should take to move from start to finish + //define the czml structure + var particle_czml = [ + { + id: "document", + name: "CZML Point - Time Dynamic", + version: "1.0", + clock: { + interval: get_date_time_dt(0) + "/" + get_date_time_dt(particleDuration), // This is the time range of our simulation + currentTime: '', // This is the time associated with the start view + currentTime: get_date_time_dt(0), + multiplier: 5, + // range: 'LOOP_STOP', + } + }, + { + id: "point", + availability: get_date_time_dt(0) + "/" + get_date_time_dt(particleDuration), + position: { + epoch: get_date_time_dt(0), + cartographicDegrees: [ + // use 4 coordinates / values : (t,x,y,z) or rather (t,lon,lat,alt) + ], + //"interpolationAlgorithm": "LAGRANGE", + //"interpolationDegree": 1 + }, + point: { + color: { + rgba: [0, 0, 0, 250], + }, + outlineColor: { + rgba: [255, 0, 0, 128], + }, + outlineWidth: 1, + pixelSize: 6, + }, + }, + ]; + ////////////////////////////////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////// + let package_time_faktor = 6.0; + + // create an array of deep copies of the original czml data structure, to be modified below. + let czmlArr = []; + for (c=0; c < package_time_faktor; c++){ + czmlArr.push(JSON.parse(JSON.stringify(particle_czml))); + czmlArr[c][1].id = "point_arr_" + String(c); + } + + + + var temp = text; + for (var i = 0; i < temp.length; i++) { + // use i+=7 when parsed as d3.text(...) + pos.push([ + parseFloat(text[i].x), + parseFloat(text[i].y), + parseFloat(text[i].z), + ]); + cols.push([ + parseInt(text[i].R), + parseInt(text[i].G), + parseInt(text[i].B), + ]); + streamID.push(parseInt(text[i].ID)); + Velocity.push(parseFloat(text[i].velocity)); + avgVelocity.push(parseFloat(text[i].AverageVelocity)); + pt_to_pt_dist.push(parseFloat(text[i].pt_to_pt_dist)); + // use these lines if parsed as text. i.e. using d3.text(...) + //pos.push([parseFloat(temp[i+0]), parseFloat(temp[i+1]), parseFloat(temp[i+2])]); + //colors.push([parseFloat(temp[i+3]),parseFloat(temp[i+4]),parseFloat(temp[i+5])]) + //streamID.push([parseFloat(temp[i+6])]); + } + + const maxID = streamID.reduce(function (a, b) { + return Math.max(a, b); + }); + + //find out the unique ids within the streamID array + const uniqueStreamID = Array.from(new Set(streamID)); // const uniqueStreamID = [...new Set(streamID)]; // same can be done with spread operator + + //get index of each unique id, first element of those + let sIDidx = []; + for (var i = 0; i <= maxID; i++) { + var tmpIdx = streamID.indexOf(i); + if (tmpIdx !== -1) sIDidx.push(tmpIdx); + } + + ///////////////////////////////////////////////// + // Create and draw a polyline with per vertex colors + ///////////////////////////////////////////////// + const heightOffset = 70; + + for (var line = 0; line < uniqueStreamID.length; line++) { + let positions = []; + let positionsInDegrees = []; + let colors = []; + let individual_particle_velo = []; + let individual_particle_pt_distance = []; + let individual_particle_avg_velo = []; + + curr_pos = sIDidx[line]; + + for (i = curr_pos; i < streamID.length; ++i) { + if (line === streamID[i]){ + positions.push( + Cesium.Cartesian3.fromDegrees( + pos[i][0], + pos[i][1], + pos[i][2] + heightOffset + ) + ); + positionsInDegrees.push([ + pos[i][0], + pos[i][1], + pos[i][2] + heightOffset, + ]); + colors.push( + Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 180) + ); + individual_particle_avg_velo.push(avgVelocity[i]); + individual_particle_pt_distance.push(pt_to_pt_dist[i]); + individual_particle_velo.push(Velocity[i]); + } // if end brace + } + // For per segment coloring, supply the colors option with + // an array of colors for each vertex. Also set the + // colorsPerVertex option to true. + viewer.scene.primitives.add( + new Cesium.Primitive({ + geometryInstances: new Cesium.GeometryInstance({ + geometry: new Cesium.PolylineGeometry({ + positions: positions, + width: 5.0, + vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT, + colors: colors, + colorsPerVertex: true, + }), + }), + appearance: new Cesium.PolylineColorAppearance(), + }) + ); + + //////////////////////////////////////////////// + // Create and prepare particles for movement + ///////////////////////////////////////////////// + let streamDist = individual_particle_pt_distance.reduce(function (a, b) { + return a + b; + }, 0); + // console.log(streamDist); + + let t = 0; + let dt = (individual_particle_pt_distance[1] / individual_particle_avg_velo[0]) / 20; + // let dt = streamDist / individual_particle_avg_velo[0] / 500; + + ///////////////////////////////////// + var temp_pos = []; + for (i = 0; i < positionsInDegrees.length; i++) { + if (i === 0) { + temp_pos.push( + 0, + positionsInDegrees[i][0], + positionsInDegrees[i][1], + positionsInDegrees[i][2] + ); + } else { + temp_pos.push( + t, + positionsInDegrees[i][0], + positionsInDegrees[i][1], + positionsInDegrees[i][2] + ); + dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[0] / 20; // avg_velo is always the same per streamline + // console.log(individual_particle_pt_distance[i] + "/" + individual_particle_avg_velo[i] ); + // console.log(dt); + } + t += dt; + } + particle_czml[1].id = "point" + String(line); + particle_czml[1].position.cartographicDegrees = temp_pos; + viewer.dataSources.add(Cesium.CzmlDataSource.load(particle_czml)); + + //////////////////////////////////////////////// + dt = (individual_particle_pt_distance[1] / individual_particle_avg_velo[0]) / 20; + for (c=0; c < czmlArr.length ; c++){ + + temp_pos = []; + for (i = 0; i < positionsInDegrees.length; i++) { + if (i === 0) { + temp_pos.push( + t, + positionsInDegrees[i][0], + positionsInDegrees[i][1], + positionsInDegrees[i][2] + ); + } else { + temp_pos.push( + t, + positionsInDegrees[i][0], + positionsInDegrees[i][1], + positionsInDegrees[i][2] + ); + dt = individual_particle_pt_distance[i] /individual_particle_avg_velo[0] / 20; + // console.log(individual_particle_pt_distance[i] + "/" + individual_particle_avg_velo[i] ); + // console.log(dt); + } + + t += dt; + } + czmlArr[c][1].position.cartographicDegrees = temp_pos; + czmlArr[c][1].id = "point_set_" + String(c) + "_" + String(line); + czmlArr[c][1].position.epoch = get_date_time_dt(0); + viewer.dataSources.add(Cesium.CzmlDataSource.load(czmlArr[c])); + } + + + } // end bracket for: for (var line = 0; line < uniqueStreamID.length; line++) { + + + }); // end bracket for: d3.dsv(...).then(... + // 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'; + + // 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 (Cesium.defined(selected.feature)) { + selected.feature.color = selected.originalColor; + selected.feature = undefined; + } + + // Pick a new feature + var pickedFeature = viewer.scene.pick(movement.position); + if (!Cesium.defined(pickedFeature)) { + clickHandler(movement); + return; + } + + // Select the feature if it's not already selected + if (selected.feature === pickedFeature) { + return; + } + selected.feature = pickedFeature; + + // Save the selected feature's original color + if (pickedFeature === highlighted.feature) { + Cesium.Color.clone(highlighted.originalColor, selected.originalColor); + highlighted.feature = undefined; + } else { + Cesium.Color.clone(pickedFeature.color, selected.originalColor); + } + + // Highlight newly selected feature + pickedFeature.color = Cesium.Color.WHITE; + + // Set feature infobox description + var featureName = pickedFeature.getProperty('name'); + selectedEntity.name = featureName; + selectedEntity.description = 'Loading
'; + viewer.selectedEntity = selectedEntity; + selectedEntity.description = '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '
Bld function' + pickedFeature.getProperty('Function') + '
gmlID' + pickedFeature.getProperty('gmlIDStr') + '
Dachgeschossausbau' + pickedFeature.getProperty('dachgeschossausbau') + '
Lon' + pickedFeature.getProperty('Longitude') + '
Lat' + pickedFeature.getProperty('Latitude') + '
Geschossflaeche (sqm)' + pickedFeature.getProperty('geschossflaeche') + '
YearOfConstruction' + pickedFeature.getProperty('YearOfConstruction') + '
MeasuredHeight (m):' + pickedFeature.getProperty('MeasuredHeight') + '
HoeheFirst (m)' + pickedFeature.getProperty('hoeheFirst') + '
HoeheTrauf (m)' + pickedFeature.getProperty('hoeheTrauf') + '
Grundflaeche (sqm)' + pickedFeature.getProperty('grundflaeche') + '
StoreysAboveGround: ' + pickedFeature.getProperty('StoreysAboveGround') + '
StoreysBelowGround: ' + pickedFeature.getProperty('StoreysBelowGround') + '
Durchfahrtsstr.: ' + pickedFeature.getProperty('ThoroughfareName') + '
Hausnummer.: ' + pickedFeature.getProperty('ThoroughfareNumber') + '
'; +}, Cesium.ScreenSpaceEventType.LEFT_CLICK); + + 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; + } + }, Cesium.ScreenSpaceEventType.MIDDLE_CLICK); + + + + /* + return Cesium.when(tileset.readyPromise).then(function (tileset) { + tileset.style = new Cesium.Cesium3DTileStyle({ + + color: { + + conditions: [ + + + ["${Latitude} >= 48.8170", "color('purple', 0.5)"], + + ["${Latitude} >= 48.7950", "color('red')"], + + ["${Latitude} >= 48.7830", "color('orange')"], + + ["${Latitude} >= 48.7710", "color('yellow')"], + + ["${Latitude} >= 48.7690", "color('lime')"], + + ["${Latitude} >= 48.7570", "color('cyan')"], + + ["${Latitude} >= 48.7470", "color('CORNFLOWERBLUE')"], + + ["${Latitude} >= 48.7370", "color('DARKMAGENTA')"], + + ["true", "color('lightblue')"] + + ] + + } + + }); + }); +*/ + +function showLegend() { + $("#legend").css("display", "block"); +} +function hideLegend() { + $("#legend").css("display", "none"); +} + +// Legend - Colour Table +function emptyColourTable() { + $(".inner").empty(); +} + +/* +function setHeightTable() { + $(".inner").append( "" + + "" + + "" + + "" + + "" + + "" + + "" + + "" + + "
     113007
113001
112996
112991
112986
112981
112976
" ); +} +*/ + +/* +function setHeightTable() { + $(".inner").append( "" + + "" + + "" + + "" + + "
     x
y
z
" ); +} +*/ + + +function setHeightTable() { + $(".inner").append( "" + + "" + + "" + + "" + + "" + + "" + + "" + + "
     >30
24
18
12
6
0
" ); +} + + // return Cesium.when(target_tileset.readyPromise).then(function (target_tileset) { + // target_tileset.style = new Cesium.Cesium3DTileStyle({ + + // color: "color('black',1)", + + // /*color: { + + // conditions: [ + + + + // ['Number(${MeasuredHeight}) >= 40', 'rgb(255,0,0)'], + + // ['Number(${MeasuredHeight}) >= 30.', 'rgb(255, 93 , 0)'], + + // ['Number(${MeasuredHeight}) >= 25', 'rgb(255, 180, 0)'], + + // ['Number(${MeasuredHeight}) >= 20', 'rgb(255,255,0)'], + + // ['Number(${MeasuredHeight}) >= 15', 'rgb(0,255,0)'], + + // ['Number(${MeasuredHeight}) >= 10', 'rgb(0,0,255)'], + + // ['Number(${MeasuredHeight}) >= 7.5', 'rgb(75, 0, 130)'], + + // ['Number(${MeasuredHeight}) >= 4', 'rgb(248, 100, 221)'], + + // ['Number(${MeasuredHeight}) >= 0.1', 'rgb(248, 100, 221)'], + + // ['true', 'color("lightblue")'] + + // ] + + // } + // */ + + // }); + // showLegend(); + // setHeightTable(); + // }); + + /* + return Cesium.when(tileset.readyPromise).then(function (tileset) { + tileset.style = new Cesium.Cesium3DTileStyle({ + + color: { + + conditions: [ + + ['Number(${YearOfConstruction}) >= 2015', 'rgb(127,201,127)'], + + ['Number(${YearOfConstruction}) >= 2005', 'rgb(190,174,212)'], + + ['Number(${YearOfConstruction}) >= 1990', 'rgb(253,192,134)'], + + ['Number(${YearOfConstruction}) >= 1975', 'rgb(255,255,153)'], + + ['Number(${YearOfConstruction}) >= 1950', 'rgb(56,108,176)'], + + ['Number(${YearOfConstruction}) >= 1920', 'rgb(240,2,127)'], + + ['Number(${YearOfConstruction}) >= 1900', 'rgb(191,91,23)'], + + ['Number(${YearOfConstruction}) >= 1800', 'rgb(102,102,102)'], + + ['true', 'color("lightblue")'] + + ] + + } + + }); + }); */ + +}); \ No newline at end of file diff --git a/public/index.html b/public/index.html index e017b821bcb15943267b422afc71aa8e95e7f1e6..e3494719292eae3cadd84ea0a7fc7e2c18331ee7 100644 --- a/public/index.html +++ b/public/index.html @@ -264,6 +264,72 @@ +
+
+
Kirchturm Stoeckach
+ + +
+

Wind visualization around a church tower in Stoeckach, Stuttgart

+ +
+
+
+ +
+
+
+
+ + + + + + + +
+
+ +
+
+
+
Kirchturm Stoeckach (Partikel), ver 1
+ + +
+

Wind visualization with particles around a church tower in Stoeckach, Stuttgart

+ +
+
+
+ +
+
+
+
+
+
+
Kirchturm Stoeckach Version 2
+ + +
+

Wind visualization with particles around a church tower in Stoeckach, Stuttgart

+ +
+
+
+ +
+
+
+
+
Under construction
@@ -286,7 +352,6 @@
-