cesium_00_Main.js

// update cesium Container Width to fit the Web Frame after document ready
$(document).ready(function () {
    // $("#cesiumContainer").css("width", "auto");
    $('#loading').hide();
    // $( window ).resize(function() {
    //     $("#cesiumContainer").css("width", "auto");
    // });
});
var PVPotential_legend_context = `
<small class="font-weight-bold">PV Potential MWh/year </small> <br>
<span class="dot" style="background-color: #8C2D04"></span> > 30 <br>
<span class="dot" style="background-color: #CC4C02"></span> 25 - 30 <br>
<span class="dot" style="background-color: #EC7014"></span> 20 - 25 <br>
<span class="dot" style="background-color: #FE9929"></span> 15 - 20 <br>
<span class="dot" style="background-color: #FEC44F"></span> 10 - 15 <br>
<span class="dot" style="background-color: #FEE391"></span> 5 - 10<br>
<span class="dot" style="background-color: #FFFFD4"></span> 0 - 5<br>
<br>
`
// var PVPotential_legend_context = `
// <small class="font-weight-bold">PV Potential MW⋅h<sub>el</sub> </small> <br>
// <span class="dot" style="background-color: #F22E22"></span> >= 8 <br>
// <span class="dot" style="background-color: #F56D1F"></span> 7 - 8 <br>
// <span class="dot" style="background-color: #F9A717"></span> 6 - 7 <br>
// <span class="dot" style="background-color: #FECE02"></span> 5 - 6 <br>
// <span class="dot" style="background-color: #F6EC00"></span> 4 - 5 <br>
// <span class="dot" style="background-color: #D1E023"></span> 3 - 4 <br>
// <span class="dot" style="background-color: #B2D531"></span> 2 - 3 <br>
// <span class="dot" style="background-color: #A4C711"></span> 1 - 2<br>
// <span class="dot" style="background-color: #61B949"></span> 0 - 1<br>
// <br>
// `
if ($("#PVPotential-legend").length > 0) {
    $("#PVPotential-legend").html(PVPotential_legend_context) // Add Bioenergy menu if the "#id" exist
}
var PVSpecificYield_legend_context = `
<small class="font-weight-bold">PV Specific Yield (kWh/kWp.year) </small> <br>
<span class="dot" style="background-color: #8C2D04"></span> > 1100 <br>
<span class="dot" style="background-color: #CC4C02"></span> 1050 - 1100 <br>
<span class="dot" style="background-color: #EC7014"></span> 1000 - 1050 <br>
<span class="dot" style="background-color: #FE9929"></span> 950 - 1000 <br>
<span class="dot" style="background-color: #FEC44F"></span> 900 - 950 <br>
<span class="dot" style="background-color: #FEE391"></span> 850 - 900<br>
<span class="dot" style="background-color: #FFFFD4"></span> < 850 <br>
<br>
`
if ($("#PVSpecificYield-legend").length > 0) {
    $("#PVSpecificYield-legend").html(PVSpecificYield_legend_context) // Add Bioenergy menu if the "#id" exist
}

// set the Cesium ION token 
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZTkyOTcyNC0yMGFkLTQ2ZjktODA5YS0xYjY1N2QwM2Y2ZmMiLCJpZCI6NDM2NDUsImlhdCI6MTYxMjkyNDgwNX0.12Xvbhtt_c2Y2RGA6J_J906Vdn1iOKZKPur0SASh-gk';
var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain(),
    baseLayerPicker: false,
    vrButton: false,
    geocoder: true,
    navigationHelpButton: false,
    selectionIndicator: true,
    shadows: false,
    timeline: false,
    sceneModePicker: false,
    homeButton: false,
    fullscreenButton: true,
    infoBox: true,
    imageryProvider: new Cesium.MapboxStyleImageryProvider({
        // check style ID at https://docs.mapbox.com/api/maps/styles/
        // styleId: 'dark-v10',
        styleId: 'light-v10',
        // styleId: 'navigation-day-v1',
        accessToken: 'pk.eyJ1IjoidGh1bnlhdGhlcCIsImEiOiJjamFpOWV4a2gxd21vMndxdXd2M3VoY3hmIn0.jLlCscei0yH-ZHwcfxF_ug'
    })
    // terrainExaggeration: 1.5,
});

var tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(75343),
    })
);

viewer.camera.setView({
    "destination": {
        "x": 4123560.966179314,
        "y": 707228.713304919,
        "z": 4798899.985567952
    },
    "orientation": {
        "direction": {
            "x": -0.9622773420432754,
            "y": 0.19744630073107838,
            "z": 0.18718246530522495
        },
        "up": {
            "x": 0.23048908682520655,
            "y": 0.22606307618215207,
            "z": 0.946451407332434
        }
    }
})

// binding full screen button
$("#full-screen-button").click(function () {
    Cesium.Fullscreen.requestFullscreen(document.body)
})
Cesium.GeoJsonDataSource.clampToGround = true;

// Adding the Utility Line to the Cesium Viewer
var utility_line;
var load_utility_line_already = false;
var utiltiy_line_entity;
var load_utility_line = function () {
    $("#util_nw_line_loading").show()
    if (!load_utility_line_already) {
        GeoJSONpromise = Cesium.GeoJsonDataSource.load(
            "../utility_data/Katharinenvorst.geojson"
        );
        GeoJSONpromise.then(function (dataSource) {
            utiltiy_line_entity = dataSource.entities;
            viewer.dataSources.add(dataSource);
            //Get the array of entities
            utility_line = dataSource.entities.values;
            load_utility_line_already = true;
            for (let i = 0; i < utility_line.length; i++) {
                const entity = utility_line[i];
                entity.polyline.clampToGround = true
                entity.polyline.classificationType = Cesium.ClassificationType.TERRAIN;
                entity.polyline.material = Cesium.Color.HOTPINK;
            }
        $("#util_nw_line_loading").hide()

        })
    } else {
        utiltiy_line_entity.show = true;
    }
}

var hide_utiltiy_line = function () {
    try {
        utiltiy_line_entity.show = false;
        load_utility_line_already = false;
    } catch (error) {
        console.log("error on hiding utiltiy_line_entity")
    }
}

// Adding the Utility Point to the Cesium Viewer
var pinBuilder = new Cesium.PinBuilder();
var utility_Point_Entities = [];
for (let i = 0; i < utility_point.length; i++) {
    var nameub = utility_point[i][0];
    var latub = utility_point[i][1];
    var lonub = utility_point[i][2];

    utility_Point_Entities[i] = viewer.entities.add({
        name: nameub,
        position: Cesium.Cartesian3.fromDegrees(lonub, latub),
        description: "Handle: " + nameub,
        point : {
            pixelSize : 5,
            color : Cesium.Color.RED,
            outlineColor : Cesium.Color.WHITE,
            outlineWidth : 2,
            heightReference: "CLAMP_TO_GROUND",
            show: false,
        },
        label : {
            text : "Handle: " + nameub,
            font : '14pt monospace',
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth : 2,
            verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
            heightReference: "CLAMP_TO_GROUND",
            show: false,
            pixelOffset : new Cesium.Cartesian2(0, -9)
        },
        // billboard: {
        //     image: pinBuilder.fromMakiIconId('bus', Cesium.Color.ORANGE.withAlpha(0.7), 60),
        //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        //     heightReference: "CLAMP_TO_GROUND",
        //     show: false,
        //     disableDepthTestDistance: 999999
        // }
    });
}


// Cesium.GeoJsonDataSource.clampToGround = true;
// var geojson_utility_line = viewer.dataSources.add(
//     Cesium.GeoJsonDataSource.load(
//       "../utility_data/Katharinenvorst.geojson",{
//         stroke: Cesium.Color.HOTPINK,
//         fill: Cesium.Color.PINK.withAlpha(0.5),
//         strokeWidth: 3,
//       }
//     )
//   );

