HFT.js

$(function () {
	// 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),
	  }),
	});
  
	viewer.scene.globe.enableLighting = true; // set lighting to true
  
	// 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();
	  });
	};
  
	//////////////////////////// load 3d building tiles or OSM 3d Buildings ///////////////////////
	// here is the switch to switch between different 3d buildings 
	const LOAD_3DTILES = true;
  
	if (LOAD_3DTILES) {
	  // load 3d Tile set of SToeckach.
	  var tileset = viewer.scene.primitives.add(
		new Cesium.Cesium3DTileset({
		  url: Cesium.IonResource.fromAssetId(656401),
		})
	  );
  
	  //////// important value. to find the correct value trail and error is needed for a perfect fit
	  const BUILDIG_TILESET_HEIGHT_OFFSET = 54;
  
	  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
	  });
	}
	/////////////////////////////////////////////////////////////////////
	// Alternatively, instead of using the Stoeckach LOD1 Building 3d Tiles,
	//  use OSM Buildings from Cesium ION assets - in this case set LOAD_3DTILES variable in Line 41 to 'false'
	////////////////////////////////////////////////////////
	else {
	  var osmBuildings = Cesium.createOsmBuildings();
	  osmBuildings.readyPromise
		.then(function (osmBuildings) {
		  viewer.scene.primitives.add(osmBuildings);
		})
		.otherwise(function (error) {
		  console.log(error);
		});
  
	  // now zoom to target and set camera view angle to some oblique angle: use '-Cesium.Math.PI_OVER_TWO' to look down nadir.
	  // if you use '+Cesium.Math.PI_OVER_TWO', you look into space.
	  viewer.camera.setView({
		destination: Cesium.Cartesian3.fromDegrees(
			9.172183958234173,
			48.78029680030391,					
		  20000
		),
		orientation: {
		  heading: 0.0,
		  pitch: -Cesium.Math.PI_OVER_TWO, // set an oblique viewing angle
		  roll: 0.0,
		},
	  });
	}

	tileset.style = new Cesium.Cesium3DTileStyle({
		show: false 
		});
  
	////////////////////////////////////////////////////////////////////////////////////
	////////////////////////////////////////////////////////////////////////////////////
	// HFT PointCloud Tileset.
	////////////////////////////////////////////////////////////////////////////////////
	
	const PCOFFSET = 0;

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

	  HFTBuildingsPC.readyPromise.then(function (HFTBuildingsPC) {
		var height = PCOFFSET;
		var cartographic = Cesium.Cartographic.fromCartesian(
			HFTBuildingsPC.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
		HFTBuildingsPC.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
  
		return zoomAll(HFTBuildingsPC); // zoom or rather go to the translated tileset
	  });
	
	HFTBuildingsPC.style = new Cesium.Cesium3DTileStyle({
		color: "color('blue',0.3)",	
		// color: "color('red')" ,
			pointSize: 3		 
		});


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

 var HFTInnehof = viewer.scene.primitives.add(
	new Cesium.Cesium3DTileset({
	  url: Cesium.IonResource.fromAssetId(656854),
	})
  );
		
  HFTInnehof.style = new Cesium.Cesium3DTileStyle({
	// color: "color('blue',0.3)",	
	// color: "color('red')" ,
		pointSize: 3		 
	});
	
  });