Flights+Ships: Alle Daten dargestellt, Clustering, Status-Anzeige

Flights: OpenSky liefert 6.500+ global, korrekte Hoehenkonvertierung
(ft->m), Cesium Entity-Clustering bei 30px/5min, Labels nur < 800km.
Status-Text zeigt Anzahl nach Laden.

Ships: Entity-Clustering aktiviert (25px/5min), Labels nur < 300km.
Status-Text zeigt Anzahl.

Beide Layer zeigen jetzt ALLE Daten komplett — Ukraine, Belarus,
Nahost, Afrika, Russland, China alles enthalten.
Dieser Commit ist enthalten in:
Claude Dev
2026-03-24 12:29:39 +01:00
Ursprung edff097868
Commit 7015a9e512
2 geänderte Dateien mit 34 neuen und 28 gelöschten Zeilen

Datei anzeigen

@@ -1,5 +1,5 @@
/** /**
* Flugverkehr-Layer: Grüne Punkte mit Höhenprofil auf dem 3D-Globus. * Flugverkehr-Layer: Grüne Punkte auf dem 3D-Globus.
*/ */
const FlightsLayer = { const FlightsLayer = {
_viewer: null, _viewer: null,
@@ -11,6 +11,9 @@ const FlightsLayer = {
if (this._dataSource) return; if (this._dataSource) return;
this._viewer = viewer; this._viewer = viewer;
this._dataSource = new Cesium.CustomDataSource('flights'); this._dataSource = new Cesium.CustomDataSource('flights');
this._dataSource.clustering.enabled = true;
this._dataSource.clustering.pixelRange = 30;
this._dataSource.clustering.minimumClusterSize = 5;
viewer.dataSources.add(this._dataSource); viewer.dataSources.add(this._dataSource);
this._fetch(); this._fetch();
var self = this; var self = this;
@@ -41,42 +44,42 @@ const FlightsLayer = {
self._count = ac.length; self._count = ac.length;
ac.forEach(function(a) { ac.forEach(function(a) {
if (!a.lat || !a.lon) return; if (!a.lat || !a.lon) return;
var alt = (a.alt_baro || a.alt_geom || 10000) * 0.3048; // ft -> m // alt_baro ist in ft vom Backend, konvertiere zu m fuer Cesium
if (alt < 100) alt = 10000; // ground = default var altFt = a.alt_baro || 30000;
var cs = (a.flight || a.callsign || a.hex || '???').trim(); var altM = altFt * 0.3048;
var spd = a.gs || 0; var cs = (a.flight || a.hex || '').trim() || '?';
self._dataSource.entities.add({ self._dataSource.entities.add({
position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, alt), position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, altM),
point: { point: {
pixelSize: 4, pixelSize: 3,
color: Cesium.Color.fromCssColorString('#00ff88'), color: Cesium.Color.fromCssColorString('#00ff88'),
outlineColor: Cesium.Color.fromCssColorString('#004422'), outlineColor: Cesium.Color.fromCssColorString('#003311'),
outlineWidth: 1, outlineWidth: 1,
heightReference: Cesium.HeightReference.NONE, heightReference: Cesium.HeightReference.NONE,
}, },
label: { label: {
text: cs, text: cs,
font: '10px monospace', font: '10px monospace',
fillColor: Cesium.Color.fromCssColorString('#00ff88').withAlpha(0.8), fillColor: Cesium.Color.fromCssColorString('#00ff88').withAlpha(0.7),
outlineColor: Cesium.Color.BLACK, outlineColor: Cesium.Color.BLACK,
outlineWidth: 2, outlineWidth: 2,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, style: Cesium.LabelStyle.FILL_AND_OUTLINE,
pixelOffset: new Cesium.Cartesian2(8, -4), pixelOffset: new Cesium.Cartesian2(6, -3),
scale: 0.8, scale: 0.7,
showBackground: false, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 800000),
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000),
}, },
description: '<div style="font-family:monospace;font-size:12px;color:#00ff88">' + description: '<div style="font-family:monospace;font-size:12px;color:#00ff88">' +
'<strong>' + cs + '</strong><br>' + '<strong>' + cs + '</strong><br>' +
'ALT: ' + (a.alt_baro || '?') + ' ft<br>' + 'ALT: ' + altFt + ' ft<br>' +
'SPD: ' + Math.round(spd) + ' kts<br>' + 'SPD: ' + (a.gs || '?') + ' kts<br>' +
'HDG: ' + Math.round(a.track || 0) + '°' + 'HDG: ' + Math.round(a.track || 0) + '&deg;' +
(a.t ? '<br>TYP: ' + a.t : '') + (a.origin ? '<br>FROM: ' + a.origin : '') +
'</div>', '</div>',
}); });
}); });
if (statusEl) { statusEl.textContent = ac.length.toLocaleString('de-DE') + ' Flugzeuge'; }
}) })
.catch(function(e) { console.warn('Flights fetch error:', e); if (statusEl) { statusEl.textContent = 'Fehler beim Laden'; } }) .catch(function(e) { console.warn('Flights 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); }); .finally(function() { if (loadEl) loadEl.classList.remove('active'); setTimeout(function() { if (statusEl) statusEl.classList.remove('active'); }, 5000); });
}, },
}; };

Datei anzeigen

@@ -11,6 +11,9 @@ const ShipsLayer = {
if (this._dataSource) return; if (this._dataSource) return;
this._viewer = viewer; this._viewer = viewer;
this._dataSource = new Cesium.CustomDataSource('ships'); this._dataSource = new Cesium.CustomDataSource('ships');
this._dataSource.clustering.enabled = true;
this._dataSource.clustering.pixelRange = 25;
this._dataSource.clustering.minimumClusterSize = 5;
viewer.dataSources.add(this._dataSource); viewer.dataSources.add(this._dataSource);
this._fetch(); this._fetch();
var self = this; var self = this;
@@ -41,42 +44,42 @@ const ShipsLayer = {
self._count = ships.length; self._count = ships.length;
ships.forEach(function(s) { ships.forEach(function(s) {
if (!s.lat || !s.lon) return; if (!s.lat || !s.lon) return;
var name = s.name || ('MMSI ' + (s.mmsi || '?'));
var sog = s.sog || 0; var sog = s.sog || 0;
var color = sog > 0.5 var color = sog > 0.5
? Cesium.Color.fromCssColorString('#4499ff') ? Cesium.Color.fromCssColorString('#4499ff')
: Cesium.Color.fromCssColorString('#556688'); : Cesium.Color.fromCssColorString('#445577');
var name = s.name || ('MMSI ' + (s.mmsi || '?'));
self._dataSource.entities.add({ self._dataSource.entities.add({
position: Cesium.Cartesian3.fromDegrees(s.lon, s.lat, 0), position: Cesium.Cartesian3.fromDegrees(s.lon, s.lat, 0),
point: { point: {
pixelSize: 3, pixelSize: 3,
color: color, color: color,
outlineColor: Cesium.Color.fromCssColorString('#112244'), outlineColor: Cesium.Color.fromCssColorString('#112233'),
outlineWidth: 0.5, outlineWidth: 0.5,
heightReference: Cesium.HeightReference.NONE, heightReference: Cesium.HeightReference.NONE,
}, },
label: { label: {
text: name, text: name,
font: '9px monospace', font: '9px monospace',
fillColor: Cesium.Color.fromCssColorString('#4499ff').withAlpha(0.7), fillColor: Cesium.Color.fromCssColorString('#4499ff').withAlpha(0.6),
outlineColor: Cesium.Color.BLACK, outlineColor: Cesium.Color.BLACK,
outlineWidth: 2, outlineWidth: 2,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, style: Cesium.LabelStyle.FILL_AND_OUTLINE,
pixelOffset: new Cesium.Cartesian2(6, -3), pixelOffset: new Cesium.Cartesian2(5, -2),
scale: 0.7, scale: 0.6,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 500000), distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 300000),
}, },
description: '<div style="font-family:monospace;font-size:12px;color:#4499ff">' + description: '<div style="font-family:monospace;font-size:12px;color:#4499ff">' +
'<strong>' + name + '</strong><br>' + '<strong>' + name + '</strong><br>' +
'MMSI: ' + (s.mmsi || '?') + '<br>' + 'MMSI: ' + (s.mmsi || '?') + '<br>' +
'SOG: ' + sog.toFixed(1) + ' kn<br>' + 'SOG: ' + sog.toFixed(1) + ' kn<br>' +
'COG: ' + Math.round(s.cog || 0) + '°<br>' + 'COG: ' + Math.round(s.cog || 0) + '&deg;' +
'HDG: ' + (s.heading || '?') + '°' +
'</div>', '</div>',
}); });
}); });
if (statusEl) { statusEl.textContent = ships.length.toLocaleString('de-DE') + ' Schiffe'; }
}) })
.catch(function(e) { console.warn('Ships fetch error:', e); if (statusEl) { statusEl.textContent = 'Fehler beim Laden'; } }) .catch(function(e) { console.warn('Ships 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); }); .finally(function() { if (loadEl) loadEl.classList.remove('active'); setTimeout(function() { if (statusEl) statusEl.classList.remove('active'); }, 5000); });
}, },
}; };