AegisSight/AegisSight-Globe
2
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

Flights+Ships: PointPrimitiveCollection statt Entity API

Quellcode durchsuchen 
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.
Dieser Commit ist enthalten in:
Claude Dev
2026-03-24 12:33:11 +01:00
Ursprung 7015a9e512
Commit d3c1de9d5d
2 geänderte Dateien mit 117 neuen und 96 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

108
static/js/layers/flights.js
Datei anzeigen

@@ -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._dataSource.clustering.enabled = true;
this._dataSource.clustering.pixelRange = 30;
this._dataSource.clustering.minimumClusterSize = 5;
viewer.dataSources.add(this._dataSource);
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._dataSource && this._viewer) {
this._viewer.dataSources.remove(this._dataSource);
this._dataSource = 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) + '&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;
self._dataSource.entities.removeAll();
if (!self._points) return;
self._points.removeAll();
var ac = data.ac || [];
self._data = ac;
self._count = ac.length;
ac.forEach(function(a) {
if (!a.lat || !a.lon) return;
// alt_baro ist in ft vom Backend, konvertiere zu m fuer Cesium
var altFt = a.alt_baro || 30000;
var altM = altFt * 0.3048;
var cs = (a.flight || a.hex || '').trim() || '?';
self._dataSource.entities.add({
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),
point: {
pixelSize: 3,
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>',
pixelSize: 3.0,
color: green,
});
});
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); });
},
};

105
static/js/layers/ships.js
Datei anzeigen

@@ -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._dataSource.clustering.enabled = true;
this._dataSource.clustering.pixelRange = 25;
this._dataSource.clustering.minimumClusterSize = 5;
viewer.dataSources.add(this._dataSource);
this._points = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
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) {
this._viewer.dataSources.remove(this._dataSource);
this._dataSource = 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;
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;
self._dataSource.entities.removeAll();
if (!self._points) return;
self._points.removeAll();
var ships = data.ships || [];
self._data = ships;
self._count = ships.length;
ships.forEach(function(s) {
if (!s.lat || !s.lon) return;
var name = s.name || ('MMSI ' + (s.mmsi || '?'));
var sog = s.sog || 0;
var color = sog > 0.5
? Cesium.Color.fromCssColorString('#4499ff')
: Cesium.Color.fromCssColorString('#445577');
self._dataSource.entities.add({
var blue = Cesium.Color.fromCssColorString('#4499ff');
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),
point: {
pixelSize: 3,
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>',
pixelSize: 2.5,
color: (s.sog || 0) > 0.5 ? blue : gray,
});
});
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); });
},
};