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.
95 Zeilen
4.0 KiB
JavaScript
95 Zeilen
4.0 KiB
JavaScript
/**
|
|
* Schiffsverkehr-Layer: GPU-beschleunigte Punkt-Primitive.
|
|
*/
|
|
const ShipsLayer = {
|
|
_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(); }, 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._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() {
|
|
var self = this;
|
|
var loadEl = document.getElementById('loading-ships');
|
|
var statusEl = document.getElementById('status-ships');
|
|
if (loadEl) loadEl.classList.add('active');
|
|
if (statusEl) { statusEl.textContent = 'Lade Daten...'; statusEl.classList.add('active'); }
|
|
fetch('/api/ships')
|
|
.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';
|
|
})
|
|
.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); });
|
|
},
|
|
};
|