diff --git a/public/EssenPC.html b/public/EssenPC.html
index 2d9938d522da053427cc2d9e2cb5be752a4bb1d5..2f48760b255f4ae3d0de06fac2263773f4c53413 100644
--- a/public/EssenPC.html
+++ b/public/EssenPC.html
@@ -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   </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>
diff --git a/public/EssenPC.js b/public/EssenPC.js
index 0391ff50ccc443a4359f43bcd7ef05f5807a7f19..8e65be512eebed19c795f6f11411b62b45a88aed 100644
--- a/public/EssenPC.js
+++ b/public/EssenPC.js
@@ -1,4 +1,4 @@
-//$(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'> </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
diff --git a/public/HFT.html b/public/HFT.html
index c8020635017c0b79c7eff5cd6de21ac224648068..8e4729ed4fbc6f3566b6e31a01c22519d1d0772a 100644
--- a/public/HFT.html
+++ b/public/HFT.html
@@ -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   </strong>
+ <button class="myButtonGreen" type="button" onclick="TurnOnRGBPC()">On</button>
+ <button class="myButtonRed" type="button" onclick="TurnOffRGBPC()">Off</button>
+ <br>
+ <br>
+ <strong>Blue PointCloud   </strong>
+ <button class="myButtonGreen" type="button" onclick="TurnOnLargePC()">On</button>
+ <button class="myButtonRed" type="button" onclick="TurnOffLargePC()">Off</button>
+ <br>
+ <br>
+ <strong>Buildings 3DTiles   </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>
diff --git a/public/HFT.js b/public/HFT.js
index 20681228e6272eff3bae9fcde22f198eb3530b87..a0e65770251313e249907d6258a4ff18ae1df350 100644
--- a/public/HFT.js
+++ b/public/HFT.js
@@ -1,173 +1,211 @@
-$(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;
+}
+
+
+
diff --git a/public/TopMenuManagement.js b/public/TopMenuManagement.js
index 9f18f1230f463c567ffa146476d6aa9749b67603..2582999aa9917ec9e2bd12edddad151477033734 100644
--- a/public/TopMenuManagement.js
+++ b/public/TopMenuManagement.js
@@ -4,7 +4,7 @@
var open3DCMO = function () {
if (DCMO.style.display === 'none') {
- //DCMO.style.display = "block";
+ DCMO.style.display = "block";
$("#DCMO").show("3000");
//AnalysisSec.style.display = 'none'
//HightChartContainer.style.display = "none";