AegisSight Globe: Initiales Release

Eigenstaendige GEOINT-Anwendung mit CesiumJS 3D-Globus.
Echtzeit-Datenlayer: Flugverkehr (airplanes.live, 64 Stuetzpunkte),
Schiffsverkehr (AISStream.io WebSocket), Erdbeben (USGS),
Nachrichten (GDELT GEO). FastAPI Backend, taktisches Dark-UI.

static/js/app.js

@@ -0,0 +1,124 @@
+/**
+ * AegisSight Globe — Haupt-App: CesiumJS Viewer, Layer-Management, UI.
+ */
+const Globe = {
+    viewer: null,
+    layers: {},
+    _statsInterval: null,
+
+    init() {
+        // Cesium Ion Token
+        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyZTRlZTk4ZC01YjBjLTQ0Y2EtYjdlYi1kNDAwYTIwZjA3YjkiLCJpZCI6NDA4MzI4LCJpYXQiOjE3NzQzNDcyMzR9.eXzrtBDzNsBCbvUHu_Hc-A5gTcBDkspS7IrPDbc5y8M';
+
+        // Viewer erstellen
+        this.viewer = new Cesium.Viewer('cesiumContainer', {
+            terrain: Cesium.Terrain.fromWorldTerrain(),
+            animation: false,
+            timeline: false,
+            fullscreenButton: false,
+            geocoder: false,
+            homeButton: false,
+            infoBox: true,
+            selectionIndicator: true,
+            navigationHelpButton: false,
+            sceneModePicker: false,
+            baseLayerPicker: false,
+            skyBox: new Cesium.SkyBox({
+                sources: {
+                    positiveX: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_px.jpg'),
+                    negativeX: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_mx.jpg'),
+                    positiveY: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_py.jpg'),
+                    negativeY: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_my.jpg'),
+                    positiveZ: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_pz.jpg'),
+                    negativeZ: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_mz.jpg'),
+                }
+            }),
+        });
+
+        // Atmosphere und Beleuchtung
+        this.viewer.scene.globe.enableLighting = true;
+        this.viewer.scene.fog.enabled = true;
+        this.viewer.scene.globe.showGroundAtmosphere = true;
+        this.viewer.clock.shouldAnimate = true;
+
+        // Kamera auf Europa
+        this.viewer.camera.flyTo({
+            destination: Cesium.Cartesian3.fromDegrees(10.0, 48.0, 8000000),
+            duration: 0,
+        });
+
+        // Koordinaten-Anzeige bei Mausbewegung
+        var coordsEl = document.getElementById('coords-display');
+        var scene = this.viewer.scene;
+        var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+        handler.setInputAction(function(movement) {
+            var cartesian = scene.pickPosition(movement.endPosition);
+            if (!cartesian) {
+                var ray = scene.camera.getPickRay(movement.endPosition);
+                cartesian = scene.globe.pick(ray, scene);
+            }
+            if (cartesian) {
+                var carto = Cesium.Cartographic.fromCartesian(cartesian);
+                var lat = Cesium.Math.toDegrees(carto.latitude).toFixed(4);
+                var lon = Cesium.Math.toDegrees(carto.longitude).toFixed(4);
+                coordsEl.textContent = 'LAT: ' + lat + '  LON: ' + lon;
+            }
+        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+        // Layer Checkboxen
+        this._setupLayerToggles();
+
+        // Fullscreen
+        document.getElementById('btn-fullscreen').addEventListener('click', function() {
+            if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); }
+            else { document.exitFullscreen(); }
+        });
+
+        // Stats Update
+        this._statsInterval = setInterval(function() { Globe._updateStats(); }, 5000);
+
+        // Layer starten (die mit checked)
+        if (typeof FlightsLayer !== 'undefined') FlightsLayer.start(this.viewer);
+        if (typeof ShipsLayer !== 'undefined') ShipsLayer.start(this.viewer);
+
+        document.getElementById('bottom-stats').textContent = 'Globe initialisiert — Lade Daten...';
+    },
+
+    _setupLayerToggles() {
+        var toggles = {
+            'layer-flights': function(on) { on ? FlightsLayer.start(Globe.viewer) : FlightsLayer.stop(); },
+            'layer-ships': function(on) { on ? ShipsLayer.start(Globe.viewer) : ShipsLayer.stop(); },
+            'layer-quakes': function(on) { on ? QuakesLayer.start(Globe.viewer) : QuakesLayer.stop(); },
+            'layer-gdelt': function(on) { on ? GdeltLayer.start(Globe.viewer) : GdeltLayer.stop(); },
+            'layer-daynight': function(on) { Globe.viewer.scene.globe.enableLighting = on; },
+            'layer-labels': function(on) { /* Phase 2 */ },
+        };
+        Object.keys(toggles).forEach(function(id) {
+            var cb = document.getElementById(id);
+            if (cb) cb.addEventListener('change', function() { toggles[id](this.checked); });
+        });
+    },
+
+    _updateStats() {
+        var parts = [];
+        if (typeof FlightsLayer !== 'undefined' && FlightsLayer._count > 0) {
+            parts.push(FlightsLayer._count.toLocaleString('de-DE') + ' Flugzeuge');
+            document.getElementById('count-flights').textContent = FlightsLayer._count.toLocaleString('de-DE');
+        }
+        if (typeof ShipsLayer !== 'undefined' && ShipsLayer._count > 0) {
+            parts.push(ShipsLayer._count.toLocaleString('de-DE') + ' Schiffe');
+            document.getElementById('count-ships').textContent = ShipsLayer._count.toLocaleString('de-DE');
+        }
+        if (typeof QuakesLayer !== 'undefined' && QuakesLayer._count > 0) {
+            document.getElementById('count-quakes').textContent = QuakesLayer._count.toLocaleString('de-DE');
+        }
+        if (typeof GdeltLayer !== 'undefined' && GdeltLayer._count > 0) {
+            document.getElementById('count-gdelt').textContent = GdeltLayer._count.toLocaleString('de-DE');
+        }
+        if (parts.length) {
+            document.getElementById('bottom-stats').textContent = parts.join('  |  ');
+        }
+    },
+};
+
+document.addEventListener('DOMContentLoaded', function() { Globe.init(); });

static/js/layers/flights.js

@@ -0,0 +1,79 @@
+/**
+ * Flugverkehr-Layer: Grüne Punkte mit Höhenprofil auf dem 3D-Globus.
+ */
+const FlightsLayer = {
+    _viewer: null,
+    _dataSource: null,
+    _interval: null,
+    _count: 0,
+
+    start(viewer) {
+        if (this._dataSource) return;
+        this._viewer = viewer;
+        this._dataSource = new Cesium.CustomDataSource('flights');
+        viewer.dataSources.add(this._dataSource);
+        this._fetch();
+        var self = this;
+        this._interval = setInterval(function() { self._fetch(); }, 30000);
+    },
+
+    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;
+        fetch('/api/flights')
+        .then(function(r) { return r.json(); })
+        .then(function(data) {
+            if (!self._dataSource) return;
+            self._dataSource.entities.removeAll();
+            var ac = data.ac || [];
+            self._count = ac.length;
+            ac.forEach(function(a) {
+                if (!a.lat || !a.lon) return;
+                var alt = (a.alt_baro || a.alt_geom || 10000) * 0.3048; // ft -> m
+                if (alt < 100) alt = 10000; // ground = default
+                var cs = (a.flight || a.callsign || a.hex || '???').trim();
+                var spd = a.gs || 0;
+                self._dataSource.entities.add({
+                    position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, alt),
+                    point: {
+                        pixelSize: 4,
+                        color: Cesium.Color.fromCssColorString('#00ff88'),
+                        outlineColor: Cesium.Color.fromCssColorString('#004422'),
+                        outlineWidth: 1,
+                        heightReference: Cesium.HeightReference.NONE,
+                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                    },
+                    label: {
+                        text: cs,
+                        font: '10px monospace',
+                        fillColor: Cesium.Color.fromCssColorString('#00ff88').withAlpha(0.8),
+                        outlineColor: Cesium.Color.BLACK,
+                        outlineWidth: 2,
+                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                        pixelOffset: new Cesium.Cartesian2(8, -4),
+                        scale: 0.8,
+                        showBackground: false,
+                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000),
+                    },
+                    description: '<div style="font-family:monospace;font-size:12px;color:#00ff88">' +
+                        '<strong>' + cs + '</strong><br>' +
+                        'ALT: ' + (a.alt_baro || '?') + ' ft<br>' +
+                        'SPD: ' + Math.round(spd) + ' kts<br>' +
+                        'HDG: ' + Math.round(a.track || 0) + '°' +
+                        (a.t ? '<br>TYP: ' + a.t : '') +
+                        '</div>',
+                });
+            });
+        })
+        .catch(function(e) { console.warn('Flights fetch error:', e); });
+    },
+};

static/js/layers/gdelt.js

@@ -0,0 +1,62 @@
+/**
+ * GDELT Nachrichten-Layer: Geokodierte Echtzeit-News.
+ */
+const GdeltLayer = {
+    _viewer: null,
+    _dataSource: null,
+    _interval: null,
+    _count: 0,
+
+    start(viewer) {
+        if (this._dataSource) return;
+        this._viewer = viewer;
+        this._dataSource = new Cesium.CustomDataSource('gdelt');
+        viewer.dataSources.add(this._dataSource);
+        this._fetch();
+        var self = this;
+        this._interval = setInterval(function() { self._fetch(); }, 600000);
+    },
+
+    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;
+        fetch('/api/gdelt')
+        .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;
+            features.forEach(function(f) {
+                var c = f.geometry.coordinates;
+                var p = f.properties || {};
+                var title = (p.name || p.title || 'Nachricht').substring(0, 80);
+                var url = p.url || '';
+                self._dataSource.entities.add({
+                    position: Cesium.Cartesian3.fromDegrees(c[0], c[1]),
+                    point: {
+                        pixelSize: 5,
+                        color: Cesium.Color.fromCssColorString('#ff8800'),
+                        outlineColor: Cesium.Color.fromCssColorString('#663300'),
+                        outlineWidth: 1,
+                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                    },
+                    description: '<div style="font-family:monospace;font-size:12px;color:#ff8800">' +
+                        '<strong>' + title + '</strong>' +
+                        (url ? '<br><a href="' + url + '" target="_blank" style="color:#44aaff">Quelle</a>' : '') +
+                        '</div>',
+                });
+            });
+        })
+        .catch(function(e) { console.warn('GDELT fetch error:', e); });
+    },
+};

static/js/layers/quakes.js

@@ -0,0 +1,71 @@
+/**
+ * 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;
+        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.CLAMP_TO_GROUND,
+                    },
+                    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); });
+    },
+};

static/js/layers/ships.js

@@ -0,0 +1,79 @@
+/**
+ * Schiffsverkehr-Layer: Blaue Punkte auf Meereshöhe.
+ */
+const ShipsLayer = {
+    _viewer: null,
+    _dataSource: null,
+    _interval: null,
+    _count: 0,
+
+    start(viewer) {
+        if (this._dataSource) return;
+        this._viewer = viewer;
+        this._dataSource = new Cesium.CustomDataSource('ships');
+        viewer.dataSources.add(this._dataSource);
+        this._fetch();
+        var self = this;
+        this._interval = setInterval(function() { self._fetch(); }, 60000);
+    },
+
+    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;
+        fetch('/api/ships')
+        .then(function(r) { return r.json(); })
+        .then(function(data) {
+            if (!self._dataSource) return;
+            self._dataSource.entities.removeAll();
+            var ships = data.ships || [];
+            self._count = ships.length;
+            ships.forEach(function(s) {
+                if (!s.lat || !s.lon) return;
+                var sog = s.sog || 0;
+                var color = sog > 0.5
+                    ? Cesium.Color.fromCssColorString('#4499ff')
+                    : Cesium.Color.fromCssColorString('#556688');
+                var name = s.name || ('MMSI ' + (s.mmsi || '?'));
+                self._dataSource.entities.add({
+                    position: Cesium.Cartesian3.fromDegrees(s.lon, s.lat, 0),
+                    point: {
+                        pixelSize: 3,
+                        color: color,
+                        outlineColor: Cesium.Color.fromCssColorString('#112244'),
+                        outlineWidth: 0.5,
+                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                    },
+                    label: {
+                        text: name,
+                        font: '9px monospace',
+                        fillColor: Cesium.Color.fromCssColorString('#4499ff').withAlpha(0.7),
+                        outlineColor: Cesium.Color.BLACK,
+                        outlineWidth: 2,
+                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                        pixelOffset: new Cesium.Cartesian2(6, -3),
+                        scale: 0.7,
+                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 500000),
+                    },
+                    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) + '°<br>' +
+                        'HDG: ' + (s.heading || '?') + '°' +
+                        '</div>',
+                });
+            });
+        })
+        .catch(function(e) { console.warn('Ships fetch error:', e); });
+    },
+};