An error occurred while loading the file. Please try again.
TimeDynVortex.js 10.98 KiB
$(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(); }); });