Testgebiete.js

// specifiy credentials and assets from Cesium ION account
Cesium.Ion.defaultAccessToken =
	"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYjY5ZTAxNy03YTc0LTQyZTYtYjJlMC0xYzYwNTAzNDQ0ZjUiLCJpZCI6MjkwNCwiaWF0IjoxNjM1NDEzOTI0fQ.Xhmt0sD4Dda4Q46FBYew4wPbqlJ4T8U9n1nNNwGyH7o";

// setting up Cesium Viewer
var viewer = new Cesium.Viewer("cesiumContainer", {
	imageryProvider: new Cesium.IonImageryProvider({ assetId: 3 }), //3 bing maps with labels // use Sentinel2 imagery as default assetID:3954
	/////////////////////////////////////////
	// Note the next 3 lines specify that the Cesium Terrain should be used. ION account is needed
	// For a 'flat' Earth the z-offsets below for each of the tilesets needs to be adjusted
	// comment the next 3 lines to remove the Cesium terrain (Resulution approx. 30m)
	/////////////////////////////////////////
	terrainProvider: new Cesium.CesiumTerrainProvider({
		url: Cesium.IonResource.fromAssetId(1),
	}),
});


// set home button extend
// this is the HFT 
// var extent = Cesium.Rectangle.fromDegrees(9.162794728779428, 48.78605872069245, 9.181827683763427, 48.77616123564855);
var extent = Cesium.Rectangle.fromDegrees(9.29859441939518, 48.814434070664696, 9.30346531111649, 48.813176496066895);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;

viewer.scene.globe.enableLighting = true; // set lighting to true

// load 3d Tile set of HFT from Cesium ION.
var tileset = viewer.scene.primitives.add(
	new Cesium.Cesium3DTileset({
		url: Cesium.IonResource.fromAssetId(656401),
	})
);

// define a function to zoom to the tileset (invoke later)
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, 400)
		);
		viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
		resolve();
	});
};





//   var HFT_testbld = viewer.scene.primitives.add(
// 	new Cesium.Cesium3DTileset({
// 	  url: Cesium.IonResource.fromAssetId(905706),
// 	})
//   );
  
var HFT_testbld = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
      url: "buildingTiles/HFT_testbld/tileset.json",
      show: true,
    })
  );


  HFT_testbld.readyPromise.then(function (HFT_testbld) {
	var height =55;
	var cartographic = Cesium.Cartographic.fromCartesian(
		HFT_testbld.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()
	);
	// now shift / translate the tileset by the translation vector defined above
	HFT_testbld.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

	return zoomAll(HFT_testbld); // zoom or rather go to the translated tileset
});


	
	var load3DTiles = function () {
		tilesetLOD3 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
			url: "https://steinbeis-3dps.eu/3DGeoVolumes/collections/Stuttgart/HFTBuildings_3DModel_noTexture/3dtiles/tileset.json", //Cesium.IonResource.fromAssetId(656401),
		}));
	
		
	
		Cesium.when(tilesetLOD3.readyPromise).then(function (tilesetLOD3) {
			viewer.flyTo(tilesetLOD3)
			tilesetLOD3.style = new Cesium.Cesium3DTileStyle({
				color: {
					conditions: [
						["${featureType} === 'Window'", "color('blue')"],
						["${featureType} === 'WallSurface'", "color('gray')"],
						["${featureType} === 'RoofSurface'", "color('red')"],
						["${featureType} === 'OuterFloorSurface'", "color('white')"],
						["true", "color('white')"],
					],
				},
				show: true
			});
			// tilesetLOD3.style = new Cesium.Cesium3DTileStyle({
			//     color: "color('BLACK', 0.3)",
			//     show: true
			// });
	
			var heightOffset = 49.0;
			var boundingSphere = tilesetLOD3.boundingSphere;
			var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
			var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
			var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
			var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
			tilesetLOD3.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
		})
	
	}
	load3DTiles()



	

	//////// important value. to find the correct value trail and error is needed for a perfect fit
	const BUILDIG_TILESET_HEIGHT_OFFSET = 50;
	
	tileset.readyPromise.then(function (tileset) {
		var height = BUILDIG_TILESET_HEIGHT_OFFSET;
		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()
		);
		// now shift / translate the tileset by the translation vector defined above
		tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

		// return zoomAll(tileset); // zoom or rather go to the translated tileset
	});

	tileset.show = false;


////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
// HFT PointCloud Tileset.
////////////////////////////////////////////////////////////////////////////////////

const PCOFFSET = 0;

var hftLargePC = viewer.scene.primitives.add(
	new Cesium.Cesium3DTileset({
		url: Cesium.IonResource.fromAssetId(655879),
	})
);

hftLargePC.readyPromise.then(function (hftLargePC) {
	var height = PCOFFSET;
	var cartographic = Cesium.Cartographic.fromCartesian(
		hftLargePC.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()
	);
	// now shift / translate the tileset by the translation vector defined above
	hftLargePC.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

	// return zoomAll(hftLargePC); // zoom or rather go to the translated tileset
});

hftLargePC.style = new Cesium.Cesium3DTileStyle({
	color: "color('blue',0.3)",
	// color: "color('red')" ,
	pointSize: 3
});




///////////////////////////// innenhof PC

