/** * 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); }, stop() { if (this._interval) { clearInterval(this._interval); this._interval = 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'; 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 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 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: '