Zoom-adaptive Darstellung: Cluster bei Uebersicht, Details bei Zoom
Flugverkehr + Schiffsverkehr: - Weit (>5.000km): 5-Grad-Raster-Cluster mit Anzahl-Labels - Mittel (1.000-5.000km): 2-Grad-Raster-Cluster - Nah (<1.000km): Einzelne Punkte, Klick zeigt Details Cluster: Punktgroesse proportional zu sqrt(Anzahl), weisses Count-Label. Klick auf Cluster zoomt rein. Klick auf Einzelpunkt zeigt Info. Kamera-Listener reagiert auf Zoom-Aenderungen (20% Schwelle).
Dieser Commit ist enthalten in:
Claude Dev
@@ -1,22 +1,35 @@
|
||||
/**
|
||||
* Flugverkehr-Layer: GPU-beschleunigte Punkt-Primitive.
|
||||
* 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);
|
||||
|
||||
// Klick-Handler fuer Flugzeug-Details
|
||||
// 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);
|
||||
@@ -25,41 +38,148 @@ const FlightsLayer = {
|
||||
|
||||
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._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) * 1.5, 4), 20);
|
||||
|
||||
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: '11px sans-serif',
|
||||
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 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) {
|
||||
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 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>',
|
||||
|
||||
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.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) + '°' +
|
||||
(best.origin ? '<br>FROM: ' + best.origin : '') + '</div>',
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Cluster: Reinzoomen auf Klickposition
|
||||
this._viewer.camera.flyTo({
|
||||
destination: Cesium.Cartesian3.fromDegrees(clickLon, clickLat, level === 'far' ? 2000000 : 500000),
|
||||
duration: 1.0,
|
||||
});
|
||||
}
|
||||
},
|
||||
@@ -74,22 +194,11 @@ const FlightsLayer = {
|
||||
.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';
|
||||
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); });
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren