Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Sven Schneider
urbanVIS
Commits
4d4e9bdd
Commit
4d4e9bdd
authored
Oct 29, 2021
by
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
Changes
5
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
public/EssenPC.html
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"
>
<h
1
>
<img
src=
"imgs/LogoSimstadt.png"
style=
"height:12%;width:8%;"
>
Essen 3D Tiles with Building
Point
C
loud
Demo
</h1>
<h
3
> <img src="imgs/LogoSimstadt.png"
style="height:12%;width:8%;">
Window Extraction from
Point
c
loud
(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
 
</strong>
<strong>
Window corner pts
 
</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>
...
...
public/EssenPC.js
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
:
3
954
}),
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
:
fals
e
,
scene3DOnly
:
tru
e
,
shouldAnimate
:
true
,
shouldAnimate
:
true
,
animation
:
true
,
animation
:
true
,
infoBox
:
true
,
infoBox
:
true
,
baseLayerPicker
:
tru
e
,
baseLayerPicker
:
fals
e
,
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
,
15
00
));
viewer
.
camera
.
viewBoundingSphere
(
pointCloud
.
boundingSphere
,
new
Cesium
.
HeadingPitchRange
(
1.5
,
-
0.5
,
2
00
));
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'> </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 @@
...
@@ -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
 
</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>
<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>
...
...
public/HFT.js
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
// 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