AegisSight/AegisSight-Globe
2
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

feat: NASA Earthdata/GIBS Integration - Imagery-Switcher + FIRMS Layer

Quellcode durchsuchen 
- imagery.js: WMTS-Support fuer NASA GIBS + 4 neue Quellen (MODIS Terra, VIIRS SNPP, GOES East/West)
- firms.js: Neuer VIIRS Thermal Anomalies Layer (375m, tagesaktuell, Braende/Industriewaerme)
- nightlights.js: NRT-Upgrade (dynamisches Datum statt hardcodiert 2024-01-01)
- index.html: Optgroups im Imagery-Select, FIRMS-Checkbox, Script-Tag
- app.js: FIRMS Toggle
- globe.css: dot-firms Farbe

Alle NASA-Daten kostenlos via GIBS WMTS, kein API-Key noetig.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Dev
2026-03-27 21:10:41 +01:00
Ursprung 492d1135df
Commit ab4288d328
6 geänderte Dateien mit 173 neuen und 54 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

1
static/css/globe.css
Datei anzeigen

@@ -790,6 +790,7 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
/* === GEOINT Tools === */
.dot-nightlights { background: #ffd740; box-shadow: 0 0 4px rgba(255,215,64,0.4); }
.dot-celltowers { background: #e040fb; }
.dot-firms { background: #ff4400; box-shadow: 0 0 4px rgba(255,68,0,0.4); }
.geoint-btn-row {
display: flex;

14
static/index.html
Datei anzeigen

@@ -146,6 +146,7 @@
</label>
<div class="layer-loading" id="loading-disasters"></div>
<div class="layer-status" id="status-disasters"></div>
<label class="layer-toggle"> <input type="checkbox" id="layer-firms" title="NASA VIIRS Waermeanomalien: Aktive Braende, Industriewaerme, Vulkane (tagesaktuell, 375m)"> <span class="layer-dot dot-firms"></span> <span class="layer-name" title="Thermische Hotspots weltweit via NASA VIIRS Satellit">Feuer (VIIRS)</span> </label>
<label class="layer-toggle">
<input type="checkbox" id="layer-weather" title="Regenradar weltweit (RainViewer, 5min Refresh)">
<span class="layer-dot dot-weather"></span>
@@ -196,17 +197,7 @@
<div class="panel-divider"></div>
<div class="panel-section">
<div style="font-size:9px;letter-spacing:1.5px;color:var(--accent);margin-bottom:6px;">SATELLITENBILDER</div>
<select id="imagery-select" class="imagery-select" onchange="ImagerySwitch.switchTo(this.value)">
<option value="default">Cesium Ion (Standard)</option>
<option value="esri">Esri World Imagery</option>
<option value="s2-2024">Sentinel-2 (2024)</option>
<option value="s2-2023">Sentinel-2 (2023)</option>
<option value="s2-2022">Sentinel-2 (2022)</option>
<option value="s2-2020">Sentinel-2 (2020)</option>
<option value="s2-2018">Sentinel-2 (2018)</option>
<option value="topo">OpenTopoMap</option>
<option value="osm">OpenStreetMap</option>
</select>
<select id="imagery-select" class="imagery-select" onchange="ImagerySwitch.switchTo(this.value)"> <optgroup label="Standard"> <option value="default">Cesium Ion (Standard)</option> <option value="esri">Esri World Imagery</option> </optgroup> <optgroup label="NASA Earthdata (tagesaktuell)"> <option value="nasa-modis">MODIS Terra (Heute)</option> <option value="nasa-viirs">VIIRS SNPP (Heute)</option> <option value="nasa-goes-east">GOES East (Live)</option> <option value="nasa-goes-west">GOES West (Live)</option> </optgroup> <optgroup label="Sentinel-2 (historisch)"> <option value="s2-2024">Sentinel-2 (2024)</option> <option value="s2-2023">Sentinel-2 (2023)</option> <option value="s2-2022">Sentinel-2 (2022)</option> <option value="s2-2020">Sentinel-2 (2020)</option> <option value="s2-2018">Sentinel-2 (2018)</option> </optgroup> <optgroup label="Karten"> <option value="topo">OpenTopoMap</option> <option value="osm">OpenStreetMap</option> </optgroup> </select>
<div id="imagery-label" style="font-size:9px;color:var(--text-dim);margin-top:2px;">Cesium Ion (Standard)</div>
</div>
<div class="panel-divider"></div>
@@ -278,6 +269,7 @@
<script src="/static/js/layers/iss.js"></script>
<script src="/static/js/layers/terminator.js"></script>
<script src="/static/js/layers/timezones.js"></script>
<script src="/static/js/layers/firms.js"></script>
<script src="/static/js/layers/weather.js"></script>
<script src="/static/js/ui/imagery.js"></script>
<script src="/static/js/ui/search.js"></script>

1
static/js/app.js
Datei anzeigen

@@ -176,6 +176,7 @@ const Globe = {
'layer-iss': function(on) { on ? ISSLayer.start(Globe.viewer) : ISSLayer.stop(); },
'layer-disasters': function(on) { on ? DisastersLayer.start(Globe.viewer) : DisastersLayer.stop(); },
'layer-weather': function(on) { on ? WeatherLayer.start(Globe.viewer) : WeatherLayer.stop(); },
'layer-firms': function(on) { on ? FirmsLayer.start(Globe.viewer) : FirmsLayer.stop(); },
'layer-daynight': function(on) { Globe.viewer.scene.globe.enableLighting = on; },
'layer-terminator': function(on) { on ? TerminatorLayer.start(Globe.viewer) : TerminatorLayer.stop(); },
'layer-timezones': function(on) { on ? TimezonesLayer.start(Globe.viewer) : TimezonesLayer.stop(); },

38
static/js/layers/firms.js Normale Datei
Datei anzeigen

@@ -0,0 +1,38 @@
/**
* FIRMS Layer: NASA VIIRS Thermal Anomalies (375m).
* Zeigt aktive Braende, Industriewaerme und Vulkanaktivitaet als Overlay.
* Datenquelle: NASA GIBS WMTS (kostenlos, kein API-Key).
*/
const FirmsLayer = {
_viewer: null,
_layer: null,
start(viewer) {
if (this._layer) return;
this._viewer = viewer;
var today = new Date().toISOString().slice(0, 10);
this._layer = viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapTileServiceImageryProvider({
url: "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/wmts.cgi",
layer: "VIIRS_SNPP_Thermal_Anomalies_375m_All",
tileMatrixSetID: "250m",
format: "image/png",
style: "default",
time: today,
tileWidth: 512,
tileHeight: 512,
tilingScheme: new Cesium.GeographicTilingScheme(),
tileMatrixLabels: ["0","1","2","3","4","5","6","7","8"],
credit: "NASA VIIRS Thermal Anomalies",
})
);
this._layer.alpha = 0.9;
},
stop() {
if (this._layer && this._viewer) {
this._viewer.imageryLayers.remove(this._layer);
this._layer = null;
}
},
};

19
static/js/layers/nightlights.js
Datei anzeigen

@@ -1,5 +1,6 @@
/**
* Nachtlicht-Layer: NASA VIIRS Black Marble Nighttime Lights.
* Nachtlicht-Layer: NASA VIIRS Black Marble Nighttime Lights (NRT).
* Verwendet tagesaktuelle Daten statt statischem Datum.
*/
const NightlightsLayer = {
_viewer: null,
@@ -8,20 +9,22 @@ const NightlightsLayer = {
start: function(viewer) {
if (this._layer) return;
this._viewer = viewer;
// NRT-Daten brauchen ~12-24h Processing, daher Datum von gestern
var yesterday = new Date(Date.now() - 86400000).toISOString().slice(0, 10);
this._layer = viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapTileServiceImageryProvider({
url: 'https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/VIIRS_Black_Marble/default/2024-01-01/500m/{TileMatrix}/{TileRow}/{TileCol}.png',
layer: 'VIIRS_Black_Marble',
style: 'default',
tileMatrixSetID: '500m',
url: "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/VIIRS_Black_Marble/default/" + yesterday + "/500m/{TileMatrix}/{TileRow}/{TileCol}.png",
layer: "VIIRS_Black_Marble",
style: "default",
tileMatrixSetID: "500m",
tileMatrixLabels: [
'0', '1', '2', '3', '4', '5', '6', '7', '8',
"0", "1", "2", "3", "4", "5", "6", "7", "8",
],
format: 'image/png',
format: "image/png",
tilingScheme: new Cesium.GeographicTilingScheme(),
tileWidth: 512,
tileHeight: 512,
credit: 'NASA VIIRS Black Marble',
credit: "NASA VIIRS Black Marble (NRT)",
})
);
this._layer.alpha = 0.85;

154
static/js/ui/imagery.js
Datei anzeigen

@@ -1,44 +1,89 @@
/**
* Imagery Switcher: Verschiedene Satellitenbilder + historische Aufnahmen.
* Unterstuetzt URL-Template (Esri, Sentinel, OSM) und WMTS (NASA GIBS).
*/
const ImagerySwitch = {
_viewer: null,
_currentLayer: null,
_currentId: 'default',
_currentId: "default",
_sources: {
'default': { name: 'Cesium Ion (Standard)', url: null },
'esri': {
name: 'Esri World Imagery',
url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
"default": { name: "Cesium Ion (Standard)", url: null },
"esri": {
name: "Esri World Imagery",
url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
},
's2-2024': {
name: 'Sentinel-2 (2024)',
url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2024_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
"nasa-modis": {
name: "NASA MODIS Terra (Heute)",
wmts: {
url: "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/wmts.cgi",
layer: "MODIS_Terra_CorrectedReflectance_TrueColor",
tileMatrixSetID: "250m",
format: "image/jpeg",
time: "today",
maxLevel: 8,
},
's2-2023': {
name: 'Sentinel-2 (2023)',
url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2023_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
},
's2-2022': {
name: 'Sentinel-2 (2022)',
url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2022_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
"nasa-viirs": {
name: "NASA VIIRS SNPP (Heute)",
wmts: {
url: "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/wmts.cgi",
layer: "VIIRS_SNPP_CorrectedReflectance_TrueColor",
tileMatrixSetID: "250m",
format: "image/jpeg",
time: "today",
maxLevel: 8,
},
's2-2020': {
name: 'Sentinel-2 (2020)',
url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2020_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
},
's2-2018': {
name: 'Sentinel-2 (2018)',
url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2018_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
"nasa-goes-east": {
name: "NASA GOES East (Live)",
wmts: {
url: "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/wmts.cgi",
layer: "GOES-East_ABI_GeoColor",
tileMatrixSetID: "2km",
format: "image/jpeg",
time: null,
maxLevel: 5,
},
'topo': {
name: 'OpenTopoMap',
url: 'https://tile.opentopomap.org/{z}/{x}/{y}.png',
},
'osm': {
name: 'OpenStreetMap',
url: 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
"nasa-goes-west": {
name: "NASA GOES West (Live)",
wmts: {
url: "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/wmts.cgi",
layer: "GOES-West_ABI_GeoColor",
tileMatrixSetID: "2km",
format: "image/jpeg",
time: null,
maxLevel: 5,
},
},
"s2-2024": {
name: "Sentinel-2 (2024)",
url: "https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2024_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg",
},
"s2-2023": {
name: "Sentinel-2 (2023)",
url: "https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2023_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg",
},
"s2-2022": {
name: "Sentinel-2 (2022)",
url: "https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2022_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg",
},
"s2-2020": {
name: "Sentinel-2 (2020)",
url: "https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2020_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg",
},
"s2-2018": {
name: "Sentinel-2 (2018)",
url: "https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2018_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg",
},
"topo": {
name: "OpenTopoMap",
url: "https://tile.opentopomap.org/{z}/{x}/{y}.png",
},
"osm": {
name: "OpenStreetMap",
url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
},
},
@@ -46,22 +91,64 @@ const ImagerySwitch = {
this._viewer = viewer;
},
_getGibsLabels(maxLevel) {
var labels = [];
for (var i = 0; i <= maxLevel; i++) labels.push(String(i));
return labels;
},
switchTo(id) {
if (!this._viewer || this._currentId === id) return;
var src = this._sources[id];
if (!src) return;
// Alle eigenen Imagery-Layer entfernen (nicht den Cesium-Default und nicht Labels)
// Alten Layer entfernen
if (this._currentLayer) {
this._viewer.imageryLayers.remove(this._currentLayer);
this._currentLayer = null;
}
if (id === 'default') {
// Cesium Ion Default wiederherstellen — nichts tun, der ist immer da
if (id === "default") {
this._currentId = id;
} else if (src.wmts) {
// NASA GIBS WMTS Provider
var w = src.wmts;
var opts = {
url: w.url,
layer: w.layer,
tileMatrixSetID: w.tileMatrixSetID,
format: w.format,
style: "default",
tileWidth: 512,
tileHeight: 512,
tilingScheme: new Cesium.GeographicTilingScheme(),
tileMatrixLabels: this._getGibsLabels(w.maxLevel),
credit: "NASA GIBS",
};
if (w.time === "today") {
opts.times = new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({
start: Cesium.JulianDate.fromIso8601(new Date().toISOString().slice(0, 10)),
stop: Cesium.JulianDate.fromIso8601("9999-12-31"),
}),
]);
opts.clock = this._viewer.clock;
} else if (w.time) {
opts.times = new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({
start: Cesium.JulianDate.fromIso8601(w.time),
stop: Cesium.JulianDate.fromIso8601("9999-12-31"),
}),
]);
opts.clock = this._viewer.clock;
}
this._currentLayer = this._viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapTileServiceImageryProvider(opts)
);
this._viewer.imageryLayers.lower(this._currentLayer);
this._currentId = id;
} else {
// Neuen Layer als untersten hinzufuegen (ueber dem Default)
// URL Template Provider (Esri, Sentinel, OSM)
this._currentLayer = this._viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url: src.url,
@@ -69,17 +156,14 @@ const ImagerySwitch = {
credit: src.name,
})
);
// Unter Labels aber ueber Default
this._viewer.imageryLayers.lower(this._currentLayer);
this._currentId = id;
}
// Dropdown aktualisieren
var sel = document.getElementById('imagery-select');
var sel = document.getElementById("imagery-select");
if (sel) sel.value = id;
// Status
var label = document.getElementById('imagery-label');
var label = document.getElementById("imagery-label");
if (label) label.textContent = src.name;
},
};