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,
    
});

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

console.log(viewer.ShadowMap);

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

        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");
    }
    
},
    Cesium.ScreenSpaceEventType.MOUSE_MOVE);


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


//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';
    }

    /*select the feature if it's not already selected
    selectedFeatures.forEach(s => {
        if (pickedFeature === s.feature) {
            console.log("return");
            pickedalreadyselect = true;
        }
    });

    if(pickedalreadyselect){
        return;
    }*/

    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)
   

    //Surface View
    if (document.getElementById("surface").checked) {
        resetRoofColors();
        //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) {  
                    console.log(t.getProperty("description")+"\n"+t.getProperty("feature_type")+"\n" + t.getProperty("gml_id") + "\n" + t.getProperty("gml_parent_id"));

                    t.color = Cesium.Color.LIME;

                    //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
                            //console.log("shadowHourValue",shadowHourValue);
                            
                            t.color = Cesium.Color.fromCssColorString(getShadowPalette(shadowHourValue)); //coloring the surface
                            
                        }
                    }                    
                }
            });
        } 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;
                }
            });
        }

        var shadowhourvaluepercent =  100-(shadowHourValue*100)
        //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>" +
            "<tr><th>shadow value</th><td>" +  shadowhourvaluepercent.toFixed(1) + "%" + "</td></tr>" +

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

    }

    //Roof View
    //BUG: shows random attributes ui element ??
    else if(document.getElementById("roof").checked){
        console.log("clicked when in roof view and on click");

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


//filling the table in the info sidebar with data    
function fillTableProperties(gID, sID) {

    if (drawBox === false) {
        swal("CAN'T LOAD DATA!", "mark an area first!", "error");
        document.getElementById("singleChartContainer").style.visibility = "hidden"
        document.getElementsByClassName('cesium-infoBox-defaultTable').style.display = 'none';

    } else {

        //Property BuildingFunction
        buildingFunctionSortPick.forEach((value, key) => {
            if (key === gID) {
                pickBuildingFunction = value
            }
        })

        //Property Year of Construction
        constructionYearSortPick.forEach((value, key) => {
            if (key === gID) {
                pickYearOfConstruction = value
            }
        })

        //Property height
        heightSortPick.forEach((value, key) => {
            if (key === gID) {
                pickHeight = value
            }
        })

        //Property HeatedVolume
        heatedVolumeSortPick.forEach((value, key) => {
            if (key === gID) {
                pickHeatedVolume = value
            }
        })

        //Property TotalSurfaceArea
        totalSurfaceAreaSortPick.forEach((value, key) => {
            if (key === gID) {
                var sum = 0
                value.forEach(element => {
                    sum += element.totalSurfaceArea
                });
                pickTotalSurfaceArea = sum
            }
        })

        //Property RoofType
        roofTypeSortPick.forEach((value, key) => {
            if (key === gID) {
                pickRoofType = value
            }
        })

        //Property UValue
        uValueSortPick.forEach((value, key) => {
            if (key === sID) {
                pickUValue = value
            }
        })
    }

}


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;                        
                }
            }            
        }        
    });
}