new prototype complete. ciruclar colord buildings with new streamlines

public/TimeDynVortex.js

+$(function () {	
+	Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ODI4ZTYyZS1mMTg2LTQ5NGEtYjdiOS02ODg2NzVhNjc0MTAiLCJpZCI6MjkwNCwiaWF0IjoxNTM1MTA5OTAzfQ.kyDX_0ScvJBkYnvXI0DW5NfZbiaRL5ezwtAUhxYnk1Y';
+	var imageryViewModels = [];
+	imageryViewModels.push(new Cesium.ProviderViewModel({
+		name: 'Sentinel-2',
+		iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/sentinel-2.png'),
+		tooltip: 'Sentinel-2 cloudless.',
+		creationFunction: function () {
+			return new Cesium.IonImageryProvider({ assetId: 3954 });
+		}
+	}));
+	
+	imageryViewModels.push(new Cesium.ProviderViewModel({
+		name: 'Blue Marble',
+		iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/blueMarble.png'),
+		tooltip: 'Blue Marble Next Generation July, 2004 imagery from NASA.',
+		creationFunction: function () {
+			return new Cesium.IonImageryProvider({ assetId: 3845 });
+		}
+	}));
+
+    var viewer = new Cesium.Viewer('cesiumContainer',
+		{
+			imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 }),
+				
+			terrainProvider : new Cesium.CesiumTerrainProvider({
+					url: Cesium.IonResource.fromAssetId(1)
+				}),
+			scene3DOnly: false,
+			shouldAnimate: true,
+			animation: true,
+			infoBox: true,
+			baseLayerPicker: true,
+			fullscreenButton: false,
+			timeline: false,
+			navigationHelpButton: true,
+			navigationInstructionsInitiallyVisible: false,
+			homeButton: false,
+			selectionIndicator: true,
+			geocoder: true,
+			// imageryProviderViewModels: imageryViewModels
+		});
+
+		// var layer = viewer.imageryLayers.addImageryProvider(
+		// 	new Cesium.IonImageryProvider({ assetId: 3 })
+		// );
+
+		var imageryLayer = viewer.imageryLayers.addImageryProvider(
+			new Cesium.IonImageryProvider({ assetId: 3954 })
+		  );
+
+	var canvas = viewer.canvas;
+	canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
+	canvas.addEventListener('click', function() {
+		canvas.focus();
+	});
+	canvas.focus();
+	var scene = viewer.scene;
+
+	
+	var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({			
+		url: 'buildingTiles/StoeckachLOD1/tileset.json',		
+		show: true		
+	}));
+
+	tileset.readyPromise.then(function (tileset) {
+		return zoomAll(tileset);
+	});
+	
+
+	tileset.readyPromise.then(function (tileset) {
+
+		var R = 0;      // roll
+		var P = 0; 	 // pitch
+		var Yaw = 0;		 // yaw
+		var height =53;  
+		var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
+		var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
+		var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
+		var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());	
+		
+		//var rotMat = new Cesium.Matrix3();
+		var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R));
+		
+		tileset.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation);
+		
+		return zoomAll(tileset);
+	});
+	
+	
+
+	viewer.scene.globe.enableLighting = true; // set lighting to true
+
+	
+	var zoomAll = function (tileset) {
+		return new Promise(function (resolve, reject) {
+			if (!tileset) { reject("Tileset is undifined"); }
+			viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 1500));
+			viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+			resolve();
+		});
+	}
+
+
+
+//////////////////////////////////////////
+// load streamline data from text file and parse it to polyline with multiple colors.
+
+var pos=[];
+var cols = [];
+var streamID = [];
+
+d3.dsv(",", "results/polylines.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);
+	});
+
+	//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]+120));
+	  colors.push(Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 180));
+	
+	}
+	// 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(),
+	  })
+	);
+	}
+
+
+	})
+
+// var f = new File([""], "results/singlePolyline.csv", {type: "text/plain", lastModified: Date()})
+
+
+// var temp = text.split(',');
+//   for(var i = 0; i < temp.length; i+=6) {
+//     pos.push([parseFloat(temp[i+1]), parseFloat(temp[i+2]), parseFloat(temp[i+3])]);
+//     colors.push([parseInt(temp[i+4]),parseInt(temp[i+5]),parseInt(temp[i+6])])
+//   }
+
+
+console.log('Position data imported.');
+
+
+//// the following codes will actually generate multicolor polylines 
+/// just need a away to get the actual data into there...
+///
+///
+// for (var line=0; line < 10; line++){
+// 	// Example 2: Draw a polyline with per vertex colors
+// 	positions = [];
+// 	colors = [];
+// 	for (i = 0; i < 12; ++i) {
+// 	  positions.push(Cesium.Cartesian3.fromDegrees(-124.0 + line*5 + 5 * i, 35.0+line));
+// 	  colors.push(Cesium.Color.fromRandom({ alpha: 1.0 }));
+// 	}
+// 	// For per segment coloring, supply the colors option with
+// 	// an array of colors for each vertex.  Also set the
+// 	// colorsPerVertex option to true.
+// 	scene.primitives.add(
+// 	  new Cesium.Primitive({
+// 		geometryInstances: new Cesium.GeometryInstance({
+// 		  geometry: new Cesium.PolylineGeometry({
+// 			positions: positions,
+// 			width: 5.0,
+// 			vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
+// 			colors: colors,
+// 			colorsPerVertex: true,
+// 		  }),
+// 		}),
+// 		appearance: new Cesium.PolylineColorAppearance(),
+// 	  })
+// 	);
+// 	}
+
+
+
+
+
+
+
+	// HTML overlay for showing feature name on mouseover
+	var nameOverlay = document.createElement('div');
+	viewer.container.appendChild(nameOverlay);
+	nameOverlay.className = 'backdrop';
+	nameOverlay.style.display = 'none';
+	nameOverlay.style.position = 'absolute';
+	nameOverlay.style.bottom = '0';
+	nameOverlay.style.left = '0';
+	nameOverlay.style['pointer-events'] = 'none';
+	nameOverlay.style.padding = '4px';
+	nameOverlay.style.backgroundColor = 'green';
+
+	
+	var scene = viewer.scene;
+	var longitude;
+	var latitude;
+	var fid;
+	var featuretype;
+	var gmlid;
+	var selID = new Array();
+	var cnt = 0;
+	var lastPickedObject;
+
+	var viewModel = {
+		rightClickAction: 'properties',
+		middleClickAction: 'hide'
+	};
+
+	Cesium.knockout.track(viewModel);
+
+	var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+
+	
+	handler.setInputAction(function (movement) {
+			// makes camera go to a certain position given by the coordinates below
+		
+		var feature = viewer.scene.pick(movement.position);
+			if (!Cesium.defined(feature)) {
+				console.log("no feature defined")
+				return;
+			}	
+		var propertyNames = feature.getPropertyNames();
+		var lat = feature.getProperty("Latitude");
+		var lon = feature.getProperty("Longitude");
+		var tmp = feature.getProperty("YearOfConstruction");
+
+		viewer.camera.flyTo({
+			destination: Cesium.Cartesian3.fromDegrees(lon, lat, 900),
+			maximumHeight: 1500.0,
+			orientation: {
+				heading: Cesium.Math.toRadians(0.0),
+				pitch: Cesium.Math.toRadians(-90.0),
+				roll: Cesium.Math.toRadians(45.0)
+			},
+			duration: 2
+		});		}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+		
+
+
+		handler.setInputAction(function (movement) {
+			var feature = viewer.scene.pick(movement.position);
+			if (!Cesium.defined(feature)) {
+				return;
+			}
+			var action = viewModel.rightClickAction;
+			action === 'properties'
+			printProperties(movement, feature)
+		}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+
+
+		function printProperties(movement, feature) {
+			console.log('Properties:');
+			var propertyNames = feature.getPropertyNames();
+			var length = propertyNames.length;
+			for (var i = 0; i < length; ++i) {
+				var propertyName = propertyNames[i];
+				if (propertyName == 'gmlIdALKISLageBezeichnung_1' ||
+					propertyName == 'gmlIdALKISLageBezeichnung_2' ||
+					propertyName == 'gmlIdALKISLageBezeichnung_3' ||
+					propertyName == 'gmlIdALKISLageBezeichnung_4' ||
+					propertyName == 'gmlIdALKISLageBezeichnung_5' ||
+					propertyName == 'gmlIdALKISLageBezeichnung_6')
+					console.log('  ' + propertyName + ': ' + 'zensiert');
+				else
+					console.log('  ' + propertyName + ': ' + feature.getProperty(propertyName));
+			}
+
+			// Evaluate feature description
+			//console.log('Description : ' + tileset.style.meta.description.evaluate(scene.frameState, feature));
+		}
+
+		handler.setInputAction(function (movement) {
+			var feature = viewer.scene.pick(movement.position);
+			if (!Cesium.defined(feature)) {
+				return;
+			}
+
+			var action = viewModel.middleClickAction;
+			if (action === 'hide') {
+				feature.show = false;
+			}
+			else{
+				feature.show = true;
+			}
+			
+		}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
+		
+
+
+  
+function showLegend() {
+    $("#legend").css("display", "block");
+}
+function hideLegend() {
+    $("#legend").css("display", "none");
+}
+
+// Legend - Colour Table
+function emptyColourTable() {
+    $(".inner").empty();
+}
+
+
+
+function setHeightTable() {
+    $(".inner").append( "<table>" +
+        "<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> > 3.5 </td></tr>" +
+        "<tr><td class='outlined' bgcolor='#ff6b21'></td><td> 3 </td></tr>" +
+        "<tr><td class='outlined' bgcolor='#ffb400'></td><td> 2.5 </td></tr>" +
+		"<tr><td class='outlined' bgcolor='yellow'></td><td> 2</td></tr>" +
+        "<tr><td class='outlined' bgcolor='#89FF8F'></td><td> 1.5 </td></tr>" +                
+       	"<tr><td class='outlined' bgcolor='cyan'></td><td> 1 </td></tr>" +
+        "<tr><td class='outlined' bgcolor='blue'></td><td> 0.5 </td></tr>" +
+    "</table>" );
+}
+	
+	return Cesium.when(tileset.readyPromise).then(function (tileset) {
+		tileset.style = new Cesium.Cesium3DTileStyle({
+
+			color: "color('white',1)",
+			
+		});
+		showLegend();
+		setHeightTable();
+	});	
+
+	
+
+});
\ No newline at end of file

public/circData.js

@@ -42,14 +42,15 @@ $(function () {
 			// imageryProviderViewModels: imageryViewModels
 		});
 
-		// var layer = viewer.imageryLayers.addImageryProvider(
-		// 	new Cesium.IonImageryProvider({ assetId: 3 })
-		// );
+		var layer = viewer.imageryLayers.addImageryProvider(
+			new Cesium.IonImageryProvider({ assetId: 2 })
+		);
 
-		var imageryLayer = viewer.imageryLayers.addImageryProvider(
-			new Cesium.IonImageryProvider({ assetId: 3954 })
-		  );
+		// 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() {
@@ -58,12 +59,15 @@ $(function () {
 	canvas.focus();
 	var scene = viewer.scene;
 
-	// var osmBuildings = viewer.scene.primitives.add(
-	// 	new Cesium.Cesium3DTileset({
-	// 	  url: Cesium.IonResource.fromAssetId(96188),
-	// 	})
-	//   );
+	var osmBuildings = viewer.scene.primitives.add(
+		new Cesium.Cesium3DTileset({
+		  url: Cesium.IonResource.fromAssetId(96188),
+		})
+	  );
+
+
 
+	const buildingHeightOffset = 60; //53
 	///////////////////////////// Target  //////////////////////////
 
 	var target_tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({			
@@ -78,7 +82,7 @@ $(function () {
 		var R = 0;      // roll
 		var P = 0; 	 // pitch
 		var Yaw = 0;		 // yaw
-		var height =53;  
+		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);
@@ -119,7 +123,7 @@ $(function () {
 		var R = 0;      // roll
 		var P = 0; 	 // pitch
 		var Yaw = 0;		 // yaw
-		var height =53;  
+		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);
@@ -157,7 +161,7 @@ $(function () {
 		var R = 0;      // roll
 		var P = 0; 	 // pitch
 		var Yaw = 0;		 // yaw
-		var height =53;  
+		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);
@@ -196,7 +200,7 @@ $(function () {
 		var R = 0;      // roll
 		var P = 0; 	 // pitch
 		var Yaw = 0;		 // yaw
-		var height =53;  
+		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);
@@ -235,7 +239,7 @@ $(function () {
 		var R = 0;      // roll
 		var P = 0; 	 // pitch
 		var Yaw = 0;		 // yaw
-		var height =53;  
+		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);
@@ -285,6 +289,78 @@ $(function () {
 		});
 	}
 
+
+// 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) {  
+//	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: 5.0,
+			vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
+			colors: colors,			
+			colorsPerVertex: true,
+		  }),
+		}),
+		appearance: new Cesium.PolylineColorAppearance(),
+	  })
+	);
+	}
+
+
+	})
+
+
 	// HTML overlay for showing feature name on mouseover
 	var nameOverlay = document.createElement('div');
 	viewer.container.appendChild(nameOverlay);

public/circularData.html

@@ -19,6 +19,8 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"
     integrity="sha256-0rguYS0qgS6L4qVzANq4kjxPLtvnp5nn2nB5G1lWRv4=" crossorigin="anonymous"></script>
   <script src="https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Cesium.js"></script>
+  <script src="https://d3js.org/d3-dsv.v1.min.js"></script>
+  <script src="https://d3js.org/d3-fetch.v1.min.js"></script>
   
 </head>