bd2c274dd2
SUBMENU (Schiffstypen etc.): - Links eingerueckt (28px padding-left + 12px margin) - Gruene Linie am linken Rand zur Abgrenzung - Leicht dunklerer Hintergrund - Klar als Untermenue erkennbar PUNKTGROESSEN (alle Layer nochmals ~60% groesser): - Flugzeuge: 5/6/8px (war 3/4/5) - Schiffe: 4/5/7px (war 3/4/5) - Militaer: 8px (war 6) - Katastrophen: 14px (war 10) - Erdbeben: 8-20px (war 6-15) - GDELT: 10px (war 7) - ISS: 18px (war 14) - AKWs: 10px (war 7) - Satelliten: 3/5px (war 1.5/3) - Cluster: +40% groesser
189 Zeilen
8.8 KiB
JavaScript
189 Zeilen
8.8 KiB
JavaScript
/**
|
|
* 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;
|
|
this._viewer = viewer;
|
|
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);
|
|
},
|
|
|
|
stop() {
|
|
if (this._interval) { clearInterval(this._interval); this._interval = null; }
|
|
if (this._dataSource && this._viewer) { this._viewer.dataSources.remove(this._dataSource); this._dataSource = null; }
|
|
this._count = 0;
|
|
},
|
|
|
|
_fetchMonitorContext() {
|
|
var self = this;
|
|
var lageId = (typeof Globe !== 'undefined') ? Globe._currentLageId : null;
|
|
if (!lageId) { self._monitorData = null; return; }
|
|
fetch('/api/monitor-feed?incident_id=' + lageId)
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
self._monitorData = data;
|
|
// Katastrophen neu rendern mit Monitor-Kontext
|
|
if (self._dataSource) self._fetch();
|
|
})
|
|
.catch(function() {});
|
|
},
|
|
|
|
_buildMonitorHtml(lat, lon) {
|
|
if (!this._monitorData) return '';
|
|
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 > 3) return '';
|
|
|
|
var p = best.properties;
|
|
var articles = p.articles || [];
|
|
if (!articles.length) return '';
|
|
|
|
var html = '<div style="border-top:1px solid #333;padding-top:8px;margin-top:8px">';
|
|
html += '<div style="color:#00ff88;font-size:10px;letter-spacing:1px;margin-bottom:4px">MONITOR: ' +
|
|
(p.name || '').toUpperCase() + ' (' + (p.article_count || 0) + ' Artikel)</div>';
|
|
articles.forEach(function(a) {
|
|
html += '<div style="border-left:2px solid #00ff88;padding-left:8px;margin-bottom:6px">';
|
|
html += '<div style="color:#e0e0e0;font-size:11px;font-weight:700">' + (a.headline || '') + '</div>';
|
|
if (a.summary) html += '<div style="color:#bbb;font-size:10px;margin-top:2px">' + a.summary.substring(0, 200) + '</div>';
|
|
if (a.source) html += '<div style="color:#666;font-size:9px">' + a.source + '</div>';
|
|
html += '</div>';
|
|
});
|
|
html += '</div>';
|
|
return html;
|
|
},
|
|
|
|
_fetch() {
|
|
var self = this;
|
|
var loadEl = document.getElementById('loading-disasters');
|
|
var statusEl = document.getElementById('status-disasters');
|
|
if (loadEl) loadEl.classList.add('active');
|
|
if (statusEl) { statusEl.textContent = 'Lade Katastrophen + Erdbeben...'; statusEl.classList.add('active'); }
|
|
|
|
Promise.all([
|
|
fetch('/api/disasters').then(function(r) { return r.json(); }).catch(function() { return { events: [] }; }),
|
|
fetch('/api/quakes').then(function(r) { return r.json(); }).catch(function() { return { features: [] }; })
|
|
])
|
|
.then(function(results) {
|
|
if (!self._dataSource) return;
|
|
self._dataSource.entities.removeAll();
|
|
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'; })
|
|
.finally(function() { if (loadEl) loadEl.classList.remove('active'); setTimeout(function() { if (statusEl) statusEl.classList.remove('active'); }, 5000); });
|
|
},
|
|
|
|
_renderEonet(events) {
|
|
var self = this;
|
|
var icons = {
|
|
'wildfires': { color: '#ff4400', label: 'Waldbrand' },
|
|
'volcanoes': { color: '#ff0000', label: 'Vulkan' },
|
|
'severeStorms': { color: '#aa44ff', label: 'Sturm' },
|
|
'floods': { color: '#4488ff', label: 'Flut' },
|
|
'earthquakes': { color: '#ffaa00', label: 'Erdbeben' },
|
|
'seaLakeIce': { color: '#88ddff', label: 'Eis' },
|
|
'landslides': { color: '#886644', label: 'Erdrutsch' },
|
|
};
|
|
events.forEach(function(evt) {
|
|
var cats = evt.categories || [];
|
|
var catId = cats.length ? cats[0].id : 'unknown';
|
|
var icon = icons[catId] || { color: '#ffffff', label: catId };
|
|
var geom = evt.geometry || [];
|
|
if (!geom.length) return;
|
|
var latest = geom[geom.length - 1];
|
|
var coords = latest.coordinates;
|
|
if (!coords || coords.length < 2) return;
|
|
|
|
var monitorHtml = self._buildMonitorHtml(coords[1], coords[0]);
|
|
|
|
self._dataSource.entities.add({
|
|
name: icon.label + ': ' + (evt.title || '?'),
|
|
position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 0),
|
|
point: {
|
|
pixelSize: 14,
|
|
color: Cesium.Color.fromCssColorString(icon.color),
|
|
outlineColor: Cesium.Color.fromCssColorString(icon.color).withAlpha(0.4),
|
|
outlineWidth: 3,
|
|
},
|
|
label: {
|
|
text: icon.label,
|
|
font: '10px monospace',
|
|
fillColor: Cesium.Color.fromCssColorString(icon.color),
|
|
outlineColor: Cesium.Color.BLACK,
|
|
outlineWidth: 2,
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
pixelOffset: new Cesium.Cartesian2(0, -14),
|
|
scale: 0.7,
|
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000000),
|
|
},
|
|
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;font-size:10px">Quellen: ' + (evt.sources || []).map(function(s) { return s.id; }).join(', ') + '</span>' +
|
|
monitorHtml + '</div>',
|
|
});
|
|
});
|
|
},
|
|
|
|
_renderQuakes(features) {
|
|
var self = this;
|
|
var now = Date.now();
|
|
features.forEach(function(f) {
|
|
var c = f.geometry.coordinates;
|
|
var p = f.properties;
|
|
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(c[1], c[0]);
|
|
|
|
self._dataSource.entities.add({
|
|
name: 'Erdbeben M' + mag.toFixed(1) + ' ' + (p.place || ''),
|
|
position: Cesium.Cartesian3.fromDegrees(c[0], c[1], 0),
|
|
point: {
|
|
pixelSize: Math.max(mag * 4, 8),
|
|
color: Cesium.Color.fromCssColorString(color),
|
|
outlineColor: Cesium.Color.fromCssColorString(color).withAlpha(0.4),
|
|
outlineWidth: 2,
|
|
},
|
|
label: {
|
|
text: 'M' + mag.toFixed(1),
|
|
font: '10px monospace',
|
|
fillColor: Cesium.Color.fromCssColorString(color),
|
|
outlineColor: Cesium.Color.BLACK,
|
|
outlineWidth: 2,
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
pixelOffset: new Cesium.Cartesian2(0, -12),
|
|
scale: 0.7,
|
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000),
|
|
},
|
|
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;font-size:10px">Tiefe: ' + (c[2] || '?') + ' km | ' +
|
|
new Date(p.time).toLocaleString('de-DE') + '</span>' +
|
|
monitorHtml + '</div>',
|
|
});
|
|
});
|
|
},
|
|
};
|