6f4c5ab3a6
- Animierter Ladebalken unter jedem Layer-Toggle bei Datenabruf - Status-Text (Lade Daten.../Fehler beim Laden) - Fetch-Wrapper: nur 401 redirected zum Login, nicht 403 - Ortsnamen: minimumLevel, tileWidth/Height, LINEAR Texture-Filter fuer konsistente Schriftgroessen beim Laden
77 Zeilen
3.2 KiB
JavaScript
77 Zeilen
3.2 KiB
JavaScript
/**
|
|
* Erdbeben-Layer: Farbige Kreise auf der Erdoberfläche.
|
|
*/
|
|
const QuakesLayer = {
|
|
_viewer: null,
|
|
_dataSource: null,
|
|
_interval: null,
|
|
_count: 0,
|
|
|
|
start(viewer) {
|
|
if (this._dataSource) return;
|
|
this._viewer = viewer;
|
|
this._dataSource = new Cesium.CustomDataSource('quakes');
|
|
viewer.dataSources.add(this._dataSource);
|
|
this._fetch();
|
|
var self = this;
|
|
this._interval = setInterval(function() { self._fetch(); }, 300000);
|
|
},
|
|
|
|
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;
|
|
},
|
|
|
|
_fetch() {
|
|
var self = this;
|
|
var loadEl = document.getElementById('loading-quakes');
|
|
var statusEl = document.getElementById('status-quakes');
|
|
if (loadEl) loadEl.classList.add('active');
|
|
if (statusEl) { statusEl.textContent = 'Lade Daten...'; statusEl.classList.add('active'); }
|
|
fetch('/api/quakes')
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (!self._dataSource) return;
|
|
self._dataSource.entities.removeAll();
|
|
var features = data.features || [];
|
|
self._count = features.length;
|
|
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
|
|
? Cesium.Color.RED.withAlpha(0.8)
|
|
: ageH < 6 ? Cesium.Color.ORANGE.withAlpha(0.7)
|
|
: ageH < 12 ? Cesium.Color.YELLOW.withAlpha(0.6)
|
|
: Cesium.Color.YELLOW.withAlpha(0.4);
|
|
var radius = Math.max(mag * 15000, 20000); // Meter
|
|
self._dataSource.entities.add({
|
|
position: Cesium.Cartesian3.fromDegrees(c[0], c[1]),
|
|
ellipse: {
|
|
semiMinorAxis: radius,
|
|
semiMajorAxis: radius,
|
|
material: color,
|
|
outline: true,
|
|
outlineColor: color.withAlpha(1.0),
|
|
outlineWidth: 1,
|
|
heightReference: Cesium.HeightReference.NONE,
|
|
},
|
|
description: '<div style="font-family:monospace;font-size:12px;color:#ff6644">' +
|
|
'<strong>M' + mag.toFixed(1) + '</strong> ' + (p.place || '') + '<br>' +
|
|
'Tiefe: ' + (c[2] || '?') + ' km<br>' +
|
|
'Zeit: ' + new Date(p.time).toLocaleString('de-DE') +
|
|
'</div>',
|
|
});
|
|
});
|
|
})
|
|
.catch(function(e) { console.warn('Quakes fetch error:', e); if (statusEl) { statusEl.textContent = 'Fehler beim Laden'; } })
|
|
.finally(function() { if (loadEl) loadEl.classList.remove('active'); setTimeout(function() { if (statusEl) statusEl.classList.remove('active'); }, 3000); });
|
|
},
|
|
};
|