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

// 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)
})
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')"
    });
    building_style["HeatDemand"] = new Cesium.Cesium3DTileStyle({
        pointSize: '3.0',
        show: true,
        color: {
            "conditions" : [
                // ["${Total_Yealy_Heat_DHW_Demand} == 0", "color('#fff')"],
                ["${Total_Yealy_Heat_DHW_Demand} === 0", "color('#ffffff',0)"],

                ["${Total_Yealy_Heat_DHW_Demand} < 10937", "color('#bcbddc')"],
                ["${Total_Yealy_Heat_DHW_Demand} < 12884", "color('#9e9ac8')"],
                ["${Total_Yealy_Heat_DHW_Demand} < 12884", "color('#807dba')"],
                ["${Total_Yealy_Heat_DHW_Demand} < 20673", "color('#6a51a3')"],
                ["${Total_Yealy_Heat_DHW_Demand} < 22620", "color('#6a51a3')"],
                ["${Total_Yealy_Heat_DHW_Demand} < 24568", "color('#54278f')"],
                ["true", "color('#3f007d', 0.5)"]
            ]
        }
    });
    building_style["PVPotential"] = new Cesium.Cesium3DTileStyle({
        pointSize: '3.0',
        show: true,
        color: {
            "conditions" : [
                ["${PV_Potential_Yield} === 0", "color('#ffffff',0)"],
                ["${PV_Potential_Yield} < 5615", "color('#c7e9c0')"],
                ["${PV_Potential_Yield} < 6615", "color('#a1d99b')"],
                ["${PV_Potential_Yield} < 7615", "color('#74c476')"],
                ["${PV_Potential_Yield} < 8615", "color('#41ab5d')"],
                ["${PV_Potential_Yield} < 9615", "color('#238b45')"],
                ["${PV_Potential_Yield} < 10615", "color('#006d2c')"],
                ["true", "color('#00441b', 0.5)"]
            ]
        }
    });
    building_style["ElecDemand"] = new Cesium.Cesium3DTileStyle({
        pointSize: '3.0',
        show: true,
        color: {
            "conditions" : [
                ["${Electric_Demand} === 0", "color('#ffffff',0)"],
                ["${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

    }
});