diff --git a/public/HFT.html b/public/HFT.html index ebd29189b0e3bef661d2538c2f6a21aa1157749e..bb02ad58d41f5d61c930a33df5dd376a4cd1b08a 100644 --- a/public/HFT.html +++ b/public/HFT.html @@ -51,18 +51,11 @@ @import url(templates/bucket.css); </style> -<!-- <header class="backdrop"> - <h3> <img src="imgs/INSPIRER.svg" style="height:12%;width:8%;"> HFT Pointclouds Bld 1 & 3</h1> -</header> --> + <div id="cesiumContainer" class=""> </div> <script src="HFT.js"></script> - <!-- <div id="toolbar"> - </div> --> -<!-- - <h2 class="" onclick="open3DCMO()" style="cursor:pointer; color:rgb(155, 0, 0)"> - <strong><i class="fas fa-copy"></i> Menu</strong> - </h2> --> + <div class="backdrop mainbackdrop" id="DCMO" style="display:show"> <h2> Layer selection </h2> <table> @@ -95,12 +88,7 @@ </table> </div> - - <!-- <div id="loadingOverlay"> - <h1>Loading...</h1> - </div> --> - - + <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> diff --git a/public/HFT.js b/public/HFT.js index 3f22900eb49a666846e6495e8388012aa75a354d..cf65e57be1833afb0e8bbb6e80c33c205cb016b8 100644 --- a/public/HFT.js +++ b/public/HFT.js @@ -44,19 +44,57 @@ var zoomAll = function (tileset) { //////////////////////////// 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), + // var tileset = 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), + // }) + // ); + + 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; - + var tileset = tilesetLOD1 + tileset.readyPromise.then(function (tileset) { var height = BUILDIG_TILESET_HEIGHT_OFFSET; var cartographic = Cesium.Cartographic.fromCartesian( @@ -82,40 +120,8 @@ if (LOAD_3DTILES) { //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 -}); + //////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////