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
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Window Detection Demo</title> <title>Window Detection Demo</title>
<link rel="stylesheet" href="css/myCesiumStyle.css"> <!-- <link rel="stylesheet" href="css/myCesiumStyle.css"> -->
<link rel="stylesheet" href="css/legend.css"> <!-- <link rel="stylesheet" href="css/legend.css"> -->
<link rel="stylesheet" href="css/index.css" media="screen"> <link rel="stylesheet" href="css/index.css" media="screen">
<link rel="stylesheet" href="css/form_joeStyle.css" media="screen"> <link rel="stylesheet" href="css/form_joeStyle.css" media="screen">
...@@ -26,18 +26,19 @@ ...@@ -26,18 +26,19 @@
</head> </head>
<body> <body>
<header> <!-- <header class="backdrop">
<h1> <img src="imgs/LogoSimstadt.png" style="height:12%;width:8%;"> Essen 3D Tiles with Building PointCloud Demo</h1> <h3> <img src="imgs/LogoSimstadt.png" style="height:12%;width:8%;"> Window Extraction from Pointcloud (Essen)</h1>
</header> </header> -->
<div id="cesiumContainer"></div> <div id="cesiumContainer"></div>
<script src="EssenPC.js"></script> <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> <strong><i class="fas fa-copy"></i> PointCloud Layers Menu</strong>
</h4> </h4> -->
<div class="backdrop mainbackdrop" id="DCMO" style="display:none"> <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> <strong>Window corner pts &emsp; </strong>
<button class="myButtonGreen" type="button" onclick="TurnOnPCWindows()">On</button> <button class="myButtonGreen" type="button" onclick="TurnOnPCWindows()">On</button>
<button class="myButtonRed" type="button" onclick="TurnOffPCWindows()">Off</button> <button class="myButtonRed" type="button" onclick="TurnOffPCWindows()">Off</button>
...@@ -61,13 +62,6 @@ ...@@ -61,13 +62,6 @@
<br> <br>
</div> </div>
<script src="TopMenuManagement.js"></script>
</body> </body>
......
//$(function () {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ODI4ZTYyZS1mMTg2LTQ5NGEtYjdiOS02ODg2NzVhNjc0MTAiLCJpZCI6MjkwNCwiaWF0IjoxNTM1MTA5OTAzfQ.kyDX_0ScvJBkYnvXI0DW5NfZbiaRL5ezwtAUhxYnk1Y'; Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ODI4ZTYyZS1mMTg2LTQ5NGEtYjdiOS02ODg2NzVhNjc0MTAiLCJpZCI6MjkwNCwiaWF0IjoxNTM1MTA5OTAzfQ.kyDX_0ScvJBkYnvXI0DW5NfZbiaRL5ezwtAUhxYnk1Y';
...@@ -23,16 +23,16 @@ ...@@ -23,16 +23,16 @@
var viewer = new Cesium.Viewer('cesiumContainer', var viewer = new Cesium.Viewer('cesiumContainer',
{ {
imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 }), imageryProvider: new Cesium.IonImageryProvider({ assetId: 3 }),
terrainProvider : new Cesium.CesiumTerrainProvider({ terrainProvider : new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(1) url: Cesium.IonResource.fromAssetId(1)
}), }),
scene3DOnly: false, scene3DOnly: true,
shouldAnimate: true, shouldAnimate: true,
animation: true, animation: true,
infoBox: true, infoBox: true,
baseLayerPicker: true, baseLayerPicker: false,
fullscreenButton: true, fullscreenButton: true,
timeline: false, timeline: false,
navigationHelpButton: true, navigationHelpButton: true,
...@@ -45,10 +45,6 @@ ...@@ -45,10 +45,6 @@
var imageryLayer = viewer.imageryLayers.addImageryProvider(
new Cesium.IonImageryProvider({ assetId: 3954 })
);
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
...@@ -239,7 +235,7 @@ ...@@ -239,7 +235,7 @@
var zoomAll = function (pointCloud) { var zoomAll = function (pointCloud) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
if (!pointCloud) { reject("Tileset is undifined"); } 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); viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
resolve(); resolve();
}); });
...@@ -455,89 +451,3 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { ...@@ -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
...@@ -3,20 +3,12 @@ ...@@ -3,20 +3,12 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Pointcloud Demo at HFT</title> <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 <link
href="https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Widgets/widgets.css" href="https://cesium.com/downloads/cesiumjs/releases/1.69/Build/Cesium/Widgets/widgets.css"
rel="stylesheet" rel="stylesheet"
/> />
<!-- <link
href="css/my_button.css"
rel="stylesheet"
/> -->
<script <script
src="https://code.jquery.com/jquery-2.2.4.min.js" src="https://code.jquery.com/jquery-2.2.4.min.js"
...@@ -41,6 +33,10 @@ ...@@ -41,6 +33,10 @@
crossorigin="anonymous" 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 @@ ...@@ -49,27 +45,49 @@
<body> <body>
<script src="HFT.js"></script>
<style> <style>
@import url(templates/bucket.css); @import url(templates/bucket.css);
</style> </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 id="cesiumContainer" class=""> </div>
</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> <h1>Loading...</h1>
</div> --> </div> -->
<div id="toolbar">
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script> <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/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> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
......
$(function () {
// specifiy credentials and assets from Cesium ION account // specifiy credentials and assets from Cesium ION account
Cesium.Ion.defaultAccessToken = Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYjY5ZTAxNy03YTc0LTQyZTYtYjJlMC0xYzYwNTAzNDQ0ZjUiLCJpZCI6MjkwNCwiaWF0IjoxNjM1NDEzOTI0fQ.Xhmt0sD4Dda4Q46FBYew4wPbqlJ4T8U9n1nNNwGyH7o"; "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYjY5ZTAxNy03YTc0LTQyZTYtYjJlMC0xYzYwNTAzNDQ0ZjUiLCJpZCI6MjkwNCwiaWF0IjoxNjM1NDEzOTI0fQ.Xhmt0sD4Dda4Q46FBYew4wPbqlJ4T8U9n1nNNwGyH7o";
// setting up Cesium Viewer // setting up Cesium Viewer
var viewer = new Cesium.Viewer("cesiumContainer", { var viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: new Cesium.IonImageryProvider({ assetId: 3 }), //3 bing maps with labels // use Sentinel2 imagery as default assetID:3954 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 // 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 // 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) // comment the next 3 lines to remove the Cesium terrain (Resulution approx. 30m)
///////////////////////////////////////// /////////////////////////////////////////
terrainProvider: new Cesium.CesiumTerrainProvider({ terrainProvider: new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(1), url: Cesium.IonResource.fromAssetId(1),
}), }),
}); });
viewer.scene.globe.enableLighting = true; // set lighting to true
// set home button extend
// define a function to zoom to the tileset (invoke later) var extent = Cesium.Rectangle.fromDegrees( 9.162794728779428,48.78605872069245, 9.181827683763427, 48.77616123564855);
var zoomAll = function (tileset) { Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
return new Promise(function (resolve, reject) { 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) { if (!tileset) {
reject("Tileset is undifined"); reject("Tileset is undifined");
} }
viewer.camera.viewBoundingSphere( viewer.camera.viewBoundingSphere(
tileset.boundingSphere, tileset.boundingSphere,
new Cesium.HeadingPitchRange(0, -0.5, 400) new Cesium.HeadingPitchRange(0, -0.5, 400)
); );
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
resolve(); resolve();
}); });
}; };
//////////////////////////// load 3d building tiles or OSM 3d Buildings /////////////////////// //////////////////////////// load 3d building tiles or OSM 3d Buildings ///////////////////////
// here is the switch to switch between different 3d buildings // here is the switch to switch between different 3d buildings
const LOAD_3DTILES = true; const LOAD_3DTILES = true;
if (LOAD_3DTILES) { if (LOAD_3DTILES) {
// load 3d Tile set of SToeckach. // load 3d Tile set of SToeckach.
var tileset = viewer.scene.primitives.add( var tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({ 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 //////// important value. to find the correct value trail and error is needed for a perfect fit
const BUILDIG_TILESET_HEIGHT_OFFSET = 54; const BUILDIG_TILESET_HEIGHT_OFFSET = 54;
tileset.readyPromise.then(function (tileset) { tileset.readyPromise.then(function (tileset) {
var height = BUILDIG_TILESET_HEIGHT_OFFSET; var height = BUILDIG_TILESET_HEIGHT_OFFSET;
var cartographic = Cesium.Cartographic.fromCartesian( var cartographic = Cesium.Cartographic.fromCartesian(
tileset.boundingSphere.center tileset.boundingSphere.center
); );
var surface = Cesium.Cartesian3.fromRadians( var surface = Cesium.Cartesian3.fromRadians(
cartographic.longitude, cartographic.longitude,
cartographic.latitude, cartographic.latitude,
0.0 0.0
); );
var offset = Cesium.Cartesian3.fromRadians( var offset = Cesium.Cartesian3.fromRadians(
cartographic.longitude, cartographic.longitude,
cartographic.latitude, cartographic.latitude,
height height
); );
var translation = Cesium.Cartesian3.subtract( var translation = Cesium.Cartesian3.subtract(
offset, offset,
surface, surface,
new Cesium.Cartesian3() new Cesium.Cartesian3()
); );
// now shift / translate the tileset by the translation vector defined above // now shift / translate the tileset by the translation vector defined above
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation); 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
}); });
} }
///////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////
// Alternatively, instead of using the Stoeckach LOD1 Building 3d Tiles, // 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' // use OSM Buildings from Cesium ION assets - in this case set LOAD_3DTILES variable in Line 41 to 'false'
//////////////////////////////////////////////////////// ////////////////////////////////////////////////////////
else { else {
var osmBuildings = Cesium.createOsmBuildings(); var osmBuildings = Cesium.createOsmBuildings();
osmBuildings.readyPromise osmBuildings.readyPromise
.then(function (osmBuildings) { .then(function (osmBuildings) {
viewer.scene.primitives.add(osmBuildings); viewer.scene.primitives.add(osmBuildings);
}) })
.otherwise(function (error) { .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. // 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. // if you use '+Cesium.Math.PI_OVER_TWO', you look into space.
viewer.camera.setView({ viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees( destination: Cesium.Cartesian3.fromDegrees(
9.172183958234173, 9.172183958234173,
48.78029680030391, 48.78029680030391,
20000 20000
), ),
orientation: { orientation: {
heading: 0.0, heading: 0.0,
pitch: -Cesium.Math.PI_OVER_TWO, // set an oblique viewing angle pitch: -Cesium.Math.PI_OVER_TWO, // set an oblique viewing angle
roll: 0.0, 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