d3c1de9d5d
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.
98 Zeilen
4.1 KiB
JavaScript
98 Zeilen
4.1 KiB
JavaScript
/**
|
|
* Flugverkehr-Layer: GPU-beschleunigte Punkt-Primitive.
|
|
*/
|
|
const FlightsLayer = {
|
|
_viewer: null,
|
|
_points: null,
|
|
_interval: null,
|
|
_count: 0,
|
|
_data: [],
|
|
|
|
start(viewer) {
|
|
if (this._points) return;
|
|
this._viewer = viewer;
|
|
this._points = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
|
|
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._points && this._viewer) {
|
|
this._viewer.scene.primitives.remove(this._points);
|
|
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) + '°' +
|
|
(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() {
|
|
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._points.removeAll();
|
|
var ac = data.ac || [];
|
|
self._data = ac;
|
|
self._count = ac.length;
|
|
var green = Cesium.Color.fromCssColorString('#00ff88');
|
|
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); });
|
|
},
|
|
};
|