polylineStreams.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(),
	  })
	);
	}


	})

	// This adds a large arrow to the viewer. Works fine. for testing

	// var purpleArrow = viewer.entities.add({
	// 	name: "Purple straight arrow at height",
	// 	polyline: {
	// 	  positions: Cesium.Cartesian3.fromDegreesArrayHeights([
	// 		9.187290, 48.784567, 400,
	// 		9.195991, 48.790575, 400
	// 	  ]),
	// 	  width: 50,
	// 	  arcType: Cesium.ArcType.NONE,
	// 	  material: new Cesium.PolylineArrowMaterialProperty(
	// 		Cesium.Color.PURPLE
	// 	  ),
	// 	},
	//   });
	  

// var f = new File([""], "results/singlePolyline.csv", {type: "text/plain", lastModified: Date()})


// var temp = text.split(',');
//   for(var i = 0; i < temp.length; i+=6) {
//     pos.push([parseFloat(temp[i+1]), parseFloat(temp[i+2]), parseFloat(temp[i+3])]);
//     colors.push([parseInt(temp[i+4]),parseInt(temp[i+5]),parseInt(temp[i+6])])
//   }


console.log('Position data imported.');


//// the following codes will actually generate multicolor polylines 
/// just need a away to get the actual data into there...
///
///
// for (var line=0; line < 10; line++){
// 	// Example 2: Draw a polyline with per vertex colors
// 	positions = [];
// 	colors = [];
// 	for (i = 0; i < 12; ++i) {
// 	  positions.push(Cesium.Cartesian3.fromDegrees(-124.0 + line*5 + 5 * i, 35.0+line));
// 	  colors.push(Cesium.Color.fromRandom({ alpha: 1.0 }));
// 	}
// 	// For per segment coloring, supply the colors option with
// 	// an array of colors for each vertex.  Also set the
// 	// colorsPerVertex option to true.
// 	scene.primitives.add(
// 	  new Cesium.Primitive({
// 		geometryInstances: new Cesium.GeometryInstance({
// 		  geometry: new Cesium.PolylineGeometry({
// 			positions: positions,
// 			width: 5.0,
// 			vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
// 			colors: colors,
// 			colorsPerVertex: true,
// 		  }),
// 		}),
// 		appearance: new Cesium.PolylineColorAppearance(),
// 	  })
// 	);
// 	}







	// HTML overlay for showing feature name on mouseover
	var nameOverlay = document.createElement('div');
	viewer.container.appendChild(nameOverlay);
	nameOverlay.className = 'backdrop';
	nameOverlay.style.display = 'none';
	nameOverlay.style.position = 'absolute';
	nameOverlay.style.bottom = '0';
	nameOverlay.style.left = '0';
	nameOverlay.style['pointer-events'] = 'none';
	nameOverlay.style.padding = '4px';
	nameOverlay.style.backgroundColor = 'green';

	
	var scene = viewer.scene;
	var longitude;
	var latitude;
	var fid;
	var featuretype;
	var gmlid;
	var selID = new Array();
	var cnt = 0;
	var lastPickedObject;

	var viewModel = {
		rightClickAction: 'properties',
		middleClickAction: 'hide'
	};

	Cesium.knockout.track(viewModel);

	var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

	
	handler.setInputAction(function (movement) {
			// makes camera go to a certain position given by the coordinates below
		
		var feature = viewer.scene.pick(movement.position);
			if (!Cesium.defined(feature)) {
				console.log("no feature defined")
				return;
			}	
		var propertyNames = feature.getPropertyNames();
		var lat = feature.getProperty("Latitude");
		var lon = feature.getProperty("Longitude");
		var tmp = feature.getProperty("YearOfConstruction");

		viewer.camera.flyTo({
			destination: Cesium.Cartesian3.fromDegrees(lon, lat, 900),
			maximumHeight: 1500.0,
			orientation: {
				heading: Cesium.Math.toRadians(0.0),
				pitch: Cesium.Math.toRadians(-90.0),
				roll: Cesium.Math.toRadians(45.0)
			},
			duration: 2
		});		}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
		


		handler.setInputAction(function (movement) {
			var feature = viewer.scene.pick(movement.position);
			if (!Cesium.defined(feature)) {
				return;
			}
			var action = viewModel.rightClickAction;
			action === 'properties'
			printProperties(movement, feature)
		}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);


		function printProperties(movement, feature) {
			console.log('Properties:');
			var propertyNames = feature.getPropertyNames();
			var length = propertyNames.length;
			for (var i = 0; i < length; ++i) {
				var propertyName = propertyNames[i];
				if (propertyName == 'gmlIdALKISLageBezeichnung_1' ||
					propertyName == 'gmlIdALKISLageBezeichnung_2' ||
					propertyName == 'gmlIdALKISLageBezeichnung_3' ||
					propertyName == 'gmlIdALKISLageBezeichnung_4' ||
					propertyName == 'gmlIdALKISLageBezeichnung_5' ||
					propertyName == 'gmlIdALKISLageBezeichnung_6')
					console.log('  ' + propertyName + ': ' + 'zensiert');
				else
					console.log('  ' + propertyName + ': ' + feature.getProperty(propertyName));
			}

			// Evaluate feature description
			//console.log('Description : ' + tileset.style.meta.description.evaluate(scene.frameState, feature));
		}

		handler.setInputAction(function (movement) {
			var feature = viewer.scene.pick(movement.position);
			if (!Cesium.defined(feature)) {
				return;
			}

			var action = viewModel.middleClickAction;
			if (action === 'hide') {
				feature.show = false;
			}
			else{
				feature.show = true;
			}
			
		}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
		


  
function showLegend() {
    $("#legend").css("display", "block");
}
function hideLegend() {
    $("#legend").css("display", "none");
}

// Legend - Colour Table
function emptyColourTable() {
    $(".inner").empty();
}



function setHeightTable() {
    $(".inner").append( "<table>" +
        "<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> > 3.5 </td></tr>" +
        "<tr><td class='outlined' bgcolor='#ff6b21'></td><td> 3 </td></tr>" +
        "<tr><td class='outlined' bgcolor='#ffb400'></td><td> 2.5 </td></tr>" +
		"<tr><td class='outlined' bgcolor='yellow'></td><td> 2</td></tr>" +
        "<tr><td class='outlined' bgcolor='#89FF8F'></td><td> 1.5 </td></tr>" +                
       	"<tr><td class='outlined' bgcolor='cyan'></td><td> 1 </td></tr>" +
        "<tr><td class='outlined' bgcolor='blue'></td><td> 0.5 </td></tr>" +
    "</table>" );
}
	
	return Cesium.when(tileset.readyPromise).then(function (tileset) {
		tileset.style = new Cesium.Cesium3DTileStyle({

			color: "color('white',1)",
			
		});
		showLegend();
		setHeightTable();
	});	

	

});