Zoom-adaptive Darstellung: Cluster bei Uebersicht, Details bei Zoom

Flugverkehr + Schiffsverkehr:
- Weit (>5.000km): 5-Grad-Raster-Cluster mit Anzahl-Labels
- Mittel (1.000-5.000km): 2-Grad-Raster-Cluster
- Nah (<1.000km): Einzelne Punkte, Klick zeigt Details

Cluster: Punktgroesse proportional zu sqrt(Anzahl), weisses Count-Label.
Klick auf Cluster zoomt rein. Klick auf Einzelpunkt zeigt Info.
Kamera-Listener reagiert auf Zoom-Aenderungen (20% Schwelle).

static/js/layers/flights.js

@@ -1,22 +1,35 @@
 /**
- * Flugverkehr-Layer: GPU-beschleunigte Punkt-Primitive.
+ * Flugverkehr-Layer: Zoom-adaptive Darstellung.
+ * Weit: Cluster-Punkte mit Anzahl. Nah: Einzelne Flugzeuge.
  */
 const FlightsLayer = {
     _viewer: null,
     _points: null,
+    _labels: null,
     _interval: null,
     _count: 0,
     _data: [],
+    _lastZoomLevel: null,
+    _cameraListener: null,
+    _handler: null,
 
     start(viewer) {
         if (this._points) return;
         this._viewer = viewer;
         this._points = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
+        this._labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
         this._fetch();
         var self = this;
         this._interval = setInterval(function() { self._fetch(); }, 30000);
 
-        // Klick-Handler fuer Flugzeug-Details
+        // Zoom-Listener: bei Kamerabewegung neu rendern
+        this._cameraListener = function() {
+            self._renderForZoom();
+        };
+        viewer.camera.changed.addEventListener(this._cameraListener);
+        viewer.camera.percentageChanged = 0.2;
+
+        // Klick-Handler
         this._handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
         this._handler.setInputAction(function(click) {
             self._onClick(click.position);
@@ -25,41 +38,148 @@ const FlightsLayer = {
 
     stop() {
         if (this._interval) { clearInterval(this._interval); this._interval = null; }
-        if (this._points && this._viewer) {
+        if (this._cameraListener && this._viewer) {
-            this._viewer.scene.primitives.remove(this._points);
+            this._viewer.camera.changed.removeEventListener(this._cameraListener);
-            this._points = null;
+            this._cameraListener = null;
         }
         if (this._handler) { this._handler.destroy(); this._handler = null; }
+        if (this._points && this._viewer) { this._viewer.scene.primitives.remove(this._points); this._points = null; }
+        if (this._labels && this._viewer) { this._viewer.scene.primitives.remove(this._labels); this._labels = null; }
         this._count = 0;
         this._data = [];
+        this._lastZoomLevel = null;
+    },
+
+    _getZoomLevel() {
+        var alt = this._viewer.camera.positionCartographic.height;
+        if (alt > 5000000) return 'far';      // > 5.000 km
+        if (alt > 1000000) return 'medium';    // 1.000 - 5.000 km
+        return 'close';                         // < 1.000 km
+    },
+
+    _renderForZoom() {
+        var level = this._getZoomLevel();
+        if (level === this._lastZoomLevel) return;
+        this._lastZoomLevel = level;
+        this._render();
+    },
+
+    _render() {
+        if (!this._points || !this._data.length) return;
+        this._points.removeAll();
+        this._labels.removeAll();
+        var level = this._getZoomLevel();
+
+        if (level === 'far') {
+            this._renderClustered(5);  // 5-Grad-Raster
+        } else if (level === 'medium') {
+            this._renderClustered(2);  // 2-Grad-Raster
+        } else {
+            this._renderIndividual();
+        }
+    },
+
+    _renderClustered(gridSize) {
+        var clusters = {};
+        var green = Cesium.Color.fromCssColorString('#00ff88');
+
+        for (var i = 0; i < this._data.length; i++) {
+            var a = this._data[i];
+            if (!a.lat || !a.lon) continue;
+            var key = Math.round(a.lat / gridSize) + ',' + Math.round(a.lon / gridSize);
+            if (!clusters[key]) {
+                clusters[key] = { lat: 0, lon: 0, count: 0, sumLat: 0, sumLon: 0 };
+            }
+            clusters[key].count++;
+            clusters[key].sumLat += a.lat;
+            clusters[key].sumLon += a.lon;
+        }
+
+        var keys = Object.keys(clusters);
+        for (var j = 0; j < keys.length; j++) {
+            var c = clusters[keys[j]];
+            var avgLat = c.sumLat / c.count;
+            var avgLon = c.sumLon / c.count;
+            var size = Math.min(Math.max(Math.sqrt(c.count) * 1.5, 4), 20);
+
+            this._points.add({
+                position: Cesium.Cartesian3.fromDegrees(avgLon, avgLat, 50000),
+                pixelSize: size,
+                color: green,
+                outlineColor: Cesium.Color.fromCssColorString('#003311'),
+                outlineWidth: 1,
+            });
+
+            if (c.count > 1) {
+                this._labels.add({
+                    position: Cesium.Cartesian3.fromDegrees(avgLon, avgLat, 50000),
+                    text: c.count.toString(),
+                    font: '11px sans-serif',
+                    fillColor: Cesium.Color.WHITE,
+                    outlineColor: Cesium.Color.BLACK,
+                    outlineWidth: 3,
+                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                    pixelOffset: new Cesium.Cartesian2(0, -size - 4),
+                    scale: 0.9,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                });
+            }
+        }
+    },
+
+    _renderIndividual() {
+        var green = Cesium.Color.fromCssColorString('#00ff88');
+        for (var i = 0; i < this._data.length; i++) {
+            var a = this._data[i];
+            if (!a.lat || !a.lon) continue;
+            var altM = (a.alt_baro || 10000) * 0.3048;
+            this._points.add({
+                position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, altM),
+                pixelSize: 3,
+                color: green,
+            });
+        }
     },
 
     _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) {
+            var ray = this._viewer.scene.camera.getPickRay(position);
+            cartesian = this._viewer.scene.globe.pick(ray, this._viewer.scene);
+        }
         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 level = this._getZoomLevel();
-            var a = this._data[i];
+
-            var d = Math.abs(a.lat - clickLat) + Math.abs(a.lon - clickLon);
+        if (level === 'close') {
-            if (d < bestDist) { bestDist = d; best = a; }
+            // Naechstes Flugzeug finden
-        }
+            var best = null, bestDist = 999;
-        if (best && bestDist < 2) {
+            for (var i = 0; i < this._data.length; i++) {
-            var cs = (best.flight || best.hex || '?').trim();
+                var a = this._data[i];
-            var html = '<strong style="color:#00ff88">' + cs + '</strong><br>' +
+                var d = Math.abs(a.lat - clickLat) + Math.abs(a.lon - clickLon);
-                'ALT: ' + (best.alt_baro || '?') + ' ft<br>' +
+                if (d < bestDist) { bestDist = d; best = a; }
-                'SPD: ' + (best.gs || '?') + ' kts<br>' +
+            }
-                'HDG: ' + Math.round(best.track || 0) + '&deg;' +
+            if (best && bestDist < 1) {
-                (best.origin ? '<br>FROM: ' + best.origin : '');
+                var cs = (best.flight || best.hex || '?').trim();
-            this._viewer.selectedEntity = new Cesium.Entity({
+                this._viewer.selectedEntity = new Cesium.Entity({
-                name: cs,
+                    name: cs,
-                description: '<div style="font-family:monospace;font-size:13px;color:#00ff88;padding:8px">' + html + '</div>',
+                    description: '<div style="font-family:monospace;font-size:13px;color:#00ff88;padding:8px">' +
+                        '<strong>' + 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 : '') + '</div>',
+                });
+            }
+        } else {
+            // Cluster: Reinzoomen auf Klickposition
+            this._viewer.camera.flyTo({
+                destination: Cesium.Cartesian3.fromDegrees(clickLon, clickLat, level === 'far' ? 2000000 : 500000),
+                duration: 1.0,
             });
         }
     },
@@ -74,22 +194,11 @@ const FlightsLayer = {
         .then(function(r) { return r.json(); })
         .then(function(data) {
             if (!self._points) return;
-            self._points.removeAll();
+            self._data = data.ac || [];
-            var ac = data.ac || [];
+            self._count = self._data.length;
-            self._data = ac;
+            self._lastZoomLevel = null; // Force re-render
-            self._count = ac.length;
+            self._render();
-            var green = Cesium.Color.fromCssColorString('#00ff88');
+            if (statusEl) statusEl.textContent = self._count.toLocaleString('de-DE') + ' Flugzeuge';
-            for (var i = 0; i < ac.length; i++) {
-                var a = ac[i];
-                if (!a.lat || !a.lon) continue;
-                var altM = (a.alt_baro || 10000) * 0.3048;
-                self._points.add({
-                    position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, altM),
-                    pixelSize: 3.0,
-                    color: green,
-                });
-            }
-            if (statusEl) statusEl.textContent = ac.length.toLocaleString('de-DE') + ' Flugzeuge';
         })
         .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,63 +1,142 @@
 /**
- * Schiffsverkehr-Layer: GPU-beschleunigte Punkt-Primitive.
+ * Schiffsverkehr-Layer: Zoom-adaptive Darstellung.
  */
 const ShipsLayer = {
     _viewer: null,
     _points: null,
+    _labels: null,
     _interval: null,
     _count: 0,
     _data: [],
+    _lastZoomLevel: null,
+    _cameraListener: null,
+    _handler: null,
 
     start(viewer) {
         if (this._points) return;
         this._viewer = viewer;
         this._points = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
+        this._labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
         this._fetch();
         var self = this;
         this._interval = setInterval(function() { self._fetch(); }, 60000);
 
+        this._cameraListener = function() { self._renderForZoom(); };
+        viewer.camera.changed.addEventListener(this._cameraListener);
+
         this._handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
-        this._handler.setInputAction(function(click) {
+        this._handler.setInputAction(function(click) { self._onClick(click.position); }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-            self._onClick(click.position);
-        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     },
 
     stop() {
         if (this._interval) { clearInterval(this._interval); this._interval = null; }
-        if (this._points && this._viewer) {
+        if (this._cameraListener && this._viewer) { this._viewer.camera.changed.removeEventListener(this._cameraListener); this._cameraListener = null; }
-            this._viewer.scene.primitives.remove(this._points);
-            this._points = null;
-        }
         if (this._handler) { this._handler.destroy(); this._handler = null; }
-        this._count = 0;
+        if (this._points && this._viewer) { this._viewer.scene.primitives.remove(this._points); this._points = null; }
-        this._data = [];
+        if (this._labels && this._viewer) { this._viewer.scene.primitives.remove(this._labels); this._labels = null; }
+        this._count = 0; this._data = []; this._lastZoomLevel = null;
+    },
+
+    _getZoomLevel() {
+        var alt = this._viewer.camera.positionCartographic.height;
+        if (alt > 5000000) return 'far';
+        if (alt > 1000000) return 'medium';
+        return 'close';
+    },
+
+    _renderForZoom() {
+        var level = this._getZoomLevel();
+        if (level === this._lastZoomLevel) return;
+        this._lastZoomLevel = level;
+        this._render();
+    },
+
+    _render() {
+        if (!this._points || !this._data.length) return;
+        this._points.removeAll();
+        this._labels.removeAll();
+        var level = this._getZoomLevel();
+        if (level === 'far') { this._renderClustered(5); }
+        else if (level === 'medium') { this._renderClustered(2); }
+        else { this._renderIndividual(); }
+    },
+
+    _renderClustered(gridSize) {
+        var clusters = {};
+        var blue = Cesium.Color.fromCssColorString('#4499ff');
+        for (var i = 0; i < this._data.length; i++) {
+            var s = this._data[i];
+            if (!s.lat || !s.lon) continue;
+            var key = Math.round(s.lat / gridSize) + ',' + Math.round(s.lon / gridSize);
+            if (!clusters[key]) { clusters[key] = { count: 0, sumLat: 0, sumLon: 0 }; }
+            clusters[key].count++;
+            clusters[key].sumLat += s.lat;
+            clusters[key].sumLon += s.lon;
+        }
+        var keys = Object.keys(clusters);
+        for (var j = 0; j < keys.length; j++) {
+            var c = clusters[keys[j]];
+            var avgLat = c.sumLat / c.count;
+            var avgLon = c.sumLon / c.count;
+            var size = Math.min(Math.max(Math.sqrt(c.count) * 1.2, 3), 16);
+            this._points.add({
+                position: Cesium.Cartesian3.fromDegrees(avgLon, avgLat, 0),
+                pixelSize: size, color: blue,
+                outlineColor: Cesium.Color.fromCssColorString('#112244'), outlineWidth: 1,
+            });
+            if (c.count > 1) {
+                this._labels.add({
+                    position: Cesium.Cartesian3.fromDegrees(avgLon, avgLat, 0),
+                    text: c.count.toString(), font: '10px sans-serif',
+                    fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, outlineWidth: 3,
+                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                    pixelOffset: new Cesium.Cartesian2(0, -size - 3), scale: 0.8,
+                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                });
+            }
+        }
+    },
+
+    _renderIndividual() {
+        var blue = Cesium.Color.fromCssColorString('#4499ff');
+        var gray = Cesium.Color.fromCssColorString('#445577');
+        for (var i = 0; i < this._data.length; i++) {
+            var s = this._data[i];
+            if (!s.lat || !s.lon) continue;
+            this._points.add({
+                position: Cesium.Cartesian3.fromDegrees(s.lon, s.lat, 0),
+                pixelSize: 2.5, color: (s.sog || 0) > 0.5 ? blue : gray,
+            });
+        }
     },
 
     _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) { var ray = this._viewer.scene.camera.getPickRay(position); cartesian = this._viewer.scene.globe.pick(ray, this._viewer.scene); }
         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;
+        var level = this._getZoomLevel();
-        for (var i = 0; i < this._data.length; i++) {
+        if (level === 'close') {
-            var s = this._data[i];
+            var best = null, bestDist = 999;
-            var d = Math.abs(s.lat - clickLat) + Math.abs(s.lon - clickLon);
+            for (var i = 0; i < this._data.length; i++) {
-            if (d < bestDist) { bestDist = d; best = s; }
+                var s = this._data[i];
-        }
+                var d = Math.abs(s.lat - clickLat) + Math.abs(s.lon - clickLon);
-        if (best && bestDist < 1) {
+                if (d < bestDist) { bestDist = d; best = s; }
-            var name = best.name || ('MMSI ' + (best.mmsi || '?'));
+            }
-            var html = '<strong style="color:#4499ff">' + name + '</strong><br>' +
+            if (best && bestDist < 0.5) {
-                'MMSI: ' + (best.mmsi || '?') + '<br>' +
+                var name = best.name || ('MMSI ' + (best.mmsi || '?'));
-                'SOG: ' + (best.sog || 0).toFixed(1) + ' kn<br>' +
+                this._viewer.selectedEntity = new Cesium.Entity({
-                'COG: ' + Math.round(best.cog || 0) + '&deg;';
+                    name: name,
-            this._viewer.selectedEntity = new Cesium.Entity({
+                    description: '<div style="font-family:monospace;font-size:13px;color:#4499ff;padding:8px">' +
-                name: name,
+                        '<strong>' + name + '</strong><br>MMSI: ' + (best.mmsi || '?') +
-                description: '<div style="font-family:monospace;font-size:13px;color:#4499ff;padding:8px">' + html + '</div>',
+                        '<br>SOG: ' + (best.sog || 0).toFixed(1) + ' kn<br>COG: ' + Math.round(best.cog || 0) + '&deg;</div>',
-            });
+                });
+            }
+        } else {
+            this._viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(clickLon, clickLat, level === 'far' ? 2000000 : 500000), duration: 1.0 });
         }
     },
 
@@ -71,22 +150,11 @@ const ShipsLayer = {
         .then(function(r) { return r.json(); })
         .then(function(data) {
             if (!self._points) return;
-            self._points.removeAll();
+            self._data = data.ships || [];
-            var ships = data.ships || [];
+            self._count = self._data.length;
-            self._data = ships;
+            self._lastZoomLevel = null;
-            self._count = ships.length;
+            self._render();
-            var blue = Cesium.Color.fromCssColorString('#4499ff');
+            if (statusEl) statusEl.textContent = self._count.toLocaleString('de-DE') + ' Schiffe';
-            var gray = Cesium.Color.fromCssColorString('#445577');
-            for (var i = 0; i < ships.length; i++) {
-                var s = ships[i];
-                if (!s.lat || !s.lon) continue;
-                self._points.add({
-                    position: Cesium.Cartesian3.fromDegrees(s.lon, s.lat, 0),
-                    pixelSize: 2.5,
-                    color: (s.sog || 0) > 0.5 ? blue : gray,
-                });
-            }
-            if (statusEl) statusEl.textContent = ships.length.toLocaleString('de-DE') + ' Schiffe';
         })
         .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); });