Flights+Ships: PointPrimitiveCollection statt Entity API

Entity API (6.500+ Objekte mit Point+Label+Description) war zu schwer.
PointPrimitiveCollection ist WebGL/GPU-beschleunigt im CLIENT-Browser
und kann hunderttausende Punkte fluessig darstellen.

Klick-Details ueber ScreenSpaceEventHandler mit naechstem-Punkt-Suche.
Kein Server-GPU noetig — alles rendert im Browser des Users.

static/js/layers/flights.js

@@ -1,32 +1,67 @@
 /**
- * Flugverkehr-Layer: Grüne Punkte auf dem 3D-Globus.
+ * Flugverkehr-Layer: GPU-beschleunigte Punkt-Primitive.
  */
 const FlightsLayer = {
     _viewer: null,
-    _dataSource: null,
+    _points: null,
     _interval: null,
     _count: 0,
+    _data: [],
 
     start(viewer) {
-        if (this._dataSource) return;
+        if (this._points) return;
         this._viewer = viewer;
-        this._dataSource = new Cesium.CustomDataSource('flights');
+        this._points = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
-        this._dataSource.clustering.enabled = true;
-        this._dataSource.clustering.pixelRange = 30;
-        this._dataSource.clustering.minimumClusterSize = 5;
-        viewer.dataSources.add(this._dataSource);
         this._fetch();
         var self = this;
         this._interval = setInterval(function() { self._fetch(); }, 30000);
+
+        // Klick-Handler fuer Flugzeug-Details
+        this._handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+        this._handler.setInputAction(function(click) {
+            self._onClick(click.position);
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     },
 
     stop() {
         if (this._interval) { clearInterval(this._interval); this._interval = null; }
-        if (this._dataSource && this._viewer) {
+        if (this._points && this._viewer) {
-            this._viewer.dataSources.remove(this._dataSource);
+            this._viewer.scene.primitives.remove(this._points);
-            this._dataSource = null;
+            this._points = null;
         }
+        if (this._handler) { this._handler.destroy(); this._handler = null; }
         this._count = 0;
+        this._data = [];
+    },
+
+    _onClick(position) {
+        if (!this._viewer || !this._data.length) return;
+        var picked = this._viewer.scene.pick(position);
+        if (!picked || !picked.primitive || picked.primitive.constructor.name !== 'PointPrimitive') return;
+        // Finde naechsten Flug zur Klickposition
+        var cartesian = this._viewer.scene.pickPosition(position);
+        if (!cartesian) return;
+        var carto = Cesium.Cartographic.fromCartesian(cartesian);
+        var clickLat = Cesium.Math.toDegrees(carto.latitude);
+        var clickLon = Cesium.Math.toDegrees(carto.longitude);
+        var best = null, bestDist = 999;
+        for (var i = 0; i < this._data.length; i++) {
+            var a = this._data[i];
+            var d = Math.abs(a.lat - clickLat) + Math.abs(a.lon - clickLon);
+            if (d < bestDist) { bestDist = d; best = a; }
+        }
+        if (best && bestDist < 2) {
+            var cs = (best.flight || best.hex || '?').trim();
+            var html = '<strong style="color:#00ff88">' + cs + '</strong><br>' +
+                'ALT: ' + (best.alt_baro || '?') + ' ft<br>' +
+                'SPD: ' + (best.gs || '?') + ' kts<br>' +
+                'HDG: ' + Math.round(best.track || 0) + '&deg;' +
+                (best.origin ? '<br>FROM: ' + best.origin : '');
+            this._viewer.selectedEntity = new Cesium.Entity({
+                name: cs,
+                description: '<div style="font-family:monospace;font-size:13px;color:#00ff88;padding:8px">' + html + '</div>',
+            });
+        }
     },
 
     _fetch() {
@@ -38,48 +73,25 @@ const FlightsLayer = {
         fetch('/api/flights')
         .then(function(r) { return r.json(); })
         .then(function(data) {
-            if (!self._dataSource) return;
+            if (!self._points) return;
-            self._dataSource.entities.removeAll();
+            self._points.removeAll();
             var ac = data.ac || [];
+            self._data = ac;
             self._count = ac.length;
-            ac.forEach(function(a) {
+            var green = Cesium.Color.fromCssColorString('#00ff88');
-                if (!a.lat || !a.lon) return;
+            for (var i = 0; i < ac.length; i++) {
-                // alt_baro ist in ft vom Backend, konvertiere zu m fuer Cesium
+                var a = ac[i];
-                var altFt = a.alt_baro || 30000;
+                if (!a.lat || !a.lon) continue;
-                var altM = altFt * 0.3048;
+                var altM = (a.alt_baro || 10000) * 0.3048;
-                var cs = (a.flight || a.hex || '').trim() || '?';
+                self._points.add({
-                self._dataSource.entities.add({
                     position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, altM),
-                    point: {
+                    pixelSize: 3.0,
-                        pixelSize: 3,
+                    color: green,
-                        color: Cesium.Color.fromCssColorString('#00ff88'),
-                        outlineColor: Cesium.Color.fromCssColorString('#003311'),
-                        outlineWidth: 1,
-                        heightReference: Cesium.HeightReference.NONE,
-                    },
-                    label: {
-                        text: cs,
-                        font: '10px monospace',
-                        fillColor: Cesium.Color.fromCssColorString('#00ff88').withAlpha(0.7),
-                        outlineColor: Cesium.Color.BLACK,
-                        outlineWidth: 2,
-                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-                        pixelOffset: new Cesium.Cartesian2(6, -3),
-                        scale: 0.7,
-                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 800000),
-                    },
-                    description: '<div style="font-family:monospace;font-size:12px;color:#00ff88">' +
-                        '<strong>' + cs + '</strong><br>' +
-                        'ALT: ' + altFt + ' ft<br>' +
-                        'SPD: ' + (a.gs || '?') + ' kts<br>' +
-                        'HDG: ' + Math.round(a.track || 0) + '&deg;' +
-                        (a.origin ? '<br>FROM: ' + a.origin : '') +
-                        '</div>',
                 });
-            });
+            }
-            if (statusEl) { statusEl.textContent = ac.length.toLocaleString('de-DE') + ' Flugzeuge'; }
+            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 error:', e); if (statusEl) statusEl.textContent = 'Fehler'; })
         .finally(function() { if (loadEl) loadEl.classList.remove('active'); setTimeout(function() { if (statusEl) statusEl.classList.remove('active'); }, 5000); });
     },
 };

static/js/layers/ships.js

@@ -1,32 +1,64 @@
 /**
- * Schiffsverkehr-Layer: Blaue Punkte auf Meereshöhe.
+ * Schiffsverkehr-Layer: GPU-beschleunigte Punkt-Primitive.
  */
 const ShipsLayer = {
     _viewer: null,
-    _dataSource: null,
+    _points: null,
     _interval: null,
     _count: 0,
+    _data: [],
 
     start(viewer) {
-        if (this._dataSource) return;
+        if (this._points) return;
         this._viewer = viewer;
-        this._dataSource = new Cesium.CustomDataSource('ships');
+        this._points = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
-        this._dataSource.clustering.enabled = true;
-        this._dataSource.clustering.pixelRange = 25;
-        this._dataSource.clustering.minimumClusterSize = 5;
-        viewer.dataSources.add(this._dataSource);
         this._fetch();
         var self = this;
         this._interval = setInterval(function() { self._fetch(); }, 60000);
+
+        this._handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+        this._handler.setInputAction(function(click) {
+            self._onClick(click.position);
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     },
 
     stop() {
         if (this._interval) { clearInterval(this._interval); this._interval = null; }
-        if (this._dataSource && this._viewer) {
+        if (this._points && this._viewer) {
-            this._viewer.dataSources.remove(this._dataSource);
+            this._viewer.scene.primitives.remove(this._points);
-            this._dataSource = null;
+            this._points = null;
         }
+        if (this._handler) { this._handler.destroy(); this._handler = null; }
         this._count = 0;
+        this._data = [];
+    },
+
+    _onClick(position) {
+        if (!this._viewer || !this._data.length) return;
+        var picked = this._viewer.scene.pick(position);
+        if (!picked || !picked.primitive || picked.primitive.constructor.name !== 'PointPrimitive') return;
+        var cartesian = this._viewer.scene.pickPosition(position);
+        if (!cartesian) return;
+        var carto = Cesium.Cartographic.fromCartesian(cartesian);
+        var clickLat = Cesium.Math.toDegrees(carto.latitude);
+        var clickLon = Cesium.Math.toDegrees(carto.longitude);
+        var best = null, bestDist = 999;
+        for (var i = 0; i < this._data.length; i++) {
+            var s = this._data[i];
+            var d = Math.abs(s.lat - clickLat) + Math.abs(s.lon - clickLon);
+            if (d < bestDist) { bestDist = d; best = s; }
+        }
+        if (best && bestDist < 1) {
+            var name = best.name || ('MMSI ' + (best.mmsi || '?'));
+            var html = '<strong style="color:#4499ff">' + name + '</strong><br>' +
+                'MMSI: ' + (best.mmsi || '?') + '<br>' +
+                'SOG: ' + (best.sog || 0).toFixed(1) + ' kn<br>' +
+                'COG: ' + Math.round(best.cog || 0) + '&deg;';
+            this._viewer.selectedEntity = new Cesium.Entity({
+                name: name,
+                description: '<div style="font-family:monospace;font-size:13px;color:#4499ff;padding:8px">' + html + '</div>',
+            });
+        }
     },
 
     _fetch() {
@@ -38,48 +70,25 @@ const ShipsLayer = {
         fetch('/api/ships')
         .then(function(r) { return r.json(); })
         .then(function(data) {
-            if (!self._dataSource) return;
+            if (!self._points) return;
-            self._dataSource.entities.removeAll();
+            self._points.removeAll();
             var ships = data.ships || [];
+            self._data = ships;
             self._count = ships.length;
-            ships.forEach(function(s) {
+            var blue = Cesium.Color.fromCssColorString('#4499ff');
-                if (!s.lat || !s.lon) return;
+            var gray = Cesium.Color.fromCssColorString('#445577');
-                var name = s.name || ('MMSI ' + (s.mmsi || '?'));
+            for (var i = 0; i < ships.length; i++) {
-                var sog = s.sog || 0;
+                var s = ships[i];
-                var color = sog > 0.5
+                if (!s.lat || !s.lon) continue;
-                    ? Cesium.Color.fromCssColorString('#4499ff')
+                self._points.add({
-                    : Cesium.Color.fromCssColorString('#445577');
-                self._dataSource.entities.add({
                     position: Cesium.Cartesian3.fromDegrees(s.lon, s.lat, 0),
-                    point: {
+                    pixelSize: 2.5,
-                        pixelSize: 3,
+                    color: (s.sog || 0) > 0.5 ? blue : gray,
-                        color: color,
-                        outlineColor: Cesium.Color.fromCssColorString('#112233'),
-                        outlineWidth: 0.5,
-                        heightReference: Cesium.HeightReference.NONE,
-                    },
-                    label: {
-                        text: name,
-                        font: '9px monospace',
-                        fillColor: Cesium.Color.fromCssColorString('#4499ff').withAlpha(0.6),
-                        outlineColor: Cesium.Color.BLACK,
-                        outlineWidth: 2,
-                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-                        pixelOffset: new Cesium.Cartesian2(5, -2),
-                        scale: 0.6,
-                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 300000),
-                    },
-                    description: '<div style="font-family:monospace;font-size:12px;color:#4499ff">' +
-                        '<strong>' + name + '</strong><br>' +
-                        'MMSI: ' + (s.mmsi || '?') + '<br>' +
-                        'SOG: ' + sog.toFixed(1) + ' kn<br>' +
-                        'COG: ' + Math.round(s.cog || 0) + '&deg;' +
-                        '</div>',
                 });
-            });
+            }
-            if (statusEl) { statusEl.textContent = ships.length.toLocaleString('de-DE') + ' Schiffe'; }
+            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 error:', e); if (statusEl) statusEl.textContent = 'Fehler'; })
         .finally(function() { if (loadEl) loadEl.classList.remove('active'); setTimeout(function() { if (statusEl) statusEl.classList.remove('active'); }, 5000); });
     },
 };