diff --git a/public/circData.js b/public/circData.js index b14fd9f3c6c834cc6399ab0e4ab919eacc677232..0050362fc68f4a90a7ce1421eca09e0d9a5ba380 100644 --- a/public/circData.js +++ b/public/circData.js @@ -1,613 +1,802 @@ -$(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 ////////////////////////// +$(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; + + + + + +// viewer.scene.globe.depthTestAgainstTerrain = false; + +// var osmBuildings = Cesium.createOsmBuildings(); +// osmBuildings.readyPromise +// .then(function (osmBuildings) { +// viewer.scene.primitives.add(osmBuildings); +// }) +// .otherwise(function (error) { +// console.log(error); +// }); + +// osmBuildings.readyPromise.then(function (osmBuildings) { +// var height = 60; +// var cartographic = Cesium.Cartographic.fromCartesian( +// osmBuildings.boundingSphere.center +// ); +// var surface = Cesium.Cartesian3.fromRadians( +// cartographic.longitude, +// cartographic.latitude, +// 0.0 +// ); +// var offset = Cesium.Cartesian3.fromRadians( +// cartographic.longitude, +// cartographic.latitude, +// height +// ); +// var translation = Cesium.Cartesian3.subtract( +// offset, +// surface, +// new Cesium.Cartesian3() +// ); + +// osmBuildings.modelMatrix = Cesium.Matrix4.fromTranslation(translation); + +// }); + + // viewer.terrainProvider = new Cesium.CesiumTerrainProvider({ + // url: Cesium.IonResource.fromAssetId(1) + // }) + + const buildingHeightOffset = 60; //53 + + + + +// -------------------------------------------------------------------- +var relativeHeight = 0.0; +var scale = 1.5 + +function getEastNorthUpTransform(tileset, relativeHeight) { + var origin = tileset.boundingSphere.center; + var cartographic = Cesium.Cartographic.fromCartesian(origin); + cartographic.height = relativeHeight; + origin = Cesium.Cartographic.toCartesian(cartographic); + var enu = Cesium.Transforms.eastNorthUpToFixedFrame(origin); + return enu; +} - var L3 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ - url: 'buildingTiles/circularTiles/L3_green/tileset.json', - show: true, - - })); +function getScaleTransform(tileset, scale, relativeHeight) { + var toGlobal = getEastNorthUpTransform(tileset, relativeHeight); + var toLocal = Cesium.Matrix4.inverse(toGlobal, new Cesium.Matrix4()); + var localScale = new Cesium.Cartesian3(scale, scale, scale); + var localScaleMatrix = Cesium.Matrix4.fromScale(localScale); + var transform = Cesium.Matrix4.multiply(toGlobal, Cesium.Matrix4.multiply(localScaleMatrix, toLocal, new Cesium.Matrix4()), new Cesium.Matrix4()); + return transform; +} - L3.readyPromise.then(function (L3) { - return zoomAll(L3); - }); - L3.readyPromise.then(function (L3) { + +////////////////////////////////////////////////////////////////////// + + + + ///////////////////////////// Target ////////////////////////// + + var target_tileset = viewer.scene.primitives.add( + new Cesium.Cesium3DTileset({ + url: "buildingTiles/circularTiles/target_black/tileset.json", + show: true, + }) + ); + + target_tileset.readyPromise.then(function (target_tileset) { + + var height = buildingHeightOffset; + var cartographic = Cesium.Cartographic.fromCartesian( + target_tileset.boundingSphere.center + ); + var surface = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + 0.0 + ); + var offset = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + height + ); + var translation = Cesium.Cartesian3.subtract( + offset, + surface, + new Cesium.Cartesian3() + ); + + + target_tileset.modelMatrix = Cesium.Matrix4.fromTranslation( + translation + ); + + + }); + + target_tileset.readyPromise.then(function (target_tileset) { + target_tileset.style = new Cesium.Cesium3DTileStyle({ + color: "color('black',0.5)", + }); + }); + +// target_tileset.root.transform = getScaleTransform(target_tileset, scale, relativeHeight); + + ///////////////////////////// Layer one ////////////////////////// + + var L1 = viewer.scene.primitives.add( + new Cesium.Cesium3DTileset({ + url: "buildingTiles/circularTiles/L1_yellow/tileset.json", + show: true, + }) + ); + + L1.readyPromise.then(function (L1) { + return zoomAll(L1); + }); + + L1.readyPromise.then(function (L1) { + var R = 0; // roll + var P = 0; // pitch + var Yaw = 0; // yaw + var height = buildingHeightOffset; + var cartographic = Cesium.Cartographic.fromCartesian( + L1.boundingSphere.center + ); + var surface = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + 0.0 + ); + var offset = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + height + ); + var translation = Cesium.Cartesian3.subtract( + offset, + surface, + new Cesium.Cartesian3() + ); + + //var rotMat = new Cesium.Matrix3(); + var rotation = new Cesium.Matrix3.fromHeadingPitchRoll( + new Cesium.HeadingPitchRoll(Yaw, P, R) + ); + + L1.modelMatrix = Cesium.Matrix4.fromRotationTranslation( + rotation, + translation + ); + + return zoomAll(L1); + }); + + L1.readyPromise.then(function (L1) { + L1.style = new Cesium.Cesium3DTileStyle({ + color: "color('yellow',1)", + }); + }); + + ///////////////////////////// Layer 2 ////////////////////////// + + var L2 = viewer.scene.primitives.add( + new Cesium.Cesium3DTileset({ + url: "buildingTiles/circularTiles/L2_red/tileset.json", + show: true, + }) + ); + + L2.readyPromise.then(function (L2) { + return zoomAll(L2); + }); + + L2.readyPromise.then(function (L2) { + var R = 0; // roll + var P = 0; // pitch + var Yaw = 0; // yaw + var height = buildingHeightOffset; + var cartographic = Cesium.Cartographic.fromCartesian( + L2.boundingSphere.center + ); + var surface = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + 0.0 + ); + var offset = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + height + ); + var translation = Cesium.Cartesian3.subtract( + offset, + surface, + new Cesium.Cartesian3() + ); + + //var rotMat = new Cesium.Matrix3(); + var rotation = new Cesium.Matrix3.fromHeadingPitchRoll( + new Cesium.HeadingPitchRoll(Yaw, P, R) + ); + + L2.modelMatrix = Cesium.Matrix4.fromRotationTranslation( + rotation, + translation + ); + + return zoomAll(L2); + }); + + L2.readyPromise.then(function (L2) { + L2.style = new Cesium.Cesium3DTileStyle({ + color: "color('red',1)", + }); + }); + + ///////////////////////////// Layer 3 ////////////////////////// + + var L3 = viewer.scene.primitives.add( + new Cesium.Cesium3DTileset({ + url: "buildingTiles/circularTiles/L3_green/tileset.json", + show: true, + }) + ); + + L3.readyPromise.then(function (L3) { + return zoomAll(L3); + }); + + L3.readyPromise.then(function (L3) { + var R = 0; // roll + var P = 0; // pitch + var Yaw = 0; // yaw + var height = buildingHeightOffset; + var cartographic = Cesium.Cartographic.fromCartesian( + L3.boundingSphere.center + ); + var surface = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + 0.0 + ); + var offset = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + height + ); + var translation = Cesium.Cartesian3.subtract( + offset, + surface, + new Cesium.Cartesian3() + ); + + //var rotMat = new Cesium.Matrix3(); + var rotation = new Cesium.Matrix3.fromHeadingPitchRoll( + new Cesium.HeadingPitchRoll(Yaw, P, R) + ); + + L3.modelMatrix = Cesium.Matrix4.fromRotationTranslation( + rotation, + translation + ); + + return zoomAll(L3); + }); + + L3.readyPromise.then(function (L3) { + L3.style = new Cesium.Cesium3DTileStyle({ + color: "color('green',1)", + }); + }); + + ///////////////////////////// Layer 3 ////////////////////////// + + var L4 = viewer.scene.primitives.add( + new Cesium.Cesium3DTileset({ + url: "buildingTiles/circularTiles/L4_brown/tileset.json", + show: true, + }) + ); + + L4.readyPromise.then(function (L4) { + return zoomAll(L4); + }); + + L4.readyPromise.then(function (L4) { + var R = 0; // roll + var P = 0; // pitch + var Yaw = 0; // yaw + var height = buildingHeightOffset; + var cartographic = Cesium.Cartographic.fromCartesian( + L4.boundingSphere.center + ); + var surface = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + 0.0 + ); + var offset = Cesium.Cartesian3.fromRadians( + cartographic.longitude, + cartographic.latitude, + height + ); + var translation = Cesium.Cartesian3.subtract( + offset, + surface, + new Cesium.Cartesian3() + ); + + //var rotMat = new Cesium.Matrix3(); + var rotation = new Cesium.Matrix3.fromHeadingPitchRoll( + new Cesium.HeadingPitchRoll(Yaw, P, R) + ); + + L4.modelMatrix = Cesium.Matrix4.fromRotationTranslation( + rotation, + translation + ); + + return zoomAll(L4); + }); + + L4.readyPromise.then(function (L4) { + L4.style = new Cesium.Cesium3DTileStyle({ + color: "color('CORAL',1)", + }); + }); + + var camera = viewer.camera; + var controller = scene.screenSpaceCameraController; + var r = 0; + var center = new Cesium.Cartesian3(); + + var hpRoll = new Cesium.HeadingPitchRoll(); + var hpRange = new Cesium.HeadingPitchRange(); + var speed = 0.1; + var deltaRadians = Cesium.Math.toRadians(3.0); + + var position = Cesium.Cartesian3.fromDegrees(9.190471, 48.786782, 0.0); + var speedVector = new Cesium.Cartesian3(); + var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator( + "north", + "west" + ); + + viewer.scene.globe.enableLighting = true; // set lighting to true + + var zoomAll = function (tileset) { + return new Promise(function (resolve, reject) { + if (!tileset) { + reject("Tileset is undifined"); + } + viewer.camera.viewBoundingSphere( + tileset.boundingSphere, + new Cesium.HeadingPitchRange(0, -0.5, 1500) + ); + viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); + resolve(); + }); + }; + + ///////////////// STOECKACH LOD 1 + + var stoeckach = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ + url: 'buildingTiles/StoeckachLOD1/tileset.json', + show: true +})); + +stoeckach.readyPromise.then(function (stoeckach) { - var R = 0; // roll - var P = 0; // pitch - var Yaw = 0; // yaw - var height = buildingHeightOffset; - var cartographic = Cesium.Cartographic.fromCartesian(L3.boundingSphere.center); - var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); - var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); - var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); - - //var rotMat = new Cesium.Matrix3(); - var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); - L3.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); - - return zoomAll(L3); - }); - - - L3.readyPromise.then(function(L3){ - L3.style = new Cesium.Cesium3DTileStyle({ - color: "color('green',1)", - }) - }); - + var height = buildingHeightOffset-1; + var cartographic = Cesium.Cartographic.fromCartesian(stoeckach.boundingSphere.center); + var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); + var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); + var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); - ///////////////////////////// Layer 3 ////////////////////////// + stoeckach.modelMatrix = Cesium.Matrix4.fromTranslation(translation); - var L4 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ - url: 'buildingTiles/circularTiles/L4_brown/tileset.json', - show: true, - - })); +}); - L4.readyPromise.then(function (L4) { - return zoomAll(L4); - }); +stoeckach.readyPromise.then(function(stoeckach){ + stoeckach.style = new Cesium.Cesium3DTileStyle({ + color: "color('white',1)", + }) +}); + + // load streamline data from text file and parse it to polyline with multiple colors. + + var pos = []; + var cols = []; + var streamID = []; + + // d3.dsv(",", "results/polylines_circularData.csv").then(function(text) { + d3.dsv(",", "results/Kirchturm1.csv").then(function (text) { + // console.log(text); // Hello, world! + // var temp = text.split(','); + + var temp = text; + for (var i = 0; i < temp.length; i++) { + // use i+=7 when parsed as d3.text(...) + pos.push([ + parseFloat(text[i].x), + parseFloat(text[i].y), + parseFloat(text[i].z), + ]); + cols.push([ + parseInt(text[i].R), + parseInt(text[i].G), + parseInt(text[i].B), + ]); + streamID.push(parseInt(text[i].ID)); + // use these lines if parsed as text. i.e. using d3.text(...) + //pos.push([parseFloat(temp[i+0]), parseFloat(temp[i+1]), parseFloat(temp[i+2])]); + //colors.push([parseFloat(temp[i+3]),parseFloat(temp[i+4]),parseFloat(temp[i+5])]) + //streamID.push([parseFloat(temp[i+6])]); + } - L4.readyPromise.then(function (L4) { + // const maxID = streamID.reduce(function(a, b) { + // return Math.max(a, b); + // }); + const maxID = text[text.length - 2].ID; + const StreamHeightOffset = 70; //120; - var R = 0; // roll - 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); - }); + //find out the unique ids within the streamID array + const uniqueStreamID = [...new Set(streamID)]; + //get index of each unique id, first element of those + let sIDidx = []; + for (var i = 0; i <= maxID; i++) { + var tmpIdx = streamID.indexOf(i); + if (tmpIdx !== -1) sIDidx.push(tmpIdx); + } - L4.readyPromise.then(function(L4){ - 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 = []; - -// d3.dsv(",", "results/polylines_circularData.csv").then(function(text) { -d3.dsv(",", "results/Kirchturm1.csv").then(function(text) { -// console.log(text); // Hello, world! - // var temp = text.split(','); - - var temp = text; - for(var i = 0; i < temp.length; i++) { // use i+=7 when parsed as d3.text(...) - pos.push([parseFloat(text[i].x), parseFloat(text[i].y), parseFloat(text[i].z)]); - cols.push([parseInt(text[i].R), parseInt(text[i].G), parseInt(text[i].B)]); - streamID.push(parseInt(text[i].ID)); - // use these lines if parsed as text. i.e. using d3.text(...) - //pos.push([parseFloat(temp[i+0]), parseFloat(temp[i+1]), parseFloat(temp[i+2])]); - //colors.push([parseFloat(temp[i+3]),parseFloat(temp[i+4]),parseFloat(temp[i+5])]) - //streamID.push([parseFloat(temp[i+6])]); - } - - // const maxID = streamID.reduce(function(a, b) { - // return Math.max(a, b); - // }); - const maxID = text[text.length-2].ID; - const StreamHeightOffset = 70; //120; - - //find out the unique ids within the streamID array - const uniqueStreamID = [...new Set(streamID)]; - - //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); - } - - - for (var line=1; line < uniqueStreamID.length; line++){ - // Create and draw a polyline with per vertex colors - positions = []; - colors = []; - for (i = sIDidx[line-1]; i < sIDidx[line]-1; ++i) { - positions.push(Cesium.Cartesian3.fromDegrees(pos[i][0],pos[i][1],pos[i][2]+StreamHeightOffset)); - colors.push(Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 80)); - - } - // For per segment coloring, supply the colors option with - // an array of colors for each vertex. Also set the - // colorsPerVertex option to true. - viewer.scene.primitives.add( - new Cesium.Primitive({ - geometryInstances: new Cesium.GeometryInstance({ - geometry: new Cesium.PolylineGeometry({ - positions: positions, - width: 10.0, - vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT, - colors: colors, - colorsPerVertex: true, - }), - }), - appearance: new Cesium.PolylineColorAppearance(), - }) - ); - } + for (var line = 1; line < uniqueStreamID.length; line++) { + // Create and draw a polyline with per vertex colors + positions = []; + colors = []; + for (i = sIDidx[line - 1]; i < sIDidx[line] - 1; ++i) { + positions.push( + Cesium.Cartesian3.fromDegrees( + pos[i][0], + pos[i][1], + pos[i][2] + StreamHeightOffset + ) + ); + colors.push( + Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 200) + ); + } + // For per segment coloring, supply the colors option with + // an array of colors for each vertex. Also set the + // colorsPerVertex option to true. + viewer.scene.primitives.add( + new Cesium.Primitive({ + geometryInstances: new Cesium.GeometryInstance({ + geometry: new Cesium.PolylineGeometry({ + positions: positions, + width: 10.0, + vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT, + colors: colors, + colorsPerVertex: true, + }), + }), + appearance: new Cesium.PolylineColorAppearance(), + }) + ); + } + }); + + // 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); - // 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) { + // 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; + 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; + clickHandler(movement); + return; } // Select the feature if it's not already selected if (selected.feature === pickedFeature) { - return; + 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; + Cesium.Color.clone(highlighted.originalColor, selected.originalColor); + highlighted.feature = undefined; } else { - Cesium.Color.clone(pickedFeature.color, selected.originalColor); + 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'); + var featureName = pickedFeature.getProperty("name"); selectedEntity.name = featureName; - selectedEntity.description = 'Loading
'; + 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') + ' |
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") + + " |
113007 |
x |
>30 | |
24 | |
18 | |
12 | |
6 | |
0 |
>30 | |
24 | |
18 | |
12 | |
6 | |
0 |
Wind visualization around a church tower in Stoeckach, Stuttgart
+Visualisation of wind around three target buildings (black) near a church with spire and surrounded by numerous building layers (colors). The streamlines results from a Computational Fluid Dynamic simulation of the air flow with RANS (Reynold-Averaged Navier Stokes Equations) and the k-omega SST Turbulence model.
Wind visualization with particles around a church tower in Stoeckach, Stuttgart
+Wind visualisation with particles around three target buildings (black) near a church with spire and surrounded by numerous building layers (colors). The streamlines results from a Computational Fluid Dynamic simulation of the air flow with RANS (Reynold-Averaged Navier Stokes Equations) and the k-omega SST Turbulence model.
Wind visualization with particles around a church tower in Stoeckach, Stuttgart
+Wind visualisation with particles around three target buildings (black) near a church with spire and surrounded by numerous building layers (colors). The streamlines results from a Computational Fluid Dynamic simulation of the air flow with RANS (Reynold-Averaged Navier Stokes Equations) and the k-omega SST Turbulence model.