Flights+Ships: PointPrimitiveCollection statt Entity API
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
@@ -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) + '°' +
|
||||
(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) + '°' +
|
||||
(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); });
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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) + '°';
|
||||
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) + '°' +
|
||||
'</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); });
|
||||
},
|
||||
};
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren