An error occurred while loading the file. Please try again.
App.js 8.59 KiB
     Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkNjcyOWZhYi0xZmQ0LTQyYmMtYjQ0MS1hY2YxYzcxYWFmMWEiLCJpZCI6MTEwNzEsImlhdCI6MTYzMDk5MzEyNX0.fcsH4S5hE0ye9s-2cOFMyObiHlhu9vqjWdlYfGkv5gU';
    //////////////////////////////////////////////////////////////////////////
    // Creating the Viewer
    //////////////////////////////////////////////////////////////////////////
     var viewer = new Cesium.Viewer('cesiumContainer', {
         scene3DOnly: true,
         selectionIndicator: false,
		 timeline: false,
		 animation: false,
		 shadow: false,
		 // // Set default basemap
           imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
    url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer',
	enablePickFeatures: false
    }),
		 baseLayerPicker: true
     });
     viewer.clock.shouldAnimate = false;
	 viewer.scene.globe.enableLighting = false;
     viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2019-09-20T16:00:00Z");
     viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2019-09-20T16:20:00Z");
     viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2019-09-20T16:00:00Z");
	 document.getElementById("heatdemandlegend").style.display = "none"; //defining legends hidden by default
	 document.getElementById("pvpotentialLegend").style.display = "none"; //defining legends hidden by default
    //////////////////////////////////////////////////////////////////////////
    // Configuring the camera
    //////////////////////////////////////////////////////////////////////////
    // // Create an initial camera view
     var initialPosition = Cesium.Cartesian3.fromDegrees(9.116678, 48.822745, 2000);
     var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(235, -23, 360);
     var homeCameraView = {
         destination : initialPosition,
         orientation : {
            heading : initialOrientation.heading,
            pitch : initialOrientation.pitch,
            roll : initialOrientation.roll
    // // Set the initial view
     viewer.scene.camera.setView(homeCameraView);
		// set home button to initial view 
	 viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
        e.cancel = true;
         viewer.scene.camera.flyTo(homeCameraView);
     });
	 viewer.camera.changed.addEventListener(function() {
  var deg = Math.round( Cesium.Math.toDegrees(viewer.camera.heading))
  console.log('Heading:', deg)
  var deg = Math.round( Cesium.Math.toDegrees(viewer.camera.pitch))
  console.log('Pitch:', deg)
  var deg = Math.round( Cesium.Math.toDegrees(viewer.camera.roll))
  console.log('Roll:', deg)
});
    //////////////////////////////////////////////////////////////////////////
    // Load 3D Tileset
    //////////////////////////////////////////////////////////////////////////
    var gerlingenbldgsld = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: './Source/Data/Bldg/tileset.json'}));
	var gerlingenroof = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: './Source/Data/Roof/tileset.json'}));
	gerlingenroof.readyPromise.then(function(tileset) {
                 height = 0.02;
viewer.scene.primitives.add(tileset); var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center); var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation); console.log(error); }); gerlingenbldgsld.show=true; gerlingenroof.show =false; ////////////////////////////////////////////////////////////////////////// // Style 3D Tileset ////////////////////////////////////////////////////////////////////////// var defaultstyle = new Cesium.Cesium3DTileStyle({ color : "color('WHITE')", show: true }); var pvpotentialstyle = new Cesium.Cesium3DTileStyle({ color : { conditions : [ ["(${AvgPV} === 0)", "color('#FFFFFF')"], ["(${AvgPV} > 0) && (${AvgPV} < 5)", "color('#fc4f00')"], ["(${AvgPV} >= 5) && (${AvgPV} < 10)", "color('#f27600')"], ["(${AvgPV} >= 10) && (${AvgPV} < 15)", "color('#e29700')"], ["(${AvgPV} >= 15) && (${AvgPV} < 20)", "color('#cab500')"], ["(${AvgPV} >= 20) && (${AvgPV} < 25)", "color('#aad000')"], ["(${AvgPV} >= 25) && (${AvgPV} < 30)", "color('#7de800')"], ["(${AvgPV} >= 30)", "color('#00ff00')"] ] }, show: true }); var colorstyle1 = document.getElementById('3dbuildings'); var colorstyle2 = document.getElementById('heatdemand'); var colorstyle3 = document.getElementById('pvpotential'); function set3DColorStyle() { if (colorstyle1.checked) { gerlingenbldgsld.show=true; gerlingenroof.show =false; viewer.dataSources.removeAll(); gerlingenbldgsld.style = defaultstyle; document.getElementById("heatdemandlegend").style.display = "none"; document.getElementById("pvpotentialLegend").style.display = "none"; } else if (colorstyle2.checked) { gerlingenbldgsld.show=true; gerlingenroof.show =false; var promise = Cesium.GeoJsonDataSource.load( './Source/Data/Gerlingen_Grid5050_heat.json' ); promise .then(function (dataSource1) { viewer.dataSources.add(dataSource1); //Get the array of entities var entities = dataSource1.entities.values; var colorHash = {}; for (var i = 0; i < entities.length; i++) { //For each entity, create a random color based on the state name. //Some states have multiple entities, so we store the color in a //hash so that we use the same color for the entire state. var entity = entities[i]; var name = entity.name; var color = colorHash[name];
var grdcode = entity.properties.Avg_Sp_Ht; if (!color) { if (grdcode == 0) { color = Cesium.Color.fromCssColorString('#FFFFFF8C'); } else if (grdcode < 25) { color = Cesium.Color.fromCssColorString('#61B9498C'); } else if (grdcode < 50) { color = Cesium.Color.fromCssColorString('#A4C7118C'); } else if (grdcode < 75) { color = Cesium.Color.fromCssColorString('#B2D5318C'); } else if (grdcode < 100) { color = Cesium.Color.fromCssColorString('#D1E0238C'); }else if (grdcode < 125) { color = Cesium.Color.fromCssColorString('#F6EC008C'); }else if (grdcode < 150) { color = Cesium.Color.fromCssColorString('#FECE028C'); }else if (grdcode < 200) { color = Cesium.Color.fromCssColorString('#F9A7178C'); }else if (grdcode < 250) { color = Cesium.Color.fromCssColorString('#F56D1F8C'); } else { color = Cesium.Color.fromCssColorString('#F22E228C'); } } //Set the polygon material to our random color. entity.polygon.material = color; //Remove the outlines. entity.polygon.outline = true; //Extrude the polygon based on the state's population. Each entity //stores the properties for the GeoJSON feature it was created from //Since the population is a huge number, we divide by 50. entity.polygon.extrudedHeight = grdcode ; } }) document.getElementById("heatdemandlegend").style.display = "block"; document.getElementById("pvpotentialLegend").style.display = "none"; } else if (colorstyle3.checked) { gerlingenbldgsld.show=true; gerlingenroof.show =true; viewer.dataSources.removeAll(); gerlingenbldgsld.style = defaultstyle; gerlingenroof.style = pvpotentialstyle; document.getElementById("heatdemandlegend").style.display = "none"; document.getElementById("pvpotentialLegend").style.display = "block"; } } colorstyle1.addEventListener('change', set3DColorStyle); colorstyle2.addEventListener('change', set3DColorStyle); colorstyle3.addEventListener('change', set3DColorStyle);