var hftInnehofRGB_PC = viewer.scene.primitives.add(
	new Cesium.Cesium3DTileset({
		url: Cesium.IonResource.fromAssetId(712217),  //656854  small point cloud
	})
);

hftInnehofRGB_PC.style = new Cesium.Cesium3DTileStyle({
	// color: "color('blue',0.3)",	
	// color: "color('red')" ,
	pointSize: 2
});



////////////////////////// Control Pointclouds and Tileset with switches

var toggleLargePC = function () {
	if (hftLargePC.show === true) {
		hftLargePC.show = false
	}
	else {
		hftLargePC.show = true
	}
}
// or use tenrary operator as for the other two 
var toggleRGBPC = function () {
	hftInnehofRGB_PC.show = hftInnehofRGB_PC.show ? false : true;
}

var toggleBuildingTiles = function () {
	if (tileset.show === true) {
		tileset.show = false
	}
	else {
		tileset.show = true	
		if (tilesetLOD3.show === true){
			$('#prettyBuildingsCheckbox').prop('checked', false);
			tilesetLOD3.show = false
		}						
	}
}

var toggleFellbachTiles = function () {
	if (fellbachBuildings.show === true) {
		fellbachBuildings.show = false
	}
	else {
		fellbachBuildings.show = true;
		if (fellbachBuildingsTextured.show === true){
			$('#FellbachTexturedBuildingsCheckbox').prop('checked', false);
			fellbachBuildingsTextured.show = false;
		}							
	}
}


var toggleFellbachTexturedTiles = function () {
	if (fellbachBuildingsTextured.show === true) {
		fellbachBuildingsTextured.show = false
	}
	else {
		fellbachBuildingsTextured.show = true;	
		if (fellbachBuildings.show === true){
			$('#FellbachBuildingsCheckbox').prop('checked', false);
			fellbachBuildings.show = false;
		}					
	}
}

var togglePrettyBuildingTiles = function () {
	// tilesetLOD3.show = tilesetLOD3.show ? false : true;
	if (tilesetLOD3.show === true) {
		tilesetLOD3.show = false		
	}
	else {
		tilesetLOD3.show = true				
		if (tileset.show === true){
			$('#simpleBuildingsCheckbox').prop('checked', false);
			tileset.show = false
		}
	}
	// $('#prettyBuildingsCheckbox').prop('checked', true); // Checks it
//$('#myCheckbox').prop('checked', false); // Unchecks it
}




////////////////////////////////////////////////////
	// Fellbach building tiles
	fellbachBuildings = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
		url: "https://3dps.gis.lrg.tum.de/geovolumes/collections/Fellbach/all_buildings_lod2/3dtiles/",
		// url: "https://3dps.gis.lrg.tum.de/geovolumes/collections/Fellbach/all_buildings_lod2_textured/3dtiles/tileset.json?bbox=9.27193208236,48.8200709939,-10,9.2900117958,48.8164019664,500",
		show: true,
	}));

	fellbachBuildings.readyPromise.then(function (fellbachBuildings) {
		var height = 51;
		var cartographic = Cesium.Cartographic.fromCartesian(
			fellbachBuildings.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()
		);
		// now shift / translate the tileset by the translation vector defined above
		fellbachBuildings.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
		return zoomAll(fellbachBuildings);

		
	});


	fellbachBuildings.show = false;
	////////////////////////////////////////////////////
	// Fellbach building tiles
	fellbachBuildingsTextured = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({		
		url: "https://3dps.gis.lrg.tum.de/geovolumes/collections/Fellbach/all_buildings_lod2_textured/3dtiles/tileset.json?bbox=9.27193208236,48.8200709939,-10,9.2900117958,48.8164019664,500",
		show: true,
	}));

	fellbachBuildingsTextured.readyPromise.then(function (fellbachBuildingsTextured) {
		var height = 51;
		var cartographic = Cesium.Cartographic.fromCartesian(
			fellbachBuildingsTextured.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()
		);
		// now shift / translate the tileset by the translation vector defined above
		fellbachBuildingsTextured.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
		return zoomAll(fellbachBuildingsTextured);

		
	});


		  

	var gotoFellbach = function () {

		// var extent = Cesium.Rectangle.fromDegrees(9.26530042893943,48.818436808301705, 9.275552393133086,  48.81387520377022);
		// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
		// Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;


		viewer.camera.flyTo({
			destination : Cesium.Cartesian3.fromDegrees(9.269968312784966, 48.815644351028965, 600.0),
			orientation : {
				heading : Cesium.Math.toRadians(-30.0),
				pitch : Cesium.Math.toRadians(-45),
				roll : 0
			}
		});
		new Cesium.HeadingPitchRange(0, -0.5, 400)
		
		// viewer.camera.viewBoundingSphere(Cesium.Cartesian3.fromDegrees(9.26530042893943,48.818436808301705, 1500.0),		);
		// viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

		// viewer.canera.setView({
		// 	destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
		// });
		// zoomAll(fellbachBuildings);
		// viewer.scene.camera.lookAt(fellbachBuildings.position.getValue(viewer.clock.currentTime), new Cesium.Cartesian3(0,0,200));
	}

	var gotoHFT = function () {

		var extent = Cesium.Rectangle.fromDegrees(9.29859441939518, 48.814434070664696, 9.30346531111649, 48.813176496066895);
		Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
		Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;

		viewer.flyTo(tilesetLOD3);


		
	}