AegisSight-Globe/static/js/layers/flights.js

/**
 * 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);

        // 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);
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },

    stop() {
        if (this._interval) { clearInterval(this._interval); this._interval = null; }
        if (this._cameraListener && this._viewer) {
            this._viewer.camera.changed.removeEventListener(this._cameraListener);
            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) * 3, 8), 30);

            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: '13px sans-serif bold',
                    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 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 level = this._getZoomLevel();

        if (level === 'close') {
            // Naechstes Flugzeug finden
            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 < 1) {
                var cs = (best.flight || best.hex || '?').trim();
                this._viewer.trackedEntity = undefined;
                this._viewer.selectedEntity = new Cesium.Entity({
                    name: cs,
                    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" ? 4000000 : 1500000),
                duration: 1.0,
            });
        }
    },

    _fetch() {
        var self = this;
        var loadEl = document.getElementById('loading-flights');
        var statusEl = document.getElementById('status-flights');
        if (loadEl) loadEl.classList.add('active');
        if (statusEl) { statusEl.textContent = 'Lade Daten...'; statusEl.classList.add('active'); }
        fetch('/api/flights')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (!self._points) return;
            self._data = data.ac || [];
            self._count = self._data.length;
            self._lastZoomLevel = null; // Force re-render
            self._render();
            if (statusEl) statusEl.textContent = self._count.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); });
    },
};