/** * Schiffsverkehr-Layer: Blaue Punkte auf Meereshöhe. */ const ShipsLayer = { _viewer: null, _dataSource: null, _interval: null, _count: 0, start(viewer) { if (this._dataSource) return; this._viewer = viewer; this._dataSource = new Cesium.CustomDataSource('ships'); viewer.dataSources.add(this._dataSource); this._fetch(); var self = this; this._interval = setInterval(function() { self._fetch(); }, 60000); }, stop() { if (this._interval) { clearInterval(this._interval); this._interval = null; } if (this._dataSource && this._viewer) { this._viewer.dataSources.remove(this._dataSource); this._dataSource = null; } this._count = 0; }, _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._dataSource) return; self._dataSource.entities.removeAll(); var ships = data.ships || []; self._count = ships.length; ships.forEach(function(s) { if (!s.lat || !s.lon) return; var sog = s.sog || 0; var color = sog > 0.5 ? Cesium.Color.fromCssColorString('#4499ff') : Cesium.Color.fromCssColorString('#556688'); var name = s.name || ('MMSI ' + (s.mmsi || '?')); self._dataSource.entities.add({ position: Cesium.Cartesian3.fromDegrees(s.lon, s.lat, 0), point: { pixelSize: 3, color: color, outlineColor: Cesium.Color.fromCssColorString('#112244'), outlineWidth: 0.5, heightReference: Cesium.HeightReference.NONE, }, label: { text: name, font: '9px monospace', fillColor: Cesium.Color.fromCssColorString('#4499ff').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, 500000), }, description: '