globe.js

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

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

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

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

// 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  + "hier kommt noch die Verschatungsdaten";
        // 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 = randomRoofColor();  
                        t.color = Cesium.Color.GREEN;                      

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

                    //debugging - getting all info of the clicked surface
                    //console.log(t.getPropertyNames());                    
                    console.log(t.getProperty("description")+"\n"+t.getProperty("feature_type")+"\n" + t.getProperty("gml_id") + "\n" + t.getProperty("gml_parent_id"));
                                      
                }
            });
        }

    }
    
    else {

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


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



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

    if (document.getElementById("surface").checked) {

        //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) {
                    t.color = Cesium.Color.LIME;
                }
            });
        } 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;
                }
            });
        }



        //set feature infobox description
        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>" +
            "</tbody></table>";

    }
    else {
        //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
        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>";

    }

},
    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 randomRoofColor(){
    var r = Math.floor(Math.random() * 10);
    var shade =29*r;
    
    var color = new Cesium.Color;
    Cesium.Color.fromBytes(shade,shade,shade,255,color);
    //console.log(color);
    return color;
}