88 lines
3.9 KiB
JavaScript
88 lines
3.9 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
console.log('DOM fully loaded and parsed');
|
|
// Set your Cesium Ion default access token
|
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZTY0ZTQ1Yi0zYmYxLTQ5MjItODdkOS05ZDY0ZGRjYjQwM2QiLCJpZCI6MjA5ODgwLCJpYXQiOjE3MTM4MTY3OTB9.A-3Jt_G0K81s-A-XLpT2bn5aY2H3s-n2p-2jYf-i-g';
|
|
|
|
try {
|
|
console.log('Initializing Cesium Viewer');
|
|
// Initialize a Cesium Viewer without a base imagery provider.
|
|
const viewer = new Cesium.Viewer('cesiumContainer', {
|
|
animation: false,
|
|
baseLayerPicker: true,
|
|
fullscreenButton: false,
|
|
geocoder: false,
|
|
homeButton: false,
|
|
infoBox: true,
|
|
sceneModePicker: false,
|
|
selectionIndicator: false,
|
|
timeline: false,
|
|
navigationHelpButton: false,
|
|
scene3DOnly: true,
|
|
imageryProvider: Cesium.createWorldImagery(),
|
|
terrainProvider: Cesium.createWorldTerrain(),
|
|
});
|
|
viewer.scene.globe.depthTestAgainstTerrain = false;
|
|
console.log('Cesium Viewer initialized successfully');
|
|
|
|
// Load political boundaries from GeoJSON
|
|
const politicalBoundaries = Cesium.GeoJsonDataSource.load('https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson', {
|
|
stroke: Cesium.Color.BLACK,
|
|
fill: Cesium.Color.BEIGE.withAlpha(0.5),
|
|
strokeWidth: 1,
|
|
});
|
|
|
|
politicalBoundaries.then(function(dataSource) {
|
|
viewer.dataSources.add(dataSource);
|
|
console.log('Political boundaries loaded.');
|
|
}).catch(function(error){
|
|
console.error('Error loading political boundaries:', error);
|
|
});
|
|
|
|
|
|
// Function to load wildfire data
|
|
const loadWildfireData = async () => {
|
|
try {
|
|
console.log('Fetching wildfire data...');
|
|
const response = await fetch('api/wildfires.php');
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
const geojsonData = await response.json();
|
|
console.log('Wildfire data fetched successfully.');
|
|
|
|
geojsonData.features.forEach(feature => {
|
|
if (feature.geometry && feature.geometry.coordinates) {
|
|
try {
|
|
viewer.entities.add({
|
|
polygon: {
|
|
hierarchy: new Cesium.PolygonHierarchy(
|
|
Cesium.Cartesian3.fromDegreesArray(feature.geometry.coordinates[0].flat())
|
|
),
|
|
material: Cesium.Color.RED.withAlpha(0.5),
|
|
outline: true,
|
|
outlineColor: Cesium.Color.RED,
|
|
outlineWidth: 2
|
|
}
|
|
});
|
|
} catch (e) {
|
|
console.error('Error processing wildfire feature:', feature, e);
|
|
}
|
|
}
|
|
});
|
|
console.log('Wildfire data source added to viewer.');
|
|
|
|
} catch (error) {
|
|
console.error('Error loading wildfire data:', error);
|
|
// This catch block prevents the globe from crashing if the API fails.
|
|
}
|
|
};
|
|
|
|
// Load all data sources
|
|
loadWildfireData();
|
|
|
|
} catch (error) {
|
|
console.error('A critical error occurred while initializing the Cesium viewer:', error);
|
|
const cesiumContainer = document.getElementById('cesiumContainer');
|
|
cesiumContainer.innerHTML = '<div class="alert alert-danger">Error: Could not load the 3D scene. Please check the console for details.</div>';
|
|
}
|
|
}); |