// 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 var extent = Cesium.Rectangle.fromDegrees( 9.162794728779428,48.78605872069245, 9.181827683763427, 48.77616123564855); Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent; Cesium.Camera.DEFAULT_VIEW_FACTOR = 0; 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: true }); //////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////// // 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 }); ////////////////////////// Control Pointclouds and Tileset with switches var TurnOnRGBPC = function () { HFTInnehof.show = true; } var TurnOffRGBPC = function () { HFTInnehof.show = false; } var TurnOnLargePC = function () { HFTBuildingsPC.show = true; } var TurnOffLargePC = function () { HFTBuildingsPC.show = false; } var TurnOnHFTBld = function () { tileset.show = true; } var TurnOffHFTBld = function () { tileset.show = false; }