EssenPC.js

	
        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: 3 }),
					
				terrainProvider : new Cesium.CesiumTerrainProvider({
						url: Cesium.IonResource.fromAssetId(1)
					}),
				scene3DOnly: true,
				shouldAnimate: true,
				animation: true,
				infoBox: true,
				baseLayerPicker: false,
				fullscreenButton: true,
				timeline: false,
				navigationHelpButton: true,
				navigationInstructionsInitiallyVisible: false,
				homeButton: false,
				selectionIndicator: true,
				geocoder: true,
				// imageryProviderViewModels: imageryViewModels
			});

	



	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
		url: 'buildingTiles/Essen/tileset.json',		
		show: true
	}));
		
	tileset.readyPromise.then(function (tileset){ 
		
		// set tileset height
       var height = 49;       
       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());
       tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

       return zoomAll(tileset);
	});
	
	tileset.style = new Cesium.Cesium3DTileStyle({
			color: 'color("darkgray")'		});	

	//////////////////////////////////////////////////////////////////		
			
	var pointCloud = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
		url: 'results/EssenPointCloud/tileset.json',	
		
		show: true
	}));
	
	

	pointCloud.readyPromise.then(function (pointCloud) {

		var height = -119;       
       var cartographic = Cesium.Cartographic.fromCartesian(pointCloud.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());
       pointCloud.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

		return zoomAll(pointCloud);
	});
	
	//pointCloud.style = new Cesium.Cesium3DTileStyle({
	//		color: "color('gray')" 		});
	
	
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	var pcHull = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
		url: 'results/EssenPCHull/tileset.json',				
		show: true
	}));
	
	
	pcHull.readyPromise.then(function (pcHull) {

		var height = -118.3;       
       var cartographic = Cesium.Cartographic.fromCartesian(pcHull.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 v = [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, translation["x"], translation["y"],translation["z"],  1.0];
	   
	   pcHull.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
       

		return zoomAll(pcHull);
	});
	
	pcHull.style = new Cesium.Cesium3DTileStyle({
			color: "color('yellow')",
			pointSize: 2
			});
			
	//////////////////////////////////////////////////////////////////	//////////////////////////////////////////////////////////////////
	var pcBBox = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
		url: 'results/EssenPCBbox/tileset.json',	
		maximumScreenSpaceError: 2		,		
		show: false
	}));
	
	
	pcBBox.readyPromise.then(function (pcBBoxl) {

		var height = -118.3;       
		var cartographic = Cesium.Cartographic.fromCartesian(pcBBox.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());
		
		pcbBBox.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
		

		return zoomAll(pcBBox);
	});
	
	pcBBox.style = new Cesium.Cesium3DTileStyle({
			color: "color('red')" 		});

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	var pcWindows = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
		url: 'results/EssenPCWindows/tileset.json',			
		maximumScreenSpaceError: 2		,		
		show: true
	}));
	
	
	pcWindows.readyPromise.then(function (pcWindows) {

		var height = -118.3;
		var cartographic = Cesium.Cartographic.fromCartesian(pcWindows.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 v = [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, translation["x"], translation["y"],translation["z"],  1.0];
		
		pcWindows.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
		

		return zoomAll(pcWindows);
	});
	
	pcWindows.style = new Cesium.Cesium3DTileStyle({
			color: "color('red')" 		,
			pointSize: 3
			});
	
			////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
			////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
			
			

	///////////////////////////////////////////////////////			
	var TurnOnPC = function () {
    pointCloud.show = true;
    }
	var TurnOffPC = function () {
    pointCloud.show = false;
   	}		
	
	///////////////////////////////////////////////////////
	var TurnOnPCHull = function () {
    pcHull.show = true;    
	}
	var TurnOffPCHull = function () {
    pcHull.show = false;
	}	
	///////////////////////////////////////////////////////
	var TurnOnPCWindows = function () {
    pcWindows.show = true;
    }
	var TurnOffPCWindows = function () {
    pcWindows.show = false;
   	}			
	///////////////////////////////////////////////////////	
	///////////////////////////////////////////////////////
	var TurnOnEssen3dT = function () {
    tileset.show = true;
    }
	var TurnOffEssen3dT = function () {
    tileset.show = false;
   	}			
	//////////////////////////////////////////////////////

	/*
	var terrainProvider = new new Cesium.CesiumTerrainProvider({
        url: Cesium.IonResource.fromAssetId(1), requestVertexNormals: true );
	
	viewer.terrainProvider = terrainProvider;
*/
	
/*
	var terrainProvider = new Cesium.CesiumTerrainProvider({
        url: 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
        requestWaterMask: true, // required for water effects
        requestVertexNormals: true // required for terrain lighting
    });
    viewer.terrainProvider = terrainProvider;
	*/
	viewer.scene.globe.enableLighting = true; // set lighting to true
	

	
	var zoomAll = function (pointCloud) {
		return new Promise(function (resolve, reject) {
			if (!pointCloud) { reject("Tileset is undifined"); }
			viewer.camera.viewBoundingSphere(pointCloud.boundingSphere, new Cesium.HeadingPitchRange(1.5, -0.5, 200));
			viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
			resolve();
		});
	}
	
	
	   

	// 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 <div class="cesium-infoBox-loading"></div>';
    viewer.selectedEntity = selectedEntity;
    selectedEntity.description = '<table class="cesium-infoBox-defaultTable"><tbody>' +                                 
                                 '<tr><th>Bld function</th><td>' + pickedFeature.getProperty('Function') + '</td></tr>' +
								 '<tr><th>gmlID</th><td>' + pickedFeature.getProperty('gmlIDStr') + '</td></tr>' +
								 '<tr><th>AbsoluteHoehe (m)</th><td>' + pickedFeature.getProperty('AbsoluteHoehe') + '</td></tr>' +
                                 '<tr><th>Lon</th><td>' + pickedFeature.getProperty('Longitude') + '</td></tr>' +
								 '<tr><th>Lat</th><td>' + pickedFeature.getProperty('Latitude') + '</td></tr>' +
								 '<tr><th>GebaeudeHoehe (m)</th><td>' + pickedFeature.getProperty('GebaeudeHoehe') + '</td></tr>' +							 
								 '<tr><th>YearOfConstruction</th><td>' + pickedFeature.getProperty('YearOfConstruction') + '</td></tr>' +
								 '<tr><th>MeasuredHeight (m):</th><td>' + pickedFeature.getProperty('MeasuredHeight') + '</td></tr>' +
								 '<tr><th>HoeheFirst (m)</th><td>' + pickedFeature.getProperty('hoeheFirst') + '</td></tr>' +
								 '<tr><th>HoeheTrauf (m)</th><td>' + pickedFeature.getProperty('hoeheTrauf') + '</td></tr>' +
								 '<tr><th>Grundflaeche (sqm)</th><td>' + pickedFeature.getProperty('grundflaeche') + '</td></tr>' +
								 '<tr><th>StoreysAboveGround: </th><td>' + pickedFeature.getProperty('StoreysAboveGround') + '</td></tr>' +
								 '<tr><th>StoreysBelowGround: </th><td>' + pickedFeature.getProperty('StoreysBelowGround') + '</td></tr>' +								 
                                 '</tbody></table>';
}, 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);