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,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 = '<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>',
|
||||
});
|
||||
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: '<div style="font-family:monospace;font-size:13px;color:#4499ff;padding:8px">' +
|
||||
'<strong>' + name + '</strong><br>MMSI: ' + (best.mmsi || '?') +
|
||||
'<br>SOG: ' + (best.sog || 0).toFixed(1) + ' kn<br>COG: ' + Math.round(best.cog || 0) + '°</div>',
|
||||
});
|
||||
}
|
||||
} 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); });
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren