From fc9e6f80013f7360035f1f6abb173a90f8926b57 Mon Sep 17 00:00:00 2001
From: Pithon Kabiro <pithon.kabiro@hft-stuttgart.de>
Date: Thu, 28 Oct 2021 11:07:32 +0200
Subject: [PATCH] New function: highlight selected buildings
Wraps logic of applying styling to selected buildings plus removing
duplicate building IDs
---
public/js/appCesium.js | 31 ++++++++++++++++++++++++++++++-
public/js/appChart.js | 14 ++++++++++++++
2 files changed, 44 insertions(+), 1 deletion(-)
diff --git a/public/js/appCesium.js b/public/js/appCesium.js
index 6efc42e..9e77d93 100644
--- a/public/js/appCesium.js
+++ b/public/js/appCesium.js
@@ -52,7 +52,7 @@ const loadTiles = function (buildingTileset) {
buildingTileset.readyPromise.then(function () {
viewer
.zoomTo(
- tileset,
+ buildingTileset,
new Cesium.HeadingPitchRange(
0.0,
-0.5,
@@ -344,3 +344,32 @@ const applyStylingForSelectedBuildings = function (
},
});
};
+
+/**
+ * Highlight the building(s) that are selected in the buildings & data points drop-down list
+ *
+ * @param {Array} selectedBldgsDataPntsSmplngRateAbbrevNestedArr An array which contains one or more nested arrays of abbreviations of building(s), data point(s) and sampling rate(s)
+ * @returns {undefined} undefined
+ */
+const highlightSelectedBuildings = function (
+ selectedBldgsDataPntsSmplngRateAbbrevNestedArr
+) {
+ // The building ID is the first element
+ const buildingIdArr = selectedBldgsDataPntsSmplngRateAbbrevNestedArr.map(
+ (bldgDataPtSmplngRateAbbrev) => bldgDataPtSmplngRateAbbrev[0]
+ );
+
+ // Use a set to remove duplicates
+ const uniqueBuildingIdArr = [...new Set(buildingIdArr)];
+
+ applyStylingForSelectedBuildings(
+ nonDetailedBuilding225Tileset,
+ uniqueBuildingIdArr
+ );
+};
+
+export {
+ nonDetailedBuilding225Tileset,
+ resetStylingForAllBuildings,
+ highlightSelectedBuildings,
+};
diff --git a/public/js/appChart.js b/public/js/appChart.js
index c3a7f6a..12807ca 100644
--- a/public/js/appChart.js
+++ b/public/js/appChart.js
@@ -51,6 +51,12 @@ import { drawLineChartBasedOnSelectedOptions } from "./src_modules/dropDownListC
import { drawScatterPlotBasedOnSelectedOptions } from "./src_modules/dropDownListChartScatterPlot.mjs";
+import {
+ nonDetailedBuilding225Tileset,
+ resetStylingForAllBuildings,
+ highlightSelectedBuildings,
+} from "./appCesium.js";
+
/**
* Callback function that wraps the logic of populating the linked drop down lists.
* Will run on `DOMContentLoaded` event
@@ -71,6 +77,9 @@ const afterDocumentLoads = function () {
*/
const drawChartUsingSelectedOptions = async function () {
try {
+ // Reset the styling of the 3D tileset, in case building(s) were highlighted
+ resetStylingForAllBuildings(nonDetailedBuilding225Tileset);
+
// Note: The chart type amd aggregation type + duration are the first and
// third elements respectively, we have ignored the second and fourth elements
const [selectedChartTypeArr, , selectedAggregationTypeDurationArr] =
@@ -95,6 +104,11 @@ const drawChartUsingSelectedOptions = async function () {
const [[, , selectedSamplingRateAbbrev]] =
selectedBuildingsDataPointsSamplingRateAbbrevNestedArr;
+ // Highlight the selected buildings
+ highlightSelectedBuildings(
+ selectedBuildingsDataPointsSamplingRateAbbrevNestedArr
+ );
+
// User-specified start date and end date for aggregation - used by MULTIPLE chart types
const AGGREGATION_START_DATE = "2020-01-01";
const AGGREGATION_STOP_DATE = "2020-12-31";
--
GitLab