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.
86 Zeilen
3.0 KiB
JavaScript
86 Zeilen
3.0 KiB
JavaScript
/**
|
|
* 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;
|
|
},
|
|
};
|