Cloud
This commit is contained in:
Flatlogic Bot
parent
055d24df95
commit
557e4a3669
54
api/weather.php
Normal file
54
api/weather.php
Normal file
@ -0,0 +1,54 @@
|
||||
<?php
|
||||
require_once __DIR__ . '/../config.php';
|
||||
|
||||
// Get parameters from the request
|
||||
$layer = $_GET['layer'] ?? 'clouds_new';
|
||||
$z = $_GET['z'] ?? 0;
|
||||
$x = $_GET['x'] ?? 0;
|
||||
$y = $_GET['y'] ?? 0;
|
||||
|
||||
// Validate parameters (basic validation)
|
||||
if (!is_numeric($z) || !is_numeric($x) || !is_numeric($y)) {
|
||||
header("HTTP/1.1 400 Bad Request");
|
||||
echo "Invalid tile coordinates.";
|
||||
exit;
|
||||
}
|
||||
|
||||
// Construct the OpenWeatherMap API URL
|
||||
$apiKey = defined('OWM_API_KEY') ? OWM_API_KEY : '';
|
||||
if (empty($apiKey)) {
|
||||
header("HTTP/1.1 500 Internal Server Error");
|
||||
echo "API key is not configured.";
|
||||
exit;
|
||||
}
|
||||
|
||||
$url = "https://tile.openweathermap.org/map/{$layer}/{$z}/{$x}/{$y}.png?appid={$apiKey}";
|
||||
|
||||
// Fetch the tile using cURL
|
||||
$ch = curl_init();
|
||||
curl_setopt($ch, CURLOPT_URL, $url);
|
||||
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
|
||||
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
|
||||
// Follow redirects, as OWM might use them
|
||||
curl_setopt($ch, CURLOPT_TIMEOUT, 20);
|
||||
// Set a reasonable timeout
|
||||
|
||||
$tile_data = curl_exec($ch);
|
||||
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||
curl_close($ch);
|
||||
|
||||
// Check for errors and serve the tile
|
||||
if ($http_code == 200 && !empty($tile_data)) {
|
||||
header('Content-Type: image/png');
|
||||
header('Content-Length: ' . strlen($tile_data));
|
||||
echo $tile_data;
|
||||
} else {
|
||||
// Return a transparent pixel or a specific error image if the tile is not found or an error occurs
|
||||
header("HTTP/1.1 " . ($http_code !== 200 ? $http_code : 404));
|
||||
// Create a 1x1 transparent PNG
|
||||
$transparent_pixel = base64_decode('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
|
||||
header('Content-Type: image/png');
|
||||
echo $transparent_pixel;
|
||||
}
|
||||
exit;
|
||||
?>
|
||||
@ -109,3 +109,30 @@ html, body {
|
||||
bottom: 0;
|
||||
border: none; /* Remove the debug border */
|
||||
}
|
||||
|
||||
#controls {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background: rgba(42, 42, 42, 0.8);
|
||||
color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
font-family: sans-serif;
|
||||
z-index: 10;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.control-group h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #555;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -5,7 +5,6 @@ function initializeGlobe() {
|
||||
|
||||
try {
|
||||
console.log('Initializing Cesium Viewer');
|
||||
// Initialize a Cesium Viewer with a map
|
||||
const viewer = new Cesium.Viewer('cesiumContainer', {
|
||||
imageryProvider: new Cesium.OpenStreetMapImageryProvider({
|
||||
url : 'https://a.tile.openstreetmap.org/'
|
||||
@ -25,7 +24,19 @@ function initializeGlobe() {
|
||||
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 () => {
|
||||
@ -50,66 +61,11 @@ function initializeGlobe() {
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading wildfire data:', error);
|
||||
// This catch block prevents the globe from crashing if the API fails.
|
||||
}
|
||||
};
|
||||
|
||||
// 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);
|
||||
|
||||
6
config.php
Normal file
6
config.php
Normal file
@ -0,0 +1,6 @@
|
||||
<?php
|
||||
// Main configuration file
|
||||
|
||||
// OpenWeatherMap API Key
|
||||
define('OWM_API_KEY', '1dfc5acd07d74b93a2ebdcccf3181cab');
|
||||
?>
|
||||
@ -1,3 +1,4 @@
|
||||
<?php require_once 'config.php'; ?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
@ -9,6 +10,14 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="cesiumContainer"></div>
|
||||
<div id="controls">
|
||||
<div class="control-group">
|
||||
<h3>Layers</h3>
|
||||
<label>
|
||||
<input type="checkbox" id="weatherLayerCheckbox" checked> Weather
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<script src="assets/cesium/Build/Cesium/Cesium.js"></script>
|
||||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user