var building_style = []
var addBuilding = function () {
    try {
        tileset_3Dbuildings = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
            url: 'https://steinbeis-3dps.eu/3DGeoVolumes/collections/schwabisch_hall_city/tileset.json',
            maximumScreenSpaceError: 8 // default value
        }));

    } catch (err) {
        console.log('->  add 3DTiles failed!\n' + err);
    }
    tileset_3Dbuildings.readyPromise.then(function () {
        var boundingSphere = tileset_3Dbuildings.boundingSphere;
        var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
        var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
        var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 50);
        var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
        tileset_3Dbuildings.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
    });
    // Styling the 3d model
    building_style["AllWhite"] = new Cesium.Cesium3DTileStyle({
        pointSize: '3.0',
        show: true,
        // color: "color('#ffffff')"
        "color": {
            "conditions": [
                ["true", "color('#ffffff')"]
            ]
        }
    });
    building_style["transparent"] = new Cesium.Cesium3DTileStyle({
        show: true,
        // color: "color('#ffffff',0.25)"
        "color": {
            "conditions": [
                ["true", "color('#ffffff', 0.5)"]
            ]
        }
    });
    building_style["PVPotential"] = new Cesium.Cesium3DTileStyle({
        show: true,
        color: {
            "conditions": [
                ['Number(${PV_potential_yield}) < 5', `color("#FFFFD4")`],
                ['Number(${PV_potential_yield}) < 10', `color("#FEE391")`],
                ['Number(${PV_potential_yield}) < 15', `color("#FEC44F")`],
                ['Number(${PV_potential_yield}) < 20', `color("#FE9929")`],
                ['Number(${PV_potential_yield}) < 25', `color("#EC7014")`],
                ['Number(${PV_potential_yield}) < 30', `color("#CC4C02")`],
                ['Number(${PV_potential_yield}) >= 30', `color("#8C2D04")`],
                ["true", "color('#ffffff')"] //no data
            ]
        }
    });
    building_style["PVSpecificYield"] = new Cesium.Cesium3DTileStyle({
        show: true,
        color: {
            "conditions": [
                ['Number(${PV_specific_yield}) < 850', `color("#FFFFD4")`],
                ['Number(${PV_specific_yield}) < 900', `color("#FEE391")`],
                ['Number(${PV_specific_yield}) < 950', `color("#FEC44F")`],
                ['Number(${PV_specific_yield}) < 1000', `color("#FE9929")`],
                ['Number(${PV_specific_yield}) < 1050', `color("#EC7014")`],
                ['Number(${PV_specific_yield}) < 1100', `color("#CC4C02")`],
                ['Number(${PV_specific_yield}) >= 1100 ', `color("#8C2D04")`],
                ["true", "color('#ffffff')"] //no data
            ]
        }
    });
    building_style["ElecDemand"] = new Cesium.Cesium3DTileStyle({
        pointSize: '3.0',
        show: true,
        color: {
            "conditions": [
                ["${Electric_Demand} === 0", "color('#ffffff')"],
                ["${Electric_Demand} < 3229", "color('#feedde')"],
                ["${Electric_Demand} < 4229", "color('#fdd0a2')"],
                ["${Electric_Demand} < 5229", "color('#fdae6b')"],
                ["${Electric_Demand} < 6229", "color('#fd8d3c')"],
                ["${Electric_Demand} < 7229", "color('#e6550d')"],
                ["true", "color('#a63603', 0.5)"]
            ]
        }
    });
    tileset_3Dbuildings.style = building_style["AllWhite"];
};
addBuilding();

// adding input to the menu
var layerIsLoaded = []
var layerIsLoadedFirstTime = []
var promise = []
var datasources = []
var datasource = []
// for (i = 0; i < geoJSONLayer.length; i++) {
//     var layerName = geoJSONLayer[i]

//     var htmlInput = `
//     <input class="form-check-input GeoJSONlayerCheckbox" type="checkbox" value="" id="${layerName}">
//     <label class="form-check-label" for="${layerName}">
//         ${layerName}
//     </label>
//     <br>
//     `
//     layerIsLoadedFirstTime[layerName] = false
//     $("#inputContainer").append(htmlInput);
// }

// $(`.GeoJSONlayerCheckbox`).click(function () {
//     var layerName = $(this).attr('id')
//     if (!layerIsLoadedFirstTime[layerName]) {
//         var pathName = `../data/geojson/${layerName}.geojson`
//         if (geoJSONLayerStyle.hasOwnProperty(layerName)) {
//             promise[layerName] = Cesium.GeoJsonDataSource.load(pathName, geoJSONLayerStyle[layerName]);
//         } else { 
//             promise[layerName] = Cesium.GeoJsonDataSource.load(pathName);
//         }
//         // if
//         promise[layerName]
//             .then(function (dataSource) {
//                 datasource[layerName] = dataSource
//                 layerIsLoadedFirstTime[layerName] = true
//                 datasources[layerName] = viewer.dataSources.add(dataSource);

//                 var layerEntities = datasource[layerName].entities.values;
//                 for (var i = 0; i < layerEntities.length; i++) {
//                     var entity = layerEntities[i];
//                     entity.name = layerName
//                 }
//                 viewer.flyTo(dataSource) // fly to dataSource after loading
//                 // more info https://sandcastle.cesium.com/index.html?src=GeoJSON%2520and%2520TopoJSON.html
//                 // more info https://cesium.com/docs/tutorials/cesium-workshop/
//             })
//             .otherwise(function (error) {
//                 //Display any errrors encountered while loading.
//                 window.alert(error);
//             });
//     } else if (this.checked && layerIsLoadedFirstTime[layerName]) {
//         viewer.dataSources.add(datasource[layerName]);
//     } else {
//         viewer.dataSources.remove(datasource[layerName]);
//     }

// });

//time management
Date.prototype.toIsoString_Start = function () {
    var tzo = -this.getTimezoneOffset(),
        dif = tzo >= 0 ? '+' : '-',
        pad = function (num) {
            var norm = Math.floor(Math.abs(num));
            return (norm < 10 ? '0' : '') + norm;
        };
    return this.getFullYear() +
        '-' + pad(this.getMonth() + 1) +
        '-' + pad(this.getDate()) +
        'T' + '08:00:00Z'
}
Date.prototype.toIsoString_Stop = function () {
    var tzo = -this.getTimezoneOffset(),
        dif = tzo >= 0 ? '+' : '-',
        pad = function (num) {
            var norm = Math.floor(Math.abs(num));
            return (norm < 10 ? '0' : '') + norm;
        };
    return this.getFullYear() +
        '-' + pad(this.getMonth() + 1) +
        '-' + pad(this.getDate()) +
        'T' + '23:00:00Z'
}
var dateEvent = new Date()
var startTime = dateEvent.toIsoString_Start();
var stopTime = dateEvent.toIsoString_Stop();
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601(startTime);

$('#BuildingStyleSelector').on('change', function () {
    // alert(this.value);
    tileset_3Dbuildings.style = building_style[this.value];
    $('.cesiumLegend').hide()
    try {
        $(`#${this.value}-legend`).show()
        // draw Chart
        activateChart(this.value);
    } catch (error) {
        console.log(`No ${this.value} Style in the html`)
    }
});

$("#shadow_check").change(function () {
    if (this.checked) {
        viewer.shadows = true
    } else {
        viewer.shadows = false

    }
});

$("#util_nw_line").change(function () {
    if (this.checked) {
        load_utility_line()
    } else {
        hide_utiltiy_line()
    }
});

$("#util_nw_point").change(function () {
    if (this.checked) {
        for (let i = 0; i < utility_point.length; i++) {
            utility_Point_Entities[i].point.show = true;
            utility_Point_Entities[i].label.show = true;
        }
    } else {
        for (let i = 0; i < utility_point.length; i++) {
            utility_Point_Entities[i].point.show = false;
            utility_Point_Entities[i].label.show = false;
        }
    }
});