Skip to content
GitLab
Commit 78844bc8 authored by Sven Schneider's avatar Sven Schneider
Browse files

added fellbach data sets and adjusted menu

parent 09e4592f
Pipeline #5712 passed with stages
in 27 seconds
Hide whitespace changes
Inline Side-by-side
public/HFT.js
View file @ 78844bc8
......@@ -18,7 +18,9 @@ var viewer = new Cesium.Viewer("cesiumContainer", {
// set home button extend
var extent = Cesium.Rectangle.fromDegrees(9.162794728779428, 48.78605872069245, 9.181827683763427, 48.77616123564855);
// 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;
......@@ -88,6 +90,10 @@ var zoomAll = function (tileset) {
}
load3DTiles()
//////// important value. to find the correct value trail and error is needed for a perfect fit
const BUILDIG_TILESET_HEIGHT_OFFSET = 54;
......@@ -114,7 +120,7 @@ var zoomAll = function (tileset) {
// 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
// return zoomAll(tileset); // zoom or rather go to the translated tileset
});
tileset.show = false;
......@@ -156,7 +162,7 @@ hftLargePC.readyPromise.then(function (hftLargePC) {
// 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
// return zoomAll(hftLargePC); // zoom or rather go to the translated tileset
});
hftLargePC.style = new Cesium.Cesium3DTileStyle({
......@@ -229,4 +235,44 @@ var togglePrettyBuildingTiles = function () {
}
////////////////////////////////////////////////////
// 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
// })
// );
public/Testgebiete.html 0 → 100644
View file @ 78844bc8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Pointcloud Demo at HFT</title>
<link
href="https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"
/>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"
integrity="sha256-1A78rJEdiWTzco6qdn3igTBv9VupN3Q1ozZNTR4WE/Y="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"
integrity="sha256-0rguYS0qgS6L4qVzANq4kjxPLtvnp5nn2nB5G1lWRv4="
crossorigin="anonymous"
></script>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"></script>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ"
crossorigin="anonymous"
/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/index.css" media="screen">
<link rel="stylesheet" href="css/form_joeStyle.css" media="screen">
<link rel="stylesheet" href="css/roundedButton.css" media="screen">
</head>
<body>
<style>
@import url(templates/bucket.css);
</style>
<div id="cesiumContainer" class=""> </div>
<script src="Testgebiete.js"></script>
<div class="backdrop mainbackdrop" id="DCMO" style="display:show">
<button style="margin: 5px 0px 5px 0px;" type="button" class="btn btn-danger btnMod" onclick="gotoHFT()">HFT</button>
<div class="backdrop mainbackdrop">
<h6 style="color: rgb(8, 228, 118);"> Pointclouds </h6>
<table>
<tbody>
<tr>
<td style=" padding-bottom: 10px;"><strong>RGB PointCloud</strong> </td>
<td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch">
<input type="checkbox" onclick="toggleRGBPC()" checked>
<span class="slider round"></span>
</label>
</td>
</tr>
<tr>
<td style=" padding-bottom: 10px;"><strong>Blue PointCloud</strong> </td>
<td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch">
<input type="checkbox" onclick="toggleLargePC()" checked>
<span class="slider round"></span>
</label>
</td>
</tr>
</tbody>
</table>
</div>
<div class="backdrop mainbackdrop">
<h6 style="color: rgb(8, 228, 118);"> CityGML Buildings </h6>
<table>
<tbody>
<tr>
<td style=" padding-bottom: 10px;"><strong>LOD1 Buildings </strong> </td>
<td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch">
<input id="simpleBuildingsCheckbox" type="checkbox" onclick="toggleBuildingTiles()" unchecked>
<span class="slider round"></span>
</label>
</td>
</tr>
</tr>
<tr>
<td style=" padding-bottom: 10px;"><strong>LOD3 Buildings </strong> </td>
<td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch">
<input id="prettyBuildingsCheckbox" type="checkbox" onclick="togglePrettyBuildingTiles()" checked>
<span class="slider round"></span>
</label>
</td>
</tr>
</tbody>
</table>
</div>
<button style="margin: 20px 0px 5px 0px;" type="button" class="btn btn-warning btnMod" onclick="gotoFellbach()">Fellbach</button>
<div class="backdrop mainbackdrop">
<h6 style="color: rgb(8, 228, 118);">CityGML Buildings </h6>
<table>
<tbody>
<tr>
<td style=" padding-bottom: 10px;"><strong>LOD2 Buildings </strong> </td>
<td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch">
<input id="FellbachBuildingsCheckbox" type="checkbox" onclick="toggleFellbachTiles()" unchecked>
<span class="slider round"></span>
</label>
</td>
</tr>
<tr>
<td style=" padding-bottom: 10px;"><strong>LOD2 Textured </strong> </td>
<td style=" padding-bottom: 10px; padding-left: 15px;"><label class="switch">
<input id="FellbachTexturedBuildingsCheckbox" type="checkbox" onclick="toggleFellbachTexturedTiles()" checked>
<span class="slider round"></span>
</label>
</td>
</tr>
</tbody>
</table>
</div>
</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>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> -->
<!-- JavaScript Bundle with Popper -->
<!-- CSS only -->
</body>
</html>
public/Testgebiete.js 0 → 100644
View file @ 78844bc8
// 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 toggleFellbachTiles = function () {
if (fellbachBuildings.show === true) {
fellbachBuildings.show = false
}
else {
fellbachBuildings.show = true;
if (fellbachBuildingsTextured.show === true){
$('#FellbachTexturedBuildingsCheckbox').prop('checked', false);
fellbachBuildingsTextured.show = false;
}
}
}
var toggleFellbachTexturedTiles = function () {
if (fellbachBuildingsTextured.show === true) {
fellbachBuildingsTextured.show = false
}
else {
fellbachBuildingsTextured.show = true;
if (fellbachBuildings.show === true){
$('#FellbachBuildingsCheckbox').prop('checked', false);
fellbachBuildings.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: "https://3dps.gis.lrg.tum.de/geovolumes/collections/Fellbach/all_buildings_lod2/3dtiles/",
// url: "https://3dps.gis.lrg.tum.de/geovolumes/collections/Fellbach/all_buildings_lod2_textured/3dtiles/tileset.json?bbox=9.27193208236,48.8200709939,-10,9.2900117958,48.8164019664,500",
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);
});
fellbachBuildings.show = false;
////////////////////////////////////////////////////
// Fellbach building tiles
fellbachBuildingsTextured = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: "https://3dps.gis.lrg.tum.de/geovolumes/collections/Fellbach/all_buildings_lod2_textured/3dtiles/tileset.json?bbox=9.27193208236,48.8200709939,-10,9.2900117958,48.8164019664,500",
show: true,
}));
fellbachBuildingsTextured.readyPromise.then(function (fellbachBuildingsTextured) {
var height = 51;
var cartographic = Cesium.Cartographic.fromCartesian(
fellbachBuildingsTextured.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
fellbachBuildingsTextured.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
return zoomAll(fellbachBuildingsTextured);
});
var gotoFellbach = function () {
// var extent = Cesium.Rectangle.fromDegrees(9.26530042893943,48.818436808301705, 9.275552393133086, 48.81387520377022);
// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
// Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(9.269968312784966, 48.815644351028965, 600.0),
orientation : {
heading : Cesium.Math.toRadians(-30.0),
pitch : Cesium.Math.toRadians(-45),
roll : 0
}
});
new Cesium.HeadingPitchRange(0, -0.5, 400)
// viewer.camera.viewBoundingSphere(Cesium.Cartesian3.fromDegrees(9.26530042893943,48.818436808301705, 1500.0), );
// viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
// viewer.canera.setView({
// destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
// });
// zoomAll(fellbachBuildings);
// viewer.scene.camera.lookAt(fellbachBuildings.position.getValue(viewer.clock.currentTime), new Cesium.Cartesian3(0,0,200));
}
var gotoHFT = function () {
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.flyTo(tilesetLOD1);