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)
})
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["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

    }
});