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
master
No related merge requests found
Pipeline #5254 passed with stages
in 29 seconds
Show whitespace changes
Inline Side-by-side
Showing
with 225 additions and 265 deletions
+225 -265
public/EssenPC.html
+ 9
- 15
View file @ 4d4e9bdd
...@@ -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>
...@@ -62,13 +63,6 @@ ...@@ -62,13 +63,6 @@
</div> </div>
<script src="TopMenuManagement.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
public/EssenPC.js
+ 5
- 95
View file @ 4d4e9bdd
//$(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
public/HFT.html
+ 38
- 20
View file @ 4d4e9bdd
...@@ -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,25 +45,47 @@ ...@@ -49,25 +45,47 @@
<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>
......
public/HFT.js
+ 172
- 134
View file @ 4d4e9bdd
$(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
...@@ -14,12 +14,21 @@ $(function () { ...@@ -14,12 +14,21 @@ $(function () {
terrainProvider: new Cesium.CesiumTerrainProvider({ terrainProvider: new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(1), url: Cesium.IonResource.fromAssetId(1),
}), }),
}); });
// 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 viewer.scene.globe.enableLighting = true; // set lighting to true
// define a function to zoom to the tileset (invoke later) // define a function to zoom to the tileset (invoke later)
var zoomAll = function (tileset) { var zoomAll = function (tileset) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
if (!tileset) { if (!tileset) {
reject("Tileset is undifined"); reject("Tileset is undifined");
...@@ -31,13 +40,13 @@ $(function () { ...@@ -31,13 +40,13 @@ $(function () {
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({
...@@ -73,12 +82,12 @@ $(function () { ...@@ -73,12 +82,12 @@ $(function () {
//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) {
...@@ -102,26 +111,26 @@ $(function () { ...@@ -102,26 +111,26 @@ $(function () {
roll: 0.0, roll: 0.0,
}, },
}); });
} }
tileset.style = new Cesium.Cesium3DTileStyle({ tileset.style = new Cesium.Cesium3DTileStyle({
show: false show: true
}); });
//////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////
// HFT PointCloud Tileset. // HFT PointCloud Tileset.
//////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////
const PCOFFSET = 0; const PCOFFSET = 0;
var HFTBuildingsPC = viewer.scene.primitives.add( var HFTBuildingsPC = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({ new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(655879), url: Cesium.IonResource.fromAssetId(655879),
}) })
); );
HFTBuildingsPC.readyPromise.then(function (HFTBuildingsPC) { HFTBuildingsPC.readyPromise.then(function (HFTBuildingsPC) {
var height = PCOFFSET; var height = PCOFFSET;
var cartographic = Cesium.Cartographic.fromCartesian( var cartographic = Cesium.Cartographic.fromCartesian(
HFTBuildingsPC.boundingSphere.center HFTBuildingsPC.boundingSphere.center
...@@ -145,29 +154,58 @@ $(function () { ...@@ -145,29 +154,58 @@ $(function () {
HFTBuildingsPC.modelMatrix = Cesium.Matrix4.fromTranslation(translation); HFTBuildingsPC.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
return zoomAll(HFTBuildingsPC); // zoom or rather go to the translated tileset return zoomAll(HFTBuildingsPC); // zoom or rather go to the translated tileset
}); });
HFTBuildingsPC.style = new Cesium.Cesium3DTileStyle({ HFTBuildingsPC.style = new Cesium.Cesium3DTileStyle({
color: "color('blue',0.3)", color: "color('blue',0.3)",
// color: "color('red')" , // color: "color('red')" ,
pointSize: 3 pointSize: 3
}); });
///////////////////////////// innenhof PC
var HFTInnehof = viewer.scene.primitives.add( ///////////////////////////// innenhof PC
var HFTInnehof = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({ 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('blue',0.3)",
// color: "color('red')" , // color: "color('red')" ,
pointSize: 3 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;
}
});
public/TopMenuManagement.js
+ 1
- 1
View file @ 4d4e9bdd
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
var open3DCMO = function () { var open3DCMO = function () {
if (DCMO.style.display === 'none') { if (DCMO.style.display === 'none') {
//DCMO.style.display = "block"; DCMO.style.display = "block";
$("#DCMO").show("3000"); $("#DCMO").show("3000");
//AnalysisSec.style.display = 'none' //AnalysisSec.style.display = 'none'
//HightChartContainer.style.display = "none"; //HightChartContainer.style.display = "none";
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal