Bidirektionale Monitor-Verbindung + Klick-Zusammenfassungen
GLOBE -> MONITOR (Auto-Push): - Alle 10min werden NASA EONET + USGS M4.5+ Erdbeben automatisch als Artikel in die Naturkatastrophen-Lage (ID 45) gepusht - Monitor verifiziert und erstellt Zusammenfassung - Duplikat-Check verhindert doppelte Eintraege MONITOR -> GLOBE (Klick-Summaries): - Katastrophen-Layer holt Monitor-Daten beim Start - Klick auf Katastrophe/Erdbeben zeigt: 1. Ereignis-Details (Typ, Ort, Magnitude) 2. Monitor-Zusammenfassung (wenn Lage in der Region existiert) - Naechsten Monitor-Punkt im 5-Grad-Radius gesucht - Summary gekuerzt auf 600 Zeichen, Markdown bereinigt
Dieser Commit ist enthalten in:
Claude Dev
@@ -1,11 +1,13 @@
|
||||
/**
|
||||
* Katastrophen-Layer: NASA EONET + USGS Erdbeben kombiniert.
|
||||
* Katastrophen-Layer: NASA EONET + USGS Erdbeben.
|
||||
* Bei Klick: zeigt Details + Monitor-Zusammenfassung falls verfuegbar.
|
||||
*/
|
||||
const DisastersLayer = {
|
||||
_viewer: null,
|
||||
_dataSource: null,
|
||||
_interval: null,
|
||||
_count: 0,
|
||||
_monitorData: null,
|
||||
|
||||
start(viewer) {
|
||||
if (this._dataSource) return;
|
||||
@@ -13,6 +15,7 @@ const DisastersLayer = {
|
||||
this._dataSource = new Cesium.CustomDataSource('disasters');
|
||||
viewer.dataSources.add(this._dataSource);
|
||||
this._fetch();
|
||||
this._fetchMonitorContext();
|
||||
var self = this;
|
||||
this._interval = setInterval(function() { self._fetch(); }, 600000);
|
||||
},
|
||||
@@ -23,6 +26,47 @@ const DisastersLayer = {
|
||||
this._count = 0;
|
||||
},
|
||||
|
||||
_fetchMonitorContext() {
|
||||
var self = this;
|
||||
fetch('/api/monitor-feed')
|
||||
.then(function(r) { return r.json(); })
|
||||
.then(function(data) { self._monitorData = data; })
|
||||
.catch(function() {});
|
||||
},
|
||||
|
||||
_findMonitorSummary(lat, lon) {
|
||||
if (!this._monitorData || !this._monitorData.incidents) return null;
|
||||
// Finde naechsten Monitor-Punkt und dessen Lage-Summary
|
||||
var features = this._monitorData.features || [];
|
||||
var best = null, bestDist = 999;
|
||||
for (var i = 0; i < features.length; i++) {
|
||||
var c = features[i].geometry.coordinates;
|
||||
var d = Math.abs(c[1] - lat) + Math.abs(c[0] - lon);
|
||||
if (d < bestDist) { bestDist = d; best = features[i]; }
|
||||
}
|
||||
if (!best || bestDist > 5) return null;
|
||||
var incId = best.properties.incident_id;
|
||||
var incidents = this._monitorData.incidents || [];
|
||||
for (var j = 0; j < incidents.length; j++) {
|
||||
if (incidents[j].id === incId && incidents[j].summary) return incidents[j];
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
_buildMonitorHtml(incident) {
|
||||
if (!incident || !incident.summary) return '';
|
||||
var summary = incident.summary
|
||||
.replace(/##?\s*/g, '').replace(/\*\*/g, '').replace(/\[(\d+)\]/g, '')
|
||||
.substring(0, 600);
|
||||
return '<div style="border-top:1px solid #333;padding-top:8px;margin-top:8px">' +
|
||||
'<div style="color:#00ff88;font-size:10px;letter-spacing:1px;margin-bottom:4px">MONITOR: ' +
|
||||
(incident.title || 'LAGE').toUpperCase() + '</div>' +
|
||||
'<div style="color:#ccc;font-size:11px;line-height:1.5">' + summary +
|
||||
(incident.summary.length > 600 ? '...' : '') + '</div>' +
|
||||
'<div style="color:#666;font-size:9px;margin-top:4px">Stand: ' +
|
||||
new Date(incident.updated_at).toLocaleString('de-DE') + '</div></div>';
|
||||
},
|
||||
|
||||
_fetch() {
|
||||
var self = this;
|
||||
var loadEl = document.getElementById('loading-disasters');
|
||||
@@ -37,11 +81,9 @@ const DisastersLayer = {
|
||||
.then(function(results) {
|
||||
if (!self._dataSource) return;
|
||||
self._dataSource.entities.removeAll();
|
||||
var events = results[0].events || [];
|
||||
var quakes = results[1].features || [];
|
||||
self._renderEonet(events);
|
||||
self._renderQuakes(quakes);
|
||||
self._count = events.length + quakes.length;
|
||||
self._renderEonet(results[0].events || []);
|
||||
self._renderQuakes(results[1].features || []);
|
||||
self._count = (results[0].events || []).length + (results[1].features || []).length;
|
||||
if (statusEl) statusEl.textContent = self._count + ' Ereignisse';
|
||||
})
|
||||
.catch(function(e) { console.warn('Disasters error:', e); if (statusEl) statusEl.textContent = 'Fehler'; })
|
||||
@@ -68,6 +110,9 @@ const DisastersLayer = {
|
||||
var latest = geom[geom.length - 1];
|
||||
var coords = latest.coordinates;
|
||||
if (!coords || coords.length < 2) return;
|
||||
|
||||
var monitorHtml = self._buildMonitorHtml(self._findMonitorSummary(coords[1], coords[0]));
|
||||
|
||||
self._dataSource.entities.add({
|
||||
position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 0),
|
||||
point: {
|
||||
@@ -75,7 +120,6 @@ const DisastersLayer = {
|
||||
color: Cesium.Color.fromCssColorString(icon.color),
|
||||
outlineColor: Cesium.Color.fromCssColorString(icon.color).withAlpha(0.4),
|
||||
outlineWidth: 3,
|
||||
heightReference: Cesium.HeightReference.NONE,
|
||||
},
|
||||
label: {
|
||||
text: icon.label,
|
||||
@@ -88,10 +132,11 @@ const DisastersLayer = {
|
||||
scale: 0.7,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000000),
|
||||
},
|
||||
description: '<div style="font-family:monospace;font-size:13px;padding:8px">' +
|
||||
'<strong style="color:' + icon.color + '">' + icon.label.toUpperCase() + '</strong><br>' +
|
||||
description: '<div style="font-family:monospace;font-size:12px;padding:10px;max-width:400px;line-height:1.6">' +
|
||||
'<strong style="color:' + icon.color + ';font-size:14px">' + icon.label.toUpperCase() + '</strong><br>' +
|
||||
'<span style="color:#e0e0e0">' + (evt.title || '?') + '</span><br>' +
|
||||
'<span style="color:#888">Quellen: ' + (evt.sources || []).map(function(s) { return s.id; }).join(', ') + '</span></div>',
|
||||
'<span style="color:#888;font-size:10px">Quellen: ' + (evt.sources || []).map(function(s) { return s.id; }).join(', ') + '</span>' +
|
||||
monitorHtml + '</div>',
|
||||
});
|
||||
});
|
||||
},
|
||||
@@ -105,6 +150,9 @@ const DisastersLayer = {
|
||||
var mag = p.mag || 1;
|
||||
var ageH = (now - p.time) / 3600000;
|
||||
var color = ageH < 1 ? '#ff0000' : ageH < 6 ? '#ff6600' : ageH < 12 ? '#ffaa00' : '#ffdd00';
|
||||
|
||||
var monitorHtml = self._buildMonitorHtml(self._findMonitorSummary(c[1], c[0]));
|
||||
|
||||
self._dataSource.entities.add({
|
||||
position: Cesium.Cartesian3.fromDegrees(c[0], c[1], 0),
|
||||
point: {
|
||||
@@ -112,7 +160,6 @@ const DisastersLayer = {
|
||||
color: Cesium.Color.fromCssColorString(color),
|
||||
outlineColor: Cesium.Color.fromCssColorString(color).withAlpha(0.4),
|
||||
outlineWidth: 2,
|
||||
heightReference: Cesium.HeightReference.NONE,
|
||||
},
|
||||
label: {
|
||||
text: 'M' + mag.toFixed(1),
|
||||
@@ -125,11 +172,12 @@ const DisastersLayer = {
|
||||
scale: 0.7,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000),
|
||||
},
|
||||
description: '<div style="font-family:monospace;font-size:13px;padding:8px">' +
|
||||
'<strong style="color:' + color + '">ERDBEBEN M' + mag.toFixed(1) + '</strong><br>' +
|
||||
description: '<div style="font-family:monospace;font-size:12px;padding:10px;max-width:400px;line-height:1.6">' +
|
||||
'<strong style="color:' + color + ';font-size:14px">ERDBEBEN M' + mag.toFixed(1) + '</strong><br>' +
|
||||
'<span style="color:#e0e0e0">' + (p.place || '?') + '</span><br>' +
|
||||
'<span style="color:#888">Tiefe: ' + (c[2] || '?') + ' km | ' +
|
||||
new Date(p.time).toLocaleString('de-DE') + '</span></div>',
|
||||
'<span style="color:#888;font-size:10px">Tiefe: ' + (c[2] || '?') + ' km | ' +
|
||||
new Date(p.time).toLocaleString('de-DE') + '</span>' +
|
||||
monitorHtml + '</div>',
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren