Skip to content
GitLab
Commit 4d4e9bdd authored by Sven Schneider's avatar Sven Schneider
Browse files

updated EssenDemo, made it a bit prettier. Also added buttons for point clodus for HFT app.

parent c6b40bb7
Pipeline #5254 passed with stages
in 29 seconds
Hide whitespace changes
Inline Side-by-side
public/EssenPC.html
View file @ 4d4e9bdd
......@@ -5,8 +5,8 @@
<head>
<meta charset="utf-8">
<title>Window Detection Demo</title>
<link rel="stylesheet" href="css/myCesiumStyle.css">
<link rel="stylesheet" href="css/legend.css">
<!-- <link rel="stylesheet" href="css/myCesiumStyle.css"> -->
<!-- <link rel="stylesheet" href="css/legend.css"> -->
<link rel="stylesheet" href="css/index.css" media="screen">
<link rel="stylesheet" href="css/form_joeStyle.css" media="screen">
......@@ -26,18 +26,19 @@
</head>
<body>
<header>
<h1> <img src="imgs/LogoSimstadt.png" style="height:12%;width:8%;"> Essen 3D Tiles with Building PointCloud Demo</h1>
</header>
<!-- <header class="backdrop">
<h3> <img src="imgs/LogoSimstadt.png" style="height:12%;width:8%;"> Window Extraction from Pointcloud (Essen)</h1>
</header> -->
<div id="cesiumContainer"></div>
<script src="EssenPC.js"></script>
<h4 onclick="open3DCMO()" style="cursor:pointer; color:rgb(030, 128, 15)">
<!-- <h4 class="" onclick="open3DCMO()" style="cursor:pointer; color:rgb(030, 128, 15)">
<strong><i class="fas fa-copy"></i> PointCloud Layers Menu</strong>
</h4>
<div class="backdrop mainbackdrop" id="DCMO" style="display:none">
</h4> -->
<div class="backdrop mainbackdrop" id="DCMO" style="display:show">
<h3> <img src="imgs/LogoSimstadt.png" style="height:12%;width:8%;"> Window Extraction from Pointcloud (Essen)</h3>
<strong>Window corner pts &emsp; </strong>
<button class="myButtonGreen" type="button" onclick="TurnOnPCWindows()">On</button>
<button class="myButtonRed" type="button" onclick="TurnOffPCWindows()">Off</button>
......@@ -61,13 +62,6 @@
<br>
</div>
<script src="TopMenuManagement.js"></script>
</body>
......
public/EssenPC.js
View file @ 4d4e9bdd
//$(function () {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ODI4ZTYyZS1mMTg2LTQ5NGEtYjdiOS02ODg2NzVhNjc0MTAiLCJpZCI6MjkwNCwiaWF0IjoxNTM1MTA5OTAzfQ.kyDX_0ScvJBkYnvXI0DW5NfZbiaRL5ezwtAUhxYnk1Y';
......@@ -23,16 +23,16 @@
var viewer = new Cesium.Viewer('cesiumContainer',
{
imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 }),
imageryProvider: new Cesium.IonImageryProvider({ assetId: 3 }),
terrainProvider : new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(1)
}),
scene3DOnly: false,
scene3DOnly: true,
shouldAnimate: true,
animation: true,
infoBox: true,
baseLayerPicker: true,
baseLayerPicker: false,
fullscreenButton: true,
timeline: false,
navigationHelpButton: true,
......@@ -45,10 +45,6 @@
var imageryLayer = viewer.imageryLayers.addImageryProvider(
new Cesium.IonImageryProvider({ assetId: 3954 })
);
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
......@@ -239,7 +235,7 @@
var zoomAll = function (pointCloud) {
return new Promise(function (resolve, reject) {
if (!pointCloud) { reject("Tileset is undifined"); }
viewer.camera.viewBoundingSphere(pointCloud.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 1500));
viewer.camera.viewBoundingSphere(pointCloud.boundingSphere, new Cesium.HeadingPitchRange(1.5, -0.5, 200));
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
resolve();
});
......@@ -455,89 +451,3 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
function showLegend() {
$("#legend").css("display", "block");
}
function hideLegend() {
$("#legend").css("display", "none");
}
// Legend - Colour Table
function emptyColourTable() {
$(".inner").empty();
}
function setHeightTable() {
$(".inner").append( "<table>" +
"<tr><td class='outlined' bgcolor='red'>&nbsp;&nbsp;&nbsp;&nbsp;</td><td> >= 40 </td></tr>" +
"<tr><td class='outlined' bgcolor='#ff5d00'></td><td> 25.1 - 30 m </td></tr>" +
"<tr><td class='outlined' bgcolor='#ffb400'></td><td> 20.1 - 25 m </td></tr>" +
"<tr><td class='outlined' bgcolor='yellow'></td><td> 15.1 - 20 m </td></tr>" +
"<tr><td class='outlined' bgcolor='#00ff00'></td><td> 10.1 - 15 m </td></tr>" +
"<tr><td class='outlined' bgcolor='blue'></td><td> 7.6 - 10 m</td></tr>" +
"<tr><td class='outlined' bgcolor='#4b0082'></td><td> 4.1 - 7.5 m</td></tr>" +
"<tr><td class='outlined' bgcolor='#f864dd'></td><td> 0.1 - 4 m </td></tr>" +
"<tr><td class='outlined' bgcolor='lightblue'></td><td> no data </td></tr>" +
"</table>" );
}
/*
return Cesium.when(tileset.readyPromise).then(function (tileset) {
tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
['true', 'color("lightblue")']
]
}
});
showLegend();
setHeightTable();
});
*/
/*
return Cesium.when(tileset.readyPromise).then(function (tileset) {
tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
['Number(${YearOfConstruction}) >= 2015', 'rgb(127,201,127)'],
['Number(${YearOfConstruction}) >= 2005', 'rgb(190,174,212)'],
['Number(${YearOfConstruction}) >= 1990', 'rgb(253,192,134)'],
['Number(${YearOfConstruction}) >= 1975', 'rgb(255,255,153)'],
['Number(${YearOfConstruction}) >= 1950', 'rgb(56,108,176)'],
['Number(${YearOfConstruction}) >= 1920', 'rgb(240,2,127)'],
['Number(${YearOfConstruction}) >= 1900', 'rgb(191,91,23)'],
['Number(${YearOfConstruction}) >= 1800', 'rgb(102,102,102)'],
['true', 'color("lightblue")']
]
}
});
}); */
//});
\ No newline at end of file
public/HFT.html
View file @ 4d4e9bdd
......@@ -3,20 +3,12 @@
<head>
<meta charset="utf-8" />
<title>Pointcloud Demo at HFT</title>
<!-- <link rel="stylesheet" href="css/myCesiumStyle.css">
<link rel="stylesheet" href="css/legend.css">
<link rel="stylesheet" href="css/index.css" media="screen">
<link rel="stylesheet" href="css/form_joeStyle.css" media="screen"> -->
<link
href="https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"
/>
<!-- <link
href="css/my_button.css"
rel="stylesheet"
/> -->
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
......@@ -41,6 +33,10 @@
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/index.css" media="screen">
<link rel="stylesheet" href="css/form_joeStyle.css" media="screen">
......@@ -49,27 +45,49 @@
<body>
<script src="HFT.js"></script>
<style>
@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="canvas fullSize">
</div>
<div id="cesiumContainer" class=""> </div>
<script src="HFT.js"></script>
<!-- <div id="toolbar">
</div> -->
<!--
<div id="loadingOverlay">
<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">
<h3> Layer selection </h3>
<strong>RGB PointCloud &emsp; </strong>
<button class="myButtonGreen" type="button" onclick="TurnOnRGBPC()">On</button>
<button class="myButtonRed" type="button" onclick="TurnOffRGBPC()">Off</button>
<br>
<br>
<strong>Blue PointCloud &emsp; </strong>
<button class="myButtonGreen" type="button" onclick="TurnOnLargePC()">On</button>
<button class="myButtonRed" type="button" onclick="TurnOffLargePC()">Off</button>
<br>
<br>
<strong>Buildings 3DTiles &nbsp; &emsp; </strong>
<button class="myButtonGreen" type="button" onclick="TurnOnHFTBld()">On</button>
<button class="myButtonRed" type="button" onclick="TurnOffHFTBld()">Off</button>
<br>
<br>
</div>
<!-- <div id="loadingOverlay">
<h1>Loading...</h1>
</div> -->
<div id="toolbar">
</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>
......
public/HFT.js
View file @ 4d4e9bdd
$(function () {
// 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({
// 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),
}),
});
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) {
}),
});
// 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");
reject("Tileset is undifined");
}
viewer.camera.viewBoundingSphere(
tileset.boundingSphere,
new Cesium.HeadingPitchRange(0, -0.5, 400)
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(
});
};
//////////////////////////// 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),
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) {
);
//////// 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
tileset.boundingSphere.center
);
var surface = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
0.0
cartographic.longitude,
cartographic.latitude,
0.0
);
var offset = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
height
cartographic.longitude,
cartographic.latitude,
height
);
var translation = Cesium.Cartesian3.subtract(
offset,
surface,
new Cesium.Cartesian3()
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
});
}
/////////////////////////////////////////////////////////////////////
// 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);
viewer.scene.primitives.add(osmBuildings);
})
.otherwise(function (error) {
console.log(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({
// 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
48.78029680030391,
20000
),
orientation: {
heading: 0.0,
pitch: -Cesium.Math.PI_OVER_TWO, // set an oblique viewing angle
roll: 0.0,
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
});
tileset.style = new Cesium.Cesium3DTileStyle({
show: false
});
////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
// 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
///////////////////////////// innenhof PC
var HFTInnehof = viewer.scene.primitives.add(
var HFTInnehof = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(656854),
url: Cesium.IonResource.fromAssetId(656854),
})
);
HFTInnehof.style = new Cesium.Cesium3DTileStyle({
);
HFTInnehof.style = new Cesium.Cesium3DTileStyle({
// color: "color('blue',0.3)",
// color: "color('red')" ,
pointSize: 3
});
});
\ No newline at end of file
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;
}