From 3f9f0e68d26e764a5f5ff526ff211364e309d195 Mon Sep 17 00:00:00 2001
From: Sven Schneider <sven.schneider@hft-stuttgart.de>
Date: Fri, 29 Oct 2021 17:37:14 +0200
Subject: [PATCH] updated the 3d building model using the 3dtiles set from
steinbeis, delivered via geovolume api
---
public/HFT.html | 18 ++---------
public/HFT.js | 86 ++++++++++++++++++++++++++-----------------------
2 files changed, 49 insertions(+), 55 deletions(-)
diff --git a/public/HFT.html b/public/HFT.html
index ebd2918..bb02ad5 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 3f22900..cf65e57 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
-});
+
////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
--
GitLab