Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
iCity
EnergyDashboard
Commits
86bff050
Commit
86bff050
authored
Jun 25, 2021
by
Sven Schneider
Browse files
added aggregation method into appCharts.js
parent
02bd3700
Changes
3
Expand all
Hide whitespace changes
Inline
Side-by-side
index.html
View file @
86bff050
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<head>
<meta
charset=
"utf-8"
/>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
/>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta
name=
"description"
content=
""
/>
<meta
name=
"author"
content=
""
/>
<title>
Dashboard - iCity Bosch
</title>
<link
href=
"css/styles.css"
rel=
"stylesheet"
/>
<link
href=
"https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"
rel=
"stylesheet"
crossorigin=
"anonymous"
/>
<link
href=
"https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"
rel=
"stylesheet"
crossorigin=
"anonymous"
/>
<!-- Font Awesome icons -->
<script
src=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"
crossorigin=
"anonymous"
></script>
<script
src=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"
crossorigin=
"anonymous"
></script>
<!-- Axios -->
<!-- <script src="./node_modules/axios/dist/axios.min.js"></script> -->
...
...
@@ -46,122 +37,100 @@
<!-- Cesium lib -->
<script
src=
"https://cesium.com/downloads/cesiumjs/releases/1.48/Build/Cesium/Cesium.js"
></script>
<link
href=
"https://cesium.com/downloads/cesiumjs/releases/1.48/Build/Cesium/Widgets/widgets.css"
rel=
"stylesheet"
/>
<link
href=
"https://cesium.com/downloads/cesiumjs/releases/1.48/Build/Cesium/Widgets/widgets.css"
rel=
"stylesheet"
/>
<!-- Bootstrap dashboard template -->
<script
defer
src=
"https://code.jquery.com/jquery-3.5.1.slim.min.js"
crossorigin=
"anonymous"
></script>
<script
defer
src=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
crossorigin=
"anonymous"
></script>
<script
defer
src=
"https://code.jquery.com/jquery-3.5.1.slim.min.js"
crossorigin=
"anonymous"
></script>
<script
defer
src=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
crossorigin=
"anonymous"
></script>
<script
defer
src=
"js/thirdparty/scripts.js"
></script>
<!--
Custom JS -->
<script
defer
type=
"module"
src=
"js/appCesium.js"
></script>
<script
defer
type=
"module"
src=
"js/appChart.js"
></script>
</head>
<body
class=
"sb-nav-fixed"
>
</head>
<body
class=
"sb-nav-fixed"
>
<nav
class=
"sb-topnav navbar navbar-expand navbar-dark bg-dark"
>
<a
class=
"navbar-brand"
href=
"index.html"
>
iCity Bosch Dashboard
</a>
<button
class=
"btn btn-link btn-sm order-1 order-lg-0"
id=
"sidebarToggle"
href=
"#"
>
<a
class=
"navbar-brand"
href=
"index.html"
>
iCity Bosch Dashboard
</a>
<button
class=
"btn btn-link btn-sm order-1 order-lg-0"
id=
"sidebarToggle"
href=
"#"
>
<i
class=
"fas fa-bars"
></i>
</button>
</nav>
<div
id=
"layoutSidenav"
>
<div
id=
"layoutSidenav_nav"
>
<nav
class=
"sb-sidenav accordion sb-sidenav-dark"
id=
"sidenavAccordion"
>
<div
class=
"sb-sidenav-menu"
>
<div
class=
"nav"
>
<div
class=
"sb-sidenav-menu-heading"
>
Core
</div>
<a
class=
"nav-link"
href=
"index.html"
>
<div
class=
"sb-nav-link-icon"
>
<i
class=
"fas fa-tachometer-alt"
></i>
<div
id=
"layoutSidenav_nav"
>
<nav
class=
"sb-sidenav accordion sb-sidenav-dark"
id=
"sidenavAccordion"
>
<div
class=
"sb-sidenav-menu"
>
<div
class=
"nav"
>
<div
class=
"sb-sidenav-menu-heading"
>
Core
</div>
<a
class=
"nav-link"
href=
"index.html"
>
<div
class=
"sb-nav-link-icon"
>
<i
class=
"fas fa-tachometer-alt"
></i>
</div>
Dashboard
</a>
</div>
</div>
Dashboard
</a>
</div>
</div>
</nav>
</div>
<div
id=
"layoutSidenav_content"
>
<main>
<div
class=
"container-fluid"
>
<h1
class=
"mt-4"
>
Dashboard
</h1>
<ol
class=
"breadcrumb mb-4"
>
<li
class=
"breadcrumb-item active"
>
Dashboard
</li>
</ol>
</nav>
</div>
<div
id=
"layoutSidenav_content"
>
<main>
<div
class=
"container-fluid"
>
<h1
class=
"mt-4"
>
Dashboard
</h1>
<ol
class=
"breadcrumb mb-4"
>
<li
class=
"breadcrumb-item active"
>
Dashboard
</li>
</ol>
<div
class=
"row"
>
<div
class=
"col-xl-12"
>
<div
class=
"card mb-4"
>
<div
class=
"card-header"
>
<i
class=
"fas fa-globe mr-1"
></i>
3D Visualization
</div>
<div
class=
"card-body"
>
<div
id=
"cesiumGlobeContainer"
width=
"100%"
height=
"40"
></div>
</div>
<div
class=
"row"
>
<div
class=
"col-xl-12"
>
<div
class=
"card mb-4"
>
<div
class=
"card-header"
>
<i
class=
"fas fa-globe mr-1"
></i>
3D Visualization
</div>
<div
class=
"card-body"
>
<div
id=
"cesiumGlobeContainer"
width=
"100%"
height=
"40"
>
</div>
</div>
</div>
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-xl-6"
>
<div
class=
"card mb-4"
>
<div
class=
"card-header"
>
<i
class=
"fas fa-chart-line mr-1"
></i>
Line Chart Example
</div>
<div
class=
"card-body"
>
<div
id=
"chart-line"
width=
"100%"
height=
"40"
></div>
</div>
</div>
</div>
<div
class=
"col-xl-6"
>
<div
class=
"card mb-4"
>
<div
class=
"card-header"
>
<i
class=
"fas fa-chart-area mr-1"
></i>
Area Chart Example
</div>
<div
class=
"card-body"
>
<div
id=
"chart-heatmap"
width=
"100%"
height=
"40"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-xl-6"
>
<div
class=
"card mb-4"
>
<div
class=
"card-header"
>
<i
class=
"fas fa-chart-line mr-1"
></i>
Line Chart Example
</div>
<div
class=
"card-body"
>
<div
id=
"chart-line"
width=
"100%"
height=
"40"
></div>
</div>
</main>
<footer
class=
"py-4 bg-light mt-auto"
>
<div
class=
"container-fluid"
>
<div
class=
"d-flex align-items-center justify-content-between small"
>
<div
class=
"text-muted"
>
Copyright
©
HfT Stuttgart 2021
</div>
<div>
<a
href=
"#"
>
Privacy Policy
</a>
·
<a
href=
"#"
>
Terms
&
Conditions
</a>
</div>
</div>
</div>
</div>
<div
class=
"col-xl-6"
>
<div
class=
"card mb-4"
>
<div
class=
"card-header"
>
<i
class=
"fas fa-chart-area mr-1"
></i>
Area Chart Example
</div>
<div
class=
"card-body"
>
<div
id=
"chart-heatmap"
width=
"100%"
height=
"40"
></div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer
class=
"py-4 bg-light mt-auto"
>
<div
class=
"container-fluid"
>
<div
class=
"d-flex align-items-center justify-content-between small"
>
<div
class=
"text-muted"
>
Copyright
©
HfT Stuttgart 2021
</div>
<div>
<a
href=
"#"
>
Privacy Policy
</a>
·
<a
href=
"#"
>
Terms
&
Conditions
</a>
</div>
</div>
</div>
</footer>
</div>
</footer>
</div>
</div>
</body>
</html>
</body>
</html>
\ No newline at end of file
public/js/appCesium.js
View file @
86bff050
...
...
@@ -2,26 +2,27 @@
// Functions
import
{
getDatastreamIdFromBuildingNumber
,
getObservationsUrl
,
createTemporalFilterString
,
formatSTAResponseForHeatMap
,
drawHeatMapHC
,
formatSTAResponseForLineChart
,
drawLineChartHC
,
followNextLink
,
getDatastreamIdFromBuildingNumber
,
getObservationsUrl
,
createTemporalFilterString
,
formatSTAResponseForHeatMap
,
drawHeatMapHC
,
formatSTAResponseForLineChart
,
drawLineChartHC
,
followNextLink
,
aggregateResponse
,
}
from
"
./appChart.js
"
;
// Constants
import
{
BASE_URL
,
PARAM_RESULT_FORMAT
,
PARAM_ORDER_BY
,
PARAM_SELECT
,
BASE_URL
,
PARAM_RESULT_FORMAT
,
PARAM_ORDER_BY
,
PARAM_SELECT
,
}
from
"
./appChart.js
"
;
Cesium
.
Ion
.
defaultAccessToken
=
"
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyODgxYzJlNi1kNDZiLTQ3ZmQtYmUxYy0yMWI0OGM3NDA5MzAiLCJpZCI6NDczOSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MTUyMzU0MX0.shj2hM3pvsvcmE_wMb2aBDuk_cKWmFmbolltInGImwU
"
;
"
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyODgxYzJlNi1kNDZiLTQ3ZmQtYmUxYy0yMWI0OGM3NDA5MzAiLCJpZCI6NDczOSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MTUyMzU0MX0.shj2hM3pvsvcmE_wMb2aBDuk_cKWmFmbolltInGImwU
"
;
// Flag to determine models that will be loaded
// Set to `true` or `false`
...
...
@@ -29,10 +30,10 @@ const LOAD_DETAILED_BLDG225 = false;
// Global variable
const
viewer
=
new
Cesium
.
Viewer
(
"
cesiumGlobeContainer
"
,
{
scene3DOnly
:
true
,
imageryProvider
:
Cesium
.
createOpenStreetMapImageryProvider
({
url
:
"
https://a.tile.openstreetmap.org/
"
,
}),
scene3DOnly
:
true
,
imageryProvider
:
Cesium
.
createOpenStreetMapImageryProvider
({
url
:
"
https://a.tile.openstreetmap.org/
"
,
}),
});
/**
...
...
@@ -40,26 +41,25 @@ const viewer = new Cesium.Viewer("cesiumGlobeContainer", {
* @param {String} urlTiles URL to the 3DTiles to be loaded
* @returns {undefined} undefined
*/
const
loadTiles
=
function
(
urlTiles
)
{
const
tileset
=
new
Cesium
.
Cesium3DTileset
({
url
:
urlTiles
,
});
viewer
.
scene
.
primitives
.
add
(
tileset
);
tileset
.
readyPromise
.
then
(
function
()
{
viewer
.
zoomTo
(
tileset
,
new
Cesium
.
HeadingPitchRange
(
0.0
,
-
0.5
,
tileset
.
boundingSphere
.
radius
/
0.5
)
)
.
otherwise
(
function
(
err
)
{
throw
err
;
});
});
const
loadTiles
=
function
(
urlTiles
)
{
const
tileset
=
new
Cesium
.
Cesium3DTileset
({
url
:
urlTiles
,
});
viewer
.
scene
.
primitives
.
add
(
tileset
);
tileset
.
readyPromise
.
then
(
function
()
{
viewer
.
zoomTo
(
tileset
,
new
Cesium
.
HeadingPitchRange
(
0.0
,
-
0.5
,
tileset
.
boundingSphere
.
radius
/
0.5
)
)
.
otherwise
(
function
(
err
)
{
throw
err
;
});
});
};
/**
...
...
@@ -67,12 +67,12 @@ const loadTiles = function (urlTiles) {
* @param{*}
* @returns {undefined} undefined
*/
const
loadNonDetailed
=
function
()
{
// Paths to data sources
const
URL_3DTILES
=
"
data_3d/3dtiles/1_full/tileset.json
"
;
const
loadNonDetailed
=
function
()
{
// Paths to data sources
const
URL_3DTILES
=
"
data_3d/3dtiles/1_full/tileset.json
"
;
// Tileset with all buildings
loadTiles
(
URL_3DTILES
);
// Tileset with all buildings
loadTiles
(
URL_3DTILES
);
};
/**
...
...
@@ -81,19 +81,19 @@ const loadNonDetailed = function () {
* @param {String} gltfId Name of the glTF model file without the extension i.e. exclude the `.gltf` suffix
* @returns {undefined} undefined
*/
const
gltfLoad
=
function
(
gltfUrl
,
gltfId
)
{
const
modelMatrix
=
Cesium
.
Transforms
.
eastNorthUpToFixedFrame
(
Cesium
.
Cartesian3
.
fromDegrees
(
9.083385
,
48.881342
,
0
)
);
viewer
.
scene
.
primitives
.
add
(
Cesium
.
Model
.
fromGltf
({
url
:
`
${
gltfUrl
}
/
${
gltfId
}
.gltf`
,
modelMatrix
:
modelMatrix
,
scale
:
0.0254
,
allowPicking
:
true
,
})
);
const
gltfLoad
=
function
(
gltfUrl
,
gltfId
)
{
const
modelMatrix
=
Cesium
.
Transforms
.
eastNorthUpToFixedFrame
(
Cesium
.
Cartesian3
.
fromDegrees
(
9.083385
,
48.881342
,
0
)
);
viewer
.
scene
.
primitives
.
add
(
Cesium
.
Model
.
fromGltf
({
url
:
`
${
gltfUrl
}
/
${
gltfId
}
.gltf`
,
modelMatrix
:
modelMatrix
,
scale
:
0.0254
,
allowPicking
:
true
,
})
);
};
/**
...
...
@@ -101,64 +101,64 @@ const gltfLoad = function (gltfUrl, gltfId) {
* @param{*}
* @returns {undefined} undefined
*/
const
loadDetailed
=
function
()
{
// Paths to data sources
const
URL_3DTILES
=
"
data_3d/3dtiles/2_partial/tileset.json
"
;
const
URL_GLTF
=
"
data_3d/gltf
"
;
// Tileset without building 225
loadTiles
(
URL_3DTILES
);
// Load Building 225
gltfLoad
(
URL_GLTF
,
"
bosch_si225_3
"
);
// Load sensors in Building 225
const
gltfArray
=
[
"
sensor_013
"
,
"
sensor_023
"
,
"
sensor_033
"
,
"
sensor_053
"
,
"
sensor_063
"
,
"
sensor_073
"
,
"
sensor_083
"
,
"
sensor_093
"
,
"
sensor_103
"
,
"
sensor_113
"
,
"
sensor_123
"
,
"
sensor_133
"
,
"
sensor_143
"
,
"
sensor_153
"
,
"
sensor_163
"
,
"
sensor_173
"
,
"
sensor_183
"
,
"
sensor_213
"
,
"
sensor_223
"
,
"
sensor_233
"
,
"
sensor_253
"
,
"
sensor_263
"
,
"
sensor_273
"
,
"
sensor_283
"
,
"
sensor_293
"
,
"
sensor_303
"
,
"
sensor_313
"
,
"
sensor_323
"
,
"
sensor_333
"
,
"
sensor_343
"
,
"
sensor_353
"
,
"
sensor_363
"
,
"
sensor_373
"
,
"
sensor_383_v2
"
,
];
gltfArray
.
forEach
((
sensor
)
=>
gltfLoad
(
URL_GLTF
,
sensor
));
const
loadDetailed
=
function
()
{
// Paths to data sources
const
URL_3DTILES
=
"
data_3d/3dtiles/2_partial/tileset.json
"
;
const
URL_GLTF
=
"
data_3d/gltf
"
;
// Tileset without building 225
loadTiles
(
URL_3DTILES
);
// Load Building 225
gltfLoad
(
URL_GLTF
,
"
bosch_si225_3
"
);
// Load sensors in Building 225
const
gltfArray
=
[
"
sensor_013
"
,
"
sensor_023
"
,
"
sensor_033
"
,
"
sensor_053
"
,
"
sensor_063
"
,
"
sensor_073
"
,
"
sensor_083
"
,
"
sensor_093
"
,
"
sensor_103
"
,
"
sensor_113
"
,
"
sensor_123
"
,
"
sensor_133
"
,
"
sensor_143
"
,
"
sensor_153
"
,
"
sensor_163
"
,
"
sensor_173
"
,
"
sensor_183
"
,
"
sensor_213
"
,
"
sensor_223
"
,
"
sensor_233
"
,
"
sensor_253
"
,
"
sensor_263
"
,
"
sensor_273
"
,
"
sensor_283
"
,
"
sensor_293
"
,
"
sensor_303
"
,
"
sensor_313
"
,
"
sensor_323
"
,
"
sensor_333
"
,
"
sensor_343
"
,
"
sensor_353
"
,
"
sensor_363
"
,
"
sensor_373
"
,
"
sensor_383_v2
"
,
];
gltfArray
.
forEach
((
sensor
)
=>
gltfLoad
(
URL_GLTF
,
sensor
));
};
if
(
!
LOAD_DETAILED_BLDG225
)
{
// Default case: load only 3dTiles
loadNonDetailed
();
// Default case: load only 3dTiles
loadNonDetailed
();
}
else
{
// Alternative case: load 3dTiles + glTF
loadDetailed
();
// Alternative case: load 3dTiles + glTF
loadDetailed
();
}
/**
...
...
@@ -166,109 +166,109 @@ if (!LOAD_DETAILED_BLDG225) {
* @param {*}
* @returns {undefined}
*/
const
activate3DTileFeaturePicking
=
function
()
{
// HTML overlay for showing feature name on mouseover
const
nameOverlay
=
document
.
createElement
(
"
div
"
);
viewer
.
container
.
appendChild
(
nameOverlay
);
nameOverlay
.
className
=
"
backdrop
"
;
nameOverlay
.
style
.
display
=
"
none
"
;
nameOverlay
.
style
.
position
=
"
absolute
"
;
nameOverlay
.
style
.
bottom
=
"
0
"
;
nameOverlay
.
style
.
left
=
"
0
"
;
nameOverlay
.
style
[
"
pointer-events
"
]
=
"
none
"
;
nameOverlay
.
style
.
padding
=
"
4px
"
;
nameOverlay
.
style
.
backgroundColor
=
"
black
"
;
nameOverlay
.
style
.
color
=
"
white
"
;
nameOverlay
.
style
.
fontFamily
=
"
Fira Sans, sans-serif
"
;
nameOverlay
.
style
.
fontSize
=
"
0.75em
"
;
// Information about the currently selected feature
const
selected
=
{
feature
:
undefined
,
originalColor
:
new
Cesium
.
Color
(),
};
// An entity object which will hold info about the currently selected feature for infobox display
const
selectedEntity
=
new
Cesium
.
Entity
();
// Get default left click handler for when a feature is not picked on left click
const
clickHandler
=
viewer
.
screenSpaceEventHandler
.
getInputAction
(
Cesium
.
ScreenSpaceEventType
.
LEFT_CLICK
);
// Change the feature color on mouse over
// Information about the currently highlighted feature
const
highlighted
=
{
feature
:
undefined
,
originalColor
:
new
Cesium
.
Color
(),
};
// Color a feature on hover.
viewer
.
screenSpaceEventHandler
.
setInputAction
(
function
onMouseMove
(
movement
)
{
// If a feature was previously highlighted, undo the highlight
if
(
Cesium
.
defined
(
highlighted
.
feature
))
{
highlighted
.
feature
.
color
=
highlighted
.
originalColor
;
highlighted
.
feature
=
undefined
;
}
// Pick a new feature
const
pickedFeature
=
viewer
.
scene
.
pick
(
movement
.
endPosition
);
if
(
!
Cesium
.
defined
(
pickedFeature
))
{
nameOverlay
.
style
.
display
=
"
none
"
;
return
;
}
// A feature was picked, so show it's overlay content
nameOverlay
.
style
.
display
=
"
block
"
;
nameOverlay
.
style
.
bottom
=
viewer
.
canvas
.
clientHeight
-
movement
.
endPosition
.
y
+
"
px
"
;
nameOverlay
.
style
.
left
=
movement
.
endPosition
.
x
+
"
px
"
;
let
name
=
pickedFeature
.
getProperty
(
"
_gebaeude
"
);
if
(
!
Cesium
.
defined
(
name
))
{
name
=
pickedFeature
.
getProperty
(
"
id
"
);
}
nameOverlay
.
textContent
=
name
;
// Highlight the feature if it's not already selected.
if
(
pickedFeature
!==
selected
.
feature
)
{
highlighted
.
feature
=
pickedFeature
;
Cesium
.
Color
.
clone
(
pickedFeature
.
color
,
highlighted
.
originalColor
);
pickedFeature
.
color
=
Cesium
.
Color
.
GREY
;
}
},
Cesium
.
ScreenSpaceEventType
.
MOUSE_MOVE
);
// Color a feature on selection and show metadata in the InfoBox.
viewer
.
screenSpaceEventHandler
.
setInputAction
(
function
onLeftClick
(
movement
)
{
// If a feature was previously selected, undo the highlight
if
(
Cesium
.
defined
(
selected
.
feature
))
{
selected
.
feature
.
color
=
selected
.
originalColor
;
selected
.
feature
=
undefined
;
}
// Pick a new feature
const
pickedFeature
=
viewer
.
scene
.
pick
(
movement
.
position
);
if
(
!
Cesium
.
defined
(
pickedFeature
))
{
clickHandler
(
movement
);
return
;
}
// Select the feature if it's not already selected
if
(
selected
.
feature
===
pickedFeature
)
{
return
;
}
selected
.
feature
=
pickedFeature
;
// Save the selected feature's original color
if
(
pickedFeature
===
highlighted
.
feature
)
{
Cesium
.
Color
.
clone
(
highlighted
.
originalColor
,
selected
.
originalColor
);
highlighted
.
feature
=
undefined
;
}
else
{
Cesium
.
Color
.
clone
(
pickedFeature
.
color
,
selected
.
originalColor
);
}
// Highlight newly selected feature
pickedFeature
.
color
=
Cesium
.
Color
.
LIME
;
// Set feature infobox description
const
featureName
=
pickedFeature
.
getProperty
(
"
name
"
);
selectedEntity
.
name
=
featureName
;
selectedEntity
.
description
=
'
Loading <div class="cesium-infoBox-loading"></div>
'
;
viewer
.
selectedEntity
=
selectedEntity
;
selectedEntity
.
description
=
`
const
activate3DTileFeaturePicking
=
function
()
{
// HTML overlay for showing feature name on mouseover
const
nameOverlay
=
document
.
createElement
(
"
div
"
);
viewer
.
container
.
appendChild
(
nameOverlay
);
nameOverlay
.
className
=
"
backdrop
"
;
nameOverlay
.
style
.
display
=
"
none
"
;
nameOverlay
.
style
.
position
=
"
absolute
"
;
nameOverlay
.
style
.
bottom
=
"
0
"
;
nameOverlay
.
style
.
left
=
"
0
"
;
nameOverlay
.
style
[
"
pointer-events
"
]
=
"
none
"
;
nameOverlay
.
style
.
padding
=
"
4px
"
;
nameOverlay
.
style
.
backgroundColor
=
"
black
"
;
nameOverlay
.
style
.
color
=
"
white
"
;
nameOverlay
.
style
.
fontFamily
=
"
Fira Sans, sans-serif
"
;
nameOverlay
.
style
.
fontSize
=
"
0.75em
"
;
// Information about the currently selected feature
const
selected
=
{
feature
:
undefined
,
originalColor
:
new
Cesium
.
Color
(),
};
// An entity object which will hold info about the currently selected feature for infobox display
const
selectedEntity
=
new
Cesium
.
Entity
();
// Get default left click handler for when a feature is not picked on left click
const
clickHandler
=
viewer
.
screenSpaceEventHandler
.
getInputAction
(
Cesium
.
ScreenSpaceEventType
.
LEFT_CLICK
);
// Change the feature color on mouse over
// Information about the currently highlighted feature
const
highlighted
=
{
feature
:
undefined
,
originalColor
:
new
Cesium
.
Color
(),
};
// Color a feature on hover.
viewer
.
screenSpaceEventHandler
.
setInputAction
(
function
onMouseMove
(
movement
)
{
// If a feature was previously highlighted, undo the highlight
if
(
Cesium
.
defined
(
highlighted
.
feature
))
{
highlighted
.
feature
.
color
=
highlighted
.
originalColor
;
highlighted
.
feature
=
undefined
;
}
// Pick a new feature
const
pickedFeature
=
viewer
.
scene
.
pick
(
movement
.
endPosition
);
if
(
!
Cesium
.
defined
(
pickedFeature
))
{
nameOverlay
.
style
.
display
=
"
none
"
;
return
;
}
// A feature was picked, so show it's overlay content
nameOverlay
.
style
.
display
=
"
block
"
;
nameOverlay
.
style
.
bottom
=
viewer
.
canvas
.
clientHeight
-
movement
.
endPosition
.
y
+
"
px
"
;
nameOverlay
.
style
.
left
=
movement
.
endPosition
.
x
+
"
px
"
;
let
name
=
pickedFeature
.
getProperty
(
"
_gebaeude
"
);
if
(
!
Cesium
.
defined
(
name
))
{
name
=
pickedFeature
.
getProperty
(
"
id
"
);
}
nameOverlay
.
textContent
=
name
;
// Highlight the feature if it's not already selected.
if
(
pickedFeature
!==
selected
.
feature
)
{
highlighted
.
feature
=
pickedFeature
;
Cesium
.
Color
.
clone
(
pickedFeature
.
color
,
highlighted
.
originalColor
);
pickedFeature
.
color
=
Cesium
.
Color
.
GREY
;
}
},
Cesium
.
ScreenSpaceEventType
.
MOUSE_MOVE
);
// Color a feature on selection and show metadata in the InfoBox.
viewer
.
screenSpaceEventHandler
.
setInputAction
(
function
onLeftClick
(
movement
)
{
// If a feature was previously selected, undo the highlight
if
(
Cesium
.
defined
(
selected
.
feature
))
{
selected
.
feature
.
color
=
selected
.
originalColor
;
selected
.
feature
=
undefined
;
}
// Pick a new feature
const
pickedFeature
=
viewer
.
scene
.
pick
(
movement
.
position
);
if
(
!
Cesium
.
defined
(
pickedFeature
))
{
clickHandler
(
movement
);
return
;
}
// Select the feature if it's not already selected
if
(
selected
.
feature
===
pickedFeature
)
{
return
;
}
selected
.
feature
=
pickedFeature
;
// Save the selected feature's original color
if
(
pickedFeature
===
highlighted
.
feature
)
{
Cesium
.
Color
.
clone
(
highlighted
.
originalColor
,
selected
.
originalColor
);
highlighted
.
feature
=
undefined
;
}
else
{
Cesium
.
Color
.
clone
(
pickedFeature
.
color
,
selected
.
originalColor
);
}
// Highlight newly selected feature
pickedFeature
.
color
=
Cesium
.
Color
.
LIME
;
// Set feature infobox description
const
featureName
=
pickedFeature
.
getProperty
(
"
name
"
);
selectedEntity
.
name
=
featureName
;
selectedEntity
.
description
=
'
Loading <div class="cesium-infoBox-loading"></div>
'
;
viewer
.
selectedEntity
=
selectedEntity
;
selectedEntity
.
description
=
`
<table class="cesium-infoBox-defaultTable">
<tbody>
<tr><th>Bau</th><td>
...
...
@@ -290,57 +290,62 @@ const activate3DTileFeaturePicking = function () {
</table>
`
;
const
clickedBuilding
=
pickedFeature
.
getProperty
(
"
_gebaeude
"
);
const
clickedBuildingDatastreamId
=
getDatastreamIdFromBuildingNumber
(
clickedBuilding
,
"
vl
"
,
"
60min
"
);
const
clickedBuilding
=
pickedFeature
.
getProperty
(
"
_gebaeude
"
);
const
clickedBuildingDatastreamId
=
getDatastreamIdFromBuildingNumber
(
clickedBuilding
,
"
vl
"
,
"
60min
"
);
const
BASE_URL_OBSERVATIONS
=
getObservationsUrl
(
BASE_URL
,
clickedBuildingDatastreamId
);
const
PARAM_FILTER
=
createTemporalFilterString
(
"
2020-01-01
"
,
"
2021-01-01
"
);
const
axiosGetRequest
=
axios
.
get
(
BASE_URL_OBSERVATIONS
,
{
params
:
{
"
$resultFormat
"
:
PARAM_RESULT_FORMAT
,
"
$orderBy
"
:
PARAM_ORDER_BY
,
"
$filter
"
:
PARAM_FILTER
,
"
$select
"
:
PARAM_SELECT
,
},
});
const
BASE_URL_OBSERVATIONS
=
getObservationsUrl
(
BASE_URL
,
clickedBuildingDatastreamId
);
const
PARAM_FILTER
=
createTemporalFilterString
(
"
2020-01-01
"
,
"
2021-01-01
"
);
const
axiosGetRequest
=
axios
.
get
(
BASE_URL_OBSERVATIONS
,
{
params
:
{
"
$resultFormat
"
:
PARAM_RESULT_FORMAT
,
"
$orderBy
"
:
PARAM_ORDER_BY
,
"
$filter
"
:
PARAM_FILTER
,
"
$select
"
:
PARAM_SELECT
,
},
});
// Get "ALL" the Observations that satisfy our query
followNextLink
(
axiosGetRequest
)
.
then
((
success
)
=>
{
const
successValue
=
success
.
data
.
value
;
// Get "ALL" the Observations that satisfy our query
followNextLink
(
axiosGetRequest
)
.
then
((
success
)
=>
{
const
successValue
=
success
.
data
.
value
;
// Array that will hold the combined observations
const
combinedObservations
=
[];
// Array that will hold the combined observations
const
combinedObservations
=
[];
successValue
.
forEach
((
dataObj
)
=>
{
// Each page of results will have a dataArray that holds the observations
const
dataArrays
=
dataObj
.
dataArray
;
successValue
.
forEach
((
dataObj
)
=>
{
// Each page of results will have a dataArray that holds the observations
const
dataArrays
=
dataObj
.
dataArray
;
combinedObservations
.
push
(...
dataArrays
);
});
// DEBUG: Check total number of observations
console
.
log
(
combinedObservations
.
length
);
// DEBUG: Print the array of observations
console
.
log
(
combinedObservations
);
return
combinedObservations
;
})
.
catch
((
err
)
=>
{
console
.
log
(
err
);
})
.
then
((
observationArr
)
=>
{
var
agg
=
aggregateResponse
(
observationArr
,
0
,
'
mean
'
);
console
.
log
(
agg
);
drawHeatMapHC
(
formatSTAResponseForHeatMap
(
observationArr
));
drawLineChartHC
(
formatSTAResponseForLineChart
(
observationArr
));
});
},
Cesium
.
ScreenSpaceEventType
.
LEFT_CLICK
);
combinedObservations
.
push
(...
dataArrays
);
});
// DEBUG: Check total number of observations
console
.
log
(
combinedObservations
.
length
);
// DEBUG: Print the array of observations
console
.
log
(
combinedObservations
);
return
combinedObservations
;
})
.
catch
((
err
)
=>
{
console
.
log
(
err
);
})
.
then
((
observationArr
)
=>
{
drawHeatMapHC
(
formatSTAResponseForHeatMap
(
observationArr
));
drawLineChartHC
(
formatSTAResponseForLineChart
(
observationArr
));
});
},
Cesium
.
ScreenSpaceEventType
.
LEFT_CLICK
);
};
activate3DTileFeaturePicking
();
activate3DTileFeaturePicking
();
\ No newline at end of file
public/js/appChart.js
View file @
86bff050
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment