Satellitenbilder-Switcher: 9 Imagery-Quellen

Dropdown im Layer-Panel unter SATELLITENBILDER:
- Cesium Ion (Standard, photorealistisch mit Terrain)
- Esri World Imagery (hochaufloesend, 0.3-1m)
- Sentinel-2 2024/2023/2022/2020/2018 (ESA Copernicus, historisch)
- OpenTopoMap (topographische Karte)
- OpenStreetMap (Referenz)

Sentinel-2 historisch ermoeglicht Vorher/Nachher-Vergleiche:
z.B. Waldbraende, Ueberschwemmungen, Infrastruktur-Veraenderungen.
Alle Quellen kostenlos, kein API-Key, volle CORS-Unterstuetzung.

static/js/app.js

@@ -84,6 +84,7 @@ const Globe = {
         this._toggleLabels(true);
         if (typeof VisualModes !== 'undefined') VisualModes.init();
         if (typeof Sidebar !== 'undefined') Sidebar.init();
+        if (typeof ImagerySwitch !== 'undefined') ImagerySwitch.init(this.viewer);
         if (typeof SearchUI !== 'undefined') SearchUI.init();
         this._loadLagen();
         document.getElementById('bottom-stats').textContent = 'Globe initialisiert — Lade Daten...';

static/js/ui/imagery.js

@@ -0,0 +1,85 @@
+/**
+ * Imagery Switcher: Verschiedene Satellitenbilder + historische Aufnahmen.
+ */
+const ImagerySwitch = {
+    _viewer: null,
+    _currentLayer: null,
+    _currentId: 'default',
+
+    _sources: {
+        'default': { name: 'Cesium Ion (Standard)', url: null },
+        'esri': {
+            name: 'Esri World Imagery',
+            url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+        },
+        's2-2024': {
+            name: 'Sentinel-2 (2024)',
+            url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2024_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
+        },
+        's2-2023': {
+            name: 'Sentinel-2 (2023)',
+            url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2023_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
+        },
+        's2-2022': {
+            name: 'Sentinel-2 (2022)',
+            url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2022_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
+        },
+        's2-2020': {
+            name: 'Sentinel-2 (2020)',
+            url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2020_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
+        },
+        's2-2018': {
+            name: 'Sentinel-2 (2018)',
+            url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2018_3857/default/GoogleMapsCompatible/{z}/{x}/{y}.jpg',
+        },
+        'topo': {
+            name: 'OpenTopoMap',
+            url: 'https://tile.opentopomap.org/{z}/{x}/{y}.png',
+        },
+        'osm': {
+            name: 'OpenStreetMap',
+            url: 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        },
+    },
+
+    init(viewer) {
+        this._viewer = viewer;
+    },
+
+    switchTo(id) {
+        if (!this._viewer || this._currentId === id) return;
+        var src = this._sources[id];
+        if (!src) return;
+
+        // Alle eigenen Imagery-Layer entfernen (nicht den Cesium-Default und nicht Labels)
+        if (this._currentLayer) {
+            this._viewer.imageryLayers.remove(this._currentLayer);
+            this._currentLayer = null;
+        }
+
+        if (id === 'default') {
+            // Cesium Ion Default wiederherstellen — nichts tun, der ist immer da
+            this._currentId = id;
+        } else {
+            // Neuen Layer als untersten hinzufuegen (ueber dem Default)
+            this._currentLayer = this._viewer.imageryLayers.addImageryProvider(
+                new Cesium.UrlTemplateImageryProvider({
+                    url: src.url,
+                    maximumLevel: 18,
+                    credit: src.name,
+                })
+            );
+            // Unter Labels aber ueber Default
+            this._viewer.imageryLayers.lower(this._currentLayer);
+            this._currentId = id;
+        }
+
+        // Dropdown aktualisieren
+        var sel = document.getElementById('imagery-select');
+        if (sel) sel.value = id;
+
+        // Status
+        var label = document.getElementById('imagery-label');
+        if (label) label.textContent = src.name;
+    },
+};