87 lines
3.4 KiB
JavaScript
87 lines
3.4 KiB
JavaScript
function initializeGlobe() {
|
|
console.log('Cesium is defined, initializing globe.');
|
|
// 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');
|
|
const viewer = new Cesium.Viewer('cesiumContainer', {
|
|
imageryProvider: new Cesium.OpenStreetMapImageryProvider({
|
|
url : 'https://a.tile.openstreetmap.org/'
|
|
}),
|
|
animation: false,
|
|
baseLayerPicker: false,
|
|
fullscreenButton: false,
|
|
geocoder: false,
|
|
homeButton: false,
|
|
infoBox: true,
|
|
sceneModePicker: false,
|
|
selectionIndicator: false,
|
|
timeline: false,
|
|
navigationHelpButton: false,
|
|
scene3DOnly: true
|
|
});
|
|
viewer.scene.globe.depthTestAgainstTerrain = false;
|
|
console.log('Cesium Viewer initialized successfully');
|
|
|
|
// Add Weather Layer
|
|
const weatherImageryProvider = new Cesium.UrlTemplateImageryProvider({
|
|
url: `api/weather.php?layer=clouds_new&z={z}&x={x}&y={y}`,
|
|
credit: 'Weather data © OpenWeatherMap'
|
|
});
|
|
const weatherLayer = viewer.imageryLayers.addImageryProvider(weatherImageryProvider);
|
|
weatherLayer.alpha = 0.6;
|
|
|
|
// UI Controls
|
|
const weatherCheckbox = document.getElementById('weatherLayerCheckbox');
|
|
weatherCheckbox.addEventListener('change', function() {
|
|
weatherLayer.show = this.checked;
|
|
});
|
|
|
|
// 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.');
|
|
|
|
const wildfireDataSource = new Cesium.GeoJsonDataSource();
|
|
await wildfireDataSource.load(geojsonData, {
|
|
stroke: Cesium.Color.RED,
|
|
fill: Cesium.Color.RED.withAlpha(0.5),
|
|
strokeWidth: 2
|
|
});
|
|
|
|
viewer.dataSources.add(wildfireDataSource);
|
|
console.log('Wildfire data source added to viewer.');
|
|
|
|
} catch (error) {
|
|
console.error('Error loading wildfire data:', error);
|
|
}
|
|
};
|
|
|
|
// 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>';
|
|
}
|
|
}
|
|
|
|
function waitForCesium() {
|
|
if (typeof Cesium !== 'undefined') {
|
|
initializeGlobe();
|
|
} else {
|
|
console.log('Waiting for Cesium to load...');
|
|
setTimeout(waitForCesium, 100);
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', waitForCesium);
|