// 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 load3DTiles = function () { tilesetLOD1 = 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(tilesetLOD1.readyPromise).then(function (tilesetLOD1) { viewer.flyTo(tilesetLOD1) tilesetLOD1.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 }); // tilesetLOD1.style = new Cesium.Cesium3DTileStyle({ // color: "color('BLACK', 0.3)", // show: true // }); var heightOffset = 50.0; var boundingSphere = tilesetLOD1.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()); tilesetLOD1.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 = 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 }); 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(656854), }) ); hftInnehofRGB_PC.style = new Cesium.Cesium3DTileStyle({ // color: "color('blue',0.3)", // color: "color('red')" , pointSize: 3 }); ////////////////////////// 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 (tilesetLOD1.show === true){ $('#prettyBuildingsCheckbox').prop('checked', false); tilesetLOD1.show = false } } } var togglePrettyBuildingTiles = function () { // tilesetLOD1.show = tilesetLOD1.show ? false : true; if (tilesetLOD1.show === true) { tilesetLOD1.show = false } else { tilesetLOD1.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: "buildingTiles/fellbachTiles/tileset.json", 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); }); // var fellbachBuildings = viewer.scene.primitives.add( // new Cesium.Cesium3DTileset({ // // url: Cesium.IonResource.fromAssetId(679236), // in wgs84 srs // url: Cesium.IonResource.fromAssetId(679239), // in erts89Z32 srs // }) // );