globe.js

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjNjM5YzFjNC03NWNmLTQ2M2YtOWJiNC0xODNmMTY2ZjkwNTkiLCJpZCI6MzY3NjEsImlhdCI6MTYwMzk4NTU3Nn0.G3fnwzZ50towP1Nv9goyvu0JxJW5GtiudTR7X67Zo84';

var viewer = new Cesium.Viewer('cesiumContainer', {
    homeButton: false,
    baseLayerPicker: false,
    navigationHelpButton: false,
    timeline: true,
    //shadows:true,
    animation: false,
    sceneModePicker: false,
    geocoder: false,
    sceneMode: Cesium.SceneMode.SCENE3D
});

viewer.scene.globe.depthTestAgainstTerrain = true;
//--------------------hover over surfaces--------------------
var singleChart = document.getElementById('singleChartContainer');

var roofViewActivated = false;
var chosenAttributeRadioBtnFlag = "shadowValue";

function chosenAttributeHandler(radioBtnValue) {
    chosenAttributeRadioBtnFlag = radioBtnValue.value;
}


// HTML overlay for showing feature name on mouseover
var 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 = "white";


var chosenDate = new Cesium.GregorianDate(2021, 12, 2, 11); //the chosen Date from the Timeline

//getting clicked Date from the timeline element
viewer.timeline.container.onmouseup = (e) => {
    var julianDate = viewer.clock.currentTime;
    Cesium.JulianDate.toGregorianDate(julianDate, chosenDate);
    //console.log(chosenDate);
}

// An entity object which will hold info about the currently selected feature for infobox display
var selectedEntity = new Cesium.Entity();

// Get default left click handler for when a feature is not picked on left click
var clickHandler = viewer.screenSpaceEventHandler.getInputAction(
    Cesium.ScreenSpaceEventType.LEFT_CLICK
);

function featurevar(feature, originalColor) {
    this.feature = feature;
    this.originalColor = originalColor;
}

//conatins currently highlighted features
var highlightedFeatures = [];

//conatins currently selected features
var selectedFeatures = [];
var hoverpid;
var selectpid;
var pickedselect = true;
var pickedhigh = false;
var pickedalreadyselect = false;
var radio = document.getElementById('radio-group');

//selected gmlID
var gmlID;


radio.addEventListener('click', function() {
    //hide chart for individual buildings
    singleChart.style.visibility = 'hidden';

    // If a feature was previously selected, undo the highlight
    tileContent.forEach(t => {
        if (t.getProperty("gml_parent_id") === selectpid) {
            selectedFeatures.forEach(s => {
                if (Cesium.defined(s.feature) && (t.getProperty("gml_id") === s.feature.getProperty("gml_id"))) {
                    t.color = s.originalColor;
                }
            });
        }
    });
    selectedFeatures = [];
    selectpid = 0;
}, false);

// Color a feature yellow on hover.
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
        pickedselect = true;

        // If a feature was previously highlighted, undo the highlight
        tileContent.forEach(t => {
            if (t.getProperty("gml_parent_id") === hoverpid) {
                highlightedFeatures.forEach(h => {
                    if (Cesium.defined(h.feature) && (t.getProperty("gml_id") === h.feature.getProperty("gml_id"))) {
                        t.color = h.originalColor;
                    }
                });
            }
        });
        highlightedFeatures = [];
        hoverpid = 0;

        // Pick a new feature
        var pickedFeature = viewer.scene.pick(movement.endPosition);
        if (!Cesium.defined(pickedFeature)) {
            nameOverlay.style.display = "none";
            return;
        }

        //Surface-View @onMouseMove
        if (document.getElementById("surface").checked) {

            // 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";

            if (!Cesium.defined(pickedFeature) || !(pickedFeature instanceof Cesium.Cesium3DTileFeature)) {
                nameOverlay.style.display = 'none';
                return;
            }

            var name = pickedFeature.getProperty("gml_id");
            var shadowhourvaluepercent = 0;
            nameOverlay.textContent = "ID: " + name;
            //nameOverlay.textContent = "ID: " + name + "\t shadowvalue:" + shadowhourvaluepercent;
            // Highlight the feature if it's not already selected.
            selectedFeatures.forEach(s => {
                if (s.feature === pickedFeature) {
                    pickedselect = false;
                }
            });

            hoverpid = pickedFeature.getProperty("gml_parent_id");

            if (pickedselect) {
                tileContent.forEach(t => {
                    if (t === pickedFeature) {
                        if (t.getProperty("feature_type") === "RoofSurface") {
                            highlightedFeatures.push(new featurevar(t, t.color));
                            t.color = Cesium.Color.GREEN;

                        } else {
                            highlightedFeatures.push(new featurevar(t, t.color));
                            t.color = Cesium.Color.YELLOW;
                        }
                    }
                });
            }
        }

        //Building View
        else if (document.getElementById("building").checked) {
            // 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";

            if (!Cesium.defined(pickedFeature) || !(pickedFeature instanceof Cesium.Cesium3DTileFeature)) {
                nameOverlay.style.display = 'none';
                return;
            }


            name = pickedFeature.getProperty("gml_parent_id");
            hoverpid = name;

            nameOverlay.textContent = name;
            // Highlight the feature if it's not already selected.
            if (hoverpid !== selectpid) {
                tileContent.forEach(t => {
                    if (t.getProperty("gml_parent_id") === hoverpid) {
                        highlightedFeatures.push(new featurevar(t, t.color));
                        t.color = Cesium.Color.YELLOW;
                    }
                });
            }
        }

        //Roof View
        // else if (document.getElementById("roof").checked) {
        //     console.log("clicked when in roof view and on hover");
        // }
        else if (document.getElementById("solarPlanner").checked) {
            console.log("clicked when in roof view and on hover");
        }

    },
    Cesium.ScreenSpaceEventType.MOUSE_MOVE);


//----------------------------------------------------------------------------------------------- 
var pickBuildingFunction;
var pickYearOfConstruction;
var pickHeight;
var pickHeatedVolume;
var pickTotalSurfaceArea = 0;
var pickRoofType;
var pickUValue

var shadowHourValue = 0;
var SurfacePvPotential;
var SurfacePvPotentialObject = []; //object which stores all the pvPotential data


//Color a feature on selection and show metadata in the InfoBox
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
        //hide chart for individual buildings
        singleChart.style.visibility = 'hidden';

        pickedhigh = false;

        pickedalreadyselect = false;

        // If a feature was previously selected, undo the highlight
        tileContent.forEach(t => {
            if (t.getProperty("gml_parent_id") === selectpid) {
                selectedFeatures.forEach(s => {
                    if (Cesium.defined(s.feature) && (t.getProperty("gml_id") === s.feature.getProperty("gml_id"))) {
                        t.color = s.originalColor;
                    }
                });
            }
        });
        selectpid = 0;
        selectedFeatures = [];

        //pick a new feature
        var pickedFeature = viewer.scene.pick(movement.position);
        if (!Cesium.defined(pickedFeature)) {
            clickHandler(movement);
            return;
        }
     
        selectpid = pickedFeature.getProperty("gml_parent_id");
        
        //Show chart for individual buildings. But only if building view is activated
        if (Cesium.defined(pickedFeature) && (!document.getElementById("surface").checked)) {
            singleChart.style.visibility = 'visible';
        }

        highlightedFeatures.forEach(h => {
            if (h.feature === pickedFeature) {
                pickedhigh = true;
            }
        });

        //fill individual charts
        gmlID = pickedFeature.getProperty("gml_parent_id");
        surID = pickedFeature.getProperty("gml_id")

        pickBuildingFunction = "Not Defined"
        pickYearOfConstruction = "Not Defined"
        pickHeight = "Not Defined"
        pickHeatedVolume = "Not Defined"
        pickTotalSurfaceArea = 0
        pickRoofType = "Not Defined"
        pickUValue = "Not Defined"

        //fill variables for Single Building Properties
        fillTableProperties(gmlID, surID)

        //########################################################################################################################
        //Different Views from here 

        //Surface View @onLeftClick
        if (document.getElementById("surface").checked) {
            resetRoofColors();
            setMinAndMax(chosenAttributeRadioBtnFlag);

            //save the selected feature's original color
            if (pickedhigh) {
                highlightedFeatures.forEach(h => {
                    if (h.feature === pickedFeature) {
                        selectedFeatures.push(new featurevar(h.feature, h.originalColor));
                    }
                });
                highlightedFeatures = [];

                //highlight newly selected feature
                tileContent.forEach(t => {
                    if (t === pickedFeature) {
                        //used for debugging, when clicking on a surface
                        //console.log(t.getProperty("description") + "\n" + t.getProperty("feature_type") + "\n" + t.getProperty("gml_id") + "\n" + t.getProperty("gml_parent_id"));

                        //color surfaces depending on their shadow value
                        for (const [key, value] of Object.entries(shadowdata)) { //looping threw the shadowdata array
                            if (key === t.getProperty("gml_id")) { //checking if the ids of the current surface match the id in the shadowdata array
                                //console.log("hour:",chosenDate.hour);
                                shadowHourValue = value[chosenDate.hour - 1] //getting the current chosen hour from the timeline

                                if (chosenAttributeRadioBtnFlag === "shadowValue") {
                                    t.color = Cesium.Color.fromCssColorString(getColorFromPalette(shadowHourValue, "shadowValue")); //coloring the surface
                                }
                                //t.color = Cesium.Color.fromCssColorString(getShadowPalette(shadowHourValue)); //coloring the surface
                            }
                        }
                        //console.log(pvPotentialSurfaces);
                        //coloring surfaces on pv potential
                        
                        //console.log("minie maus", minAndMaxPvPotentials);
                        for (const [key, value] of Object.entries(pvPotentialSurfaces)) {
                            if (value["id"] === t.getProperty("gml_id") && chosenAttributeRadioBtnFlag !== "shadowValue") { //checking if the ids of the current surface match the id in the shadowdata array
                                //console.log("hour:",chosenDate.hour);    
                                var normalizedPvValue="";
                                chosenPvPotentialValue = value["attributes"]["pvPotential"][chosenAttributeRadioBtnFlag];
                                //console.log("chosenPvPotentialValue",chosenPvPotentialValue);
                                
                                normalizedPvValue = getNormalizedValue(chosenPvPotentialValue);
                                console.log("normalisierter", normalizedPvValue);                                
                                t.color = Cesium.Color.fromCssColorString(getColorFromPalette(normalizedPvValue, "pvPotential")); //coloring the surface
                                SurfacePvPotential = chosenPvPotentialValue;
            
                                SurfacePvPotentialObject = value["attributes"]["pvPotential"];
                                console.log(SurfacePvPotentialObject);
                            }
                        }
                    }
                });

            } else {
                tileContent.forEach(t => {
                    if (t === pickedFeature) {
                        selectedFeatures.push(new featurevar(t, t.color));
                    }
                });
                //highlight newly selected feature
                tileContent.forEach(t => {
                    if (t === pickedFeature) {
                        t.color = Cesium.Color.LIME;
                    }
                });
            }

            //show the attributes of the chosen surface in the table 
            var chosenAttribute2Show = "";
            var shadowhourvaluepercent = shadowHourValue * 100;
            console.log("shadowHourValue:",shadowHourValue*100,"\n shadowhourvaluepercent:",shadowhourvaluepercent);

            if(chosenAttributeRadioBtnFlag==="shadowValue"){
                chosenAttribute2Show ="<tr><th>shadow value</th><td>" + shadowhourvaluepercent.toFixed(1) + "%" + "</td></tr>";
            }else{
                chosenAttribute2Show = "<tr><th>"+chosenAttributeRadioBtnFlag+"</th><td>" + SurfacePvPotential + "</td></tr>";
            }
            
            //set feature infobox description (surface view)
            var 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>Surface_ID</th><td>" + pickedFeature.getProperty("gml_id") + "</td></tr>" +
                "<tr><th>u_Value</th><td>" + pickUValue + "</td></tr>" +
                "<tr><th>description</th><td>" + pickedFeature.getProperty("description") + "</td></tr>" +
                "<tr><th>feature_type</th><td>" + pickedFeature.getProperty("feature_type") + "</td></tr>" +
                chosenAttribute2Show;
                "</tbody></table>";


        }

        //Building View
        else if (document.getElementById("building").checked) {
            resetRoofColors();
            //save the selected feature's original color
            if (pickedhigh) {
                highlightedFeatures.forEach(h => {
                    if (h.feature.getProperty("gml_parent_id") === selectpid) {
                        selectedFeatures.push(new featurevar(h.feature, h.originalColor));
                    }
                });
                highlightedFeatures = [];

                //highlight newly selected feature
                tileContent.forEach(t => {
                    if (t.getProperty("gml_parent_id") === selectpid) {
                        t.color = Cesium.Color.LIME;
                    }
                });

            } else {
                tileContent.forEach(t => {
                    if (t.getProperty("gml_parent_id") === selectpid) {
                        selectedFeatures.push(new featurevar(t, t.color));
                    }
                });

                //highlight newly selected feature
                tileContent.forEach(t => {
                    if (t.getProperty("gml_parent_id") === selectpid) {
                        t.color = Cesium.Color.LIME;
                    }
                });
            }

            buildings(gmlID)

            //set feature infobox description (building view)
            var 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>Building_ID</th><td>" + pickedFeature.getProperty("gml_parent_id") + "</td></tr>" +
                "<tr><th>buildingFunction</th><td>" + pickBuildingFunction + "</td></tr>" +
                "<tr><th>yearOfConstruction</th><td>" + pickYearOfConstruction + "</td></tr>" +
                "<tr><th>height</th><td>" + pickHeight + "</td></tr>" +
                "<tr><th>heatedVolume</th><td>" + pickHeatedVolume + "</td></tr>" +
                "<tr><th>Total_Surface_Area</th><td>" + pickTotalSurfaceArea + "</td></tr>" +
                "<tr><th>rooftype</th><td>" + pickRoofType + "</td></tr>" +
                "</tbody></table>";

        }

        //solarPlanner View       
        else if (document.getElementById("solarPlanner").checked) {
            resetRoofColors();
            
            //looping threw all surfaces
            tileContent.forEach(t => {
                for (const [key, value] of Object.entries(pvPotentialSurfaces)) {
                    if (value["id"] === t.getProperty("gml_id") && chosenAttributeRadioBtnFlag !== "shadowValue") { //checking if the ids of the current surface match the id in the shadowdata array
                        //console.log("hour:",chosenDate.hour);    
                        var normalizedPvValue="";
                        chosenPvPotentialValue = value["attributes"]["pvPotential"][chosenAttributeRadioBtnFlag];
                        //console.log("chosenPvPotentialValue",chosenPvPotentialValue);
                        
                        normalizedPvValue = getNormalizedValue(chosenPvPotentialValue);
                        console.log("normalisierter", normalizedPvValue);                                
                        t.color = Cesium.Color.fromCssColorString(getColorFromPalette(normalizedPvValue, "pvPotential")); //coloring the surface
                        SurfacePvPotential = chosenPvPotentialValue;

                        SurfacePvPotentialObject = value["attributes"]["pvPotential"];
                        console.log(SurfacePvPotentialObject);
                    }
                }
            });         

            
        }

        /**
         * @deprecated roofview is not used anymore, maybe later for "color all surface, depending on one attribute"
         */
        else if (document.getElementById("roofView").checked && roofViewActivated){
            console.log(pickedhigh,highlightedFeatures,tileContent);
            resetRoofColors();
            
            //looping threw all surfaces
            tileContent.forEach(t => {
                if (t.getProperty("description").includes("Roof")) { //HACK: checking if the are a roof surface (should come from feature_type)            
                    for (const [key, value] of Object.entries(shadowdata)) { //looping threw the shadowdata array 
                        if (key === t.getProperty("gml_id")) { //checking the id
                            //console.log(value); 
                            shadowHourValue = value[chosenDate.hour - 1]; //getting the current chosen hour from the timeline                 
                            t.color = Cesium.Color.fromCssColorString(getShadowPalette(shadowHourValue)); //coloring the surface                        
                        }
                    }
                }
            });
        }

    },
    Cesium.ScreenSpaceEventType.LEFT_CLICK);


function resetRoofColors() {
    tileContent.forEach(t => {
        if (t.getProperty("description").includes("Roof")) {
            for (const [key, value] of Object.entries(shadowdata)) {
                if (key === t.getProperty("gml_id")) {
                    t.color = Cesium.Color.WHITE;
                }
            }
        }
    });
}