admin/34935-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v3

Browse Source
This commit is contained in:
Flatlogic Bot 2025-10-14 01:40:33 +00:00
parent 73d0602dee
commit 4a52e2ad2d
1 changed files with 37 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
assets/js/main.js
View File

@ -5,13 +5,10 @@ document.addEventListener('DOMContentLoaded', function () {
try {
console.log('Initializing Cesium Viewer');
// Initialize a Cesium Viewer with a map
// Initialize a Cesium Viewer without a base imagery provider.
const viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: new Cesium.OpenStreetMapImageryProvider({
url : 'https://a.tile.openstreetmap.org/'
}),
animation: false,
baseLayerPicker: false,
baseLayerPicker: true,
fullscreenButton: false,
geocoder: false,
homeButton: false,
@ -20,12 +17,27 @@ document.addEventListener('DOMContentLoaded', function () {
selectionIndicator: false,
timeline: false,
navigationHelpButton: false,
scene3DOnly: true
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 () => {
@ -38,14 +50,25 @@ document.addEventListener('DOMContentLoaded', function () {
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
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);
}
}
});
viewer.dataSources.add(wildfireDataSource);
console.log('Wildfire data source added to viewer.');
} catch (error) {
@ -54,62 +77,8 @@ document.addEventListener('DOMContentLoaded', function () {
}
};
// Function to load hurricane data
const loadHurricaneData = async () => {
try {
console.log('Fetching hurricane data...');
// Use KmlDataSource for the KML data from the hurricanes API
const hurricaneDataSource = await Cesium.KmlDataSource.load('api/hurricanes.php', {
camera: viewer.camera,
canvas: viewer.canvas
});
await viewer.dataSources.add(hurricaneDataSource);
console.log('Hurricane data source added to viewer.');
} catch (error) {
console.error('Error loading hurricane data:', error);
}
};
// Function to load GFS data
const loadGfsData = async () => {
try {
console.log('Fetching GFS data...');
const response = await fetch('api/gfs.php');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const geojsonData = await response.json();
console.log('GFS data fetched successfully.');
const gfsDataSource = new Cesium.GeoJsonDataSource();
await gfsDataSource.load(geojsonData, {
stroke: Cesium.Color.BLUE.withAlpha(0.3),
fill: Cesium.Color.BLUE.withAlpha(0.3),
strokeWidth: 1
});
// Simple heatmap-like styling for GFS points
gfsDataSource.entities.values.forEach(entity => {
const value = entity.properties.value.getValue();
const color = Cesium.Color.fromHsl(0.6 - (value - 100000) / 2000 * 0.5, 1.0, 0.5).withAlpha(0.5);
entity.point = new Cesium.PointGraphics({
color: color,
pixelSize: 5
});
});
viewer.dataSources.add(gfsDataSource);
console.log('GFS data source added to viewer.');
} catch (error) {
console.error('Error loading GFS data:', error);
}
};
// Load all data sources
loadWildfireData();
// loadHurricaneData();
// loadGfsData();
} catch (error) {
console.error('A critical error occurred while initializing the Cesium viewer:', error);