diff --git a/static/js/layers/flights.js b/static/js/layers/flights.js index 56ef5e3..a13a46e 100644 --- a/static/js/layers/flights.js +++ b/static/js/layers/flights.js @@ -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 = '' + cs + '
' + - 'ALT: ' + (best.alt_baro || '?') + ' ft
' + - 'SPD: ' + (best.gs || '?') + ' kts
' + - 'HDG: ' + Math.round(best.track || 0) + '°' + - (best.origin ? '
FROM: ' + best.origin : ''); - this._viewer.selectedEntity = new Cesium.Entity({ - name: cs, - description: '
' + html + '
', + + 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: '
' + + '' + cs + '
' + + 'ALT: ' + (best.alt_baro || '?') + ' ft
' + + 'SPD: ' + (best.gs || '?') + ' kts
' + + 'HDG: ' + Math.round(best.track || 0) + '°' + + (best.origin ? '
FROM: ' + best.origin : '') + '
', + }); + } + } 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); }); diff --git a/static/js/layers/ships.js b/static/js/layers/ships.js index a357444..6c33d8a 100644 --- a/static/js/layers/ships.js +++ b/static/js/layers/ships.js @@ -1,63 +1,142 @@ /** - * Schiffsverkehr-Layer: GPU-beschleunigte Punkt-Primitive. + * Schiffsverkehr-Layer: Zoom-adaptive Darstellung. */ const ShipsLayer = { _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(); }, 60000); + this._cameraListener = function() { self._renderForZoom(); }; + viewer.camera.changed.addEventListener(this._cameraListener); + this._handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); - this._handler.setInputAction(function(click) { - self._onClick(click.position); - }, Cesium.ScreenSpaceEventType.LEFT_CLICK); + 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._cameraListener && this._viewer) { this._viewer.camera.changed.removeEventListener(this._cameraListener); this._cameraListener = null; } if (this._handler) { this._handler.destroy(); this._handler = null; } - this._count = 0; - this._data = []; + 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'; + if (alt > 1000000) return 'medium'; + return 'close'; + }, + + _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); } + else if (level === 'medium') { this._renderClustered(2); } + else { this._renderIndividual(); } + }, + + _renderClustered(gridSize) { + var clusters = {}; + var blue = Cesium.Color.fromCssColorString('#4499ff'); + for (var i = 0; i < this._data.length; i++) { + var s = this._data[i]; + if (!s.lat || !s.lon) continue; + var key = Math.round(s.lat / gridSize) + ',' + Math.round(s.lon / gridSize); + if (!clusters[key]) { clusters[key] = { count: 0, sumLat: 0, sumLon: 0 }; } + clusters[key].count++; + clusters[key].sumLat += s.lat; + clusters[key].sumLon += s.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.2, 3), 16); + this._points.add({ + position: Cesium.Cartesian3.fromDegrees(avgLon, avgLat, 0), + pixelSize: size, color: blue, + outlineColor: Cesium.Color.fromCssColorString('#112244'), outlineWidth: 1, + }); + if (c.count > 1) { + this._labels.add({ + position: Cesium.Cartesian3.fromDegrees(avgLon, avgLat, 0), + text: c.count.toString(), font: '10px sans-serif', + fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, outlineWidth: 3, + style: Cesium.LabelStyle.FILL_AND_OUTLINE, + pixelOffset: new Cesium.Cartesian2(0, -size - 3), scale: 0.8, + horizontalOrigin: Cesium.HorizontalOrigin.CENTER, + }); + } + } + }, + + _renderIndividual() { + var blue = Cesium.Color.fromCssColorString('#4499ff'); + var gray = Cesium.Color.fromCssColorString('#445577'); + for (var i = 0; i < this._data.length; i++) { + var s = this._data[i]; + if (!s.lat || !s.lon) continue; + this._points.add({ + position: Cesium.Cartesian3.fromDegrees(s.lon, s.lat, 0), + pixelSize: 2.5, color: (s.sog || 0) > 0.5 ? blue : gray, + }); + } }, _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) { 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 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 = '' + name + '
' + - 'MMSI: ' + (best.mmsi || '?') + '
' + - 'SOG: ' + (best.sog || 0).toFixed(1) + ' kn
' + - 'COG: ' + Math.round(best.cog || 0) + '°'; - this._viewer.selectedEntity = new Cesium.Entity({ - name: name, - description: '
' + html + '
', - }); + var level = this._getZoomLevel(); + if (level === 'close') { + 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 < 0.5) { + var name = best.name || ('MMSI ' + (best.mmsi || '?')); + this._viewer.selectedEntity = new Cesium.Entity({ + name: name, + description: '
' + + '' + name + '
MMSI: ' + (best.mmsi || '?') + + '
SOG: ' + (best.sog || 0).toFixed(1) + ' kn
COG: ' + Math.round(best.cog || 0) + '°
', + }); + } + } else { + this._viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(clickLon, clickLat, level === 'far' ? 2000000 : 500000), duration: 1.0 }); } }, @@ -71,22 +150,11 @@ const ShipsLayer = { .then(function(r) { return r.json(); }) .then(function(data) { if (!self._points) return; - self._points.removeAll(); - var ships = data.ships || []; - self._data = ships; - self._count = ships.length; - 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), - pixelSize: 2.5, - color: (s.sog || 0) > 0.5 ? blue : gray, - }); - } - if (statusEl) statusEl.textContent = ships.length.toLocaleString('de-DE') + ' Schiffe'; + self._data = data.ships || []; + self._count = self._data.length; + self._lastZoomLevel = null; + self._render(); + if (statusEl) statusEl.textContent = self._count.toLocaleString('de-DE') + ' Schiffe'; }) .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); });