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.
200 Zeilen
8.8 KiB
JavaScript
200 Zeilen
8.8 KiB
JavaScript
/**
|
|
* AegisSight Globe — Haupt-App: CesiumJS Viewer, Layer-Management, UI.
|
|
*/
|
|
const Globe = {
|
|
viewer: null,
|
|
layers: {},
|
|
_statsInterval: null,
|
|
_currentLageId: null,
|
|
_labelsLayer: null,
|
|
|
|
init() {
|
|
// Cesium Ion Token
|
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyZTRlZTk4ZC01YjBjLTQ0Y2EtYjdlYi1kNDAwYTIwZjA3YjkiLCJpZCI6NDA4MzI4LCJpYXQiOjE3NzQzNDcyMzR9.eXzrtBDzNsBCbvUHu_Hc-A5gTcBDkspS7IrPDbc5y8M';
|
|
|
|
// Viewer erstellen
|
|
this.viewer = new Cesium.Viewer('cesiumContainer', {
|
|
terrain: Cesium.Terrain.fromWorldTerrain(),
|
|
animation: false,
|
|
timeline: false,
|
|
fullscreenButton: false,
|
|
geocoder: false,
|
|
homeButton: false,
|
|
infoBox: true,
|
|
selectionIndicator: true,
|
|
navigationHelpButton: false,
|
|
sceneModePicker: false,
|
|
baseLayerPicker: false,
|
|
skyBox: new Cesium.SkyBox({
|
|
sources: {
|
|
positiveX: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_px.jpg'),
|
|
negativeX: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_mx.jpg'),
|
|
positiveY: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_py.jpg'),
|
|
negativeY: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_my.jpg'),
|
|
positiveZ: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_pz.jpg'),
|
|
negativeZ: Cesium.buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_mz.jpg'),
|
|
}
|
|
}),
|
|
});
|
|
|
|
// Atmosphere und Beleuchtung
|
|
this.viewer.scene.globe.enableLighting = false;
|
|
this.viewer.scene.fog.enabled = true;
|
|
this.viewer.scene.globe.showGroundAtmosphere = true;
|
|
this.viewer.clock.shouldAnimate = true;
|
|
|
|
// Kamera auf Europa
|
|
this.viewer.camera.flyTo({
|
|
destination: Cesium.Cartesian3.fromDegrees(10.0, 48.0, 8000000),
|
|
duration: 0,
|
|
});
|
|
|
|
// Koordinaten-Anzeige bei Mausbewegung
|
|
var coordsEl = document.getElementById('coords-display');
|
|
var scene = this.viewer.scene;
|
|
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
|
|
handler.setInputAction(function(movement) {
|
|
var cartesian = scene.pickPosition(movement.endPosition);
|
|
if (!cartesian) {
|
|
var ray = scene.camera.getPickRay(movement.endPosition);
|
|
cartesian = scene.globe.pick(ray, scene);
|
|
}
|
|
if (cartesian) {
|
|
var carto = Cesium.Cartographic.fromCartesian(cartesian);
|
|
var lat = Cesium.Math.toDegrees(carto.latitude).toFixed(4);
|
|
var lon = Cesium.Math.toDegrees(carto.longitude).toFixed(4);
|
|
coordsEl.textContent = 'LAT: ' + lat + ' LON: ' + lon;
|
|
}
|
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
|
// Layer Checkboxen
|
|
this._setupLayerToggles();
|
|
|
|
// Fullscreen
|
|
document.getElementById('btn-fullscreen').addEventListener('click', function() {
|
|
if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); }
|
|
else { document.exitFullscreen(); }
|
|
});
|
|
|
|
// Stats Update
|
|
this._statsInterval = setInterval(function() { Globe._updateStats(); }, 5000);
|
|
|
|
// Layer starten (die mit checked)
|
|
|
|
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...';
|
|
},
|
|
|
|
_toggleLabels(on) {
|
|
if (on && !this._labelsLayer) {
|
|
this._labelsLayer = this.viewer.imageryLayers.addImageryProvider(
|
|
new Cesium.UrlTemplateImageryProvider({
|
|
url: 'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}',
|
|
minimumLevel: 1,
|
|
maximumLevel: 18,
|
|
tileWidth: 256,
|
|
tileHeight: 256,
|
|
credit: 'Esri',
|
|
})
|
|
);
|
|
this._labelsLayer.alpha = 0.95;
|
|
this._labelsLayer.minificationFilter = Cesium.TextureMinificationFilter.LINEAR;
|
|
this._labelsLayer.magnificationFilter = Cesium.TextureMagnificationFilter.LINEAR;
|
|
} else if (!on && this._labelsLayer) {
|
|
this.viewer.imageryLayers.remove(this._labelsLayer);
|
|
this._labelsLayer = null;
|
|
}
|
|
},
|
|
|
|
_loadLagen() {
|
|
var select = document.getElementById('lage-select');
|
|
if (!select) return;
|
|
fetch('/api/monitor-incidents')
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(lagen) {
|
|
var html = '<option value="">-- Lage waehlen --</option>';
|
|
(lagen || []).forEach(function(l) {
|
|
var typeLabel = '';
|
|
html += '<option value="' + l.id + '">' + typeLabel + l.title + '</option>';
|
|
});
|
|
select.innerHTML = html;
|
|
})
|
|
.catch(function() {});
|
|
},
|
|
|
|
_onLageChange(lageId) {
|
|
this._currentLageId = lageId ? parseInt(lageId) : null;
|
|
|
|
if (typeof MonitorLayer !== 'undefined') {
|
|
if (lageId) {
|
|
if (!MonitorLayer._points) MonitorLayer.start(this.viewer);
|
|
MonitorLayer._data = [];
|
|
MonitorLayer._incidents = [];
|
|
MonitorLayer._render();
|
|
MonitorLayer._fetchForLage(lageId);
|
|
} else {
|
|
MonitorLayer.stop();
|
|
}
|
|
}
|
|
|
|
// Katastrophen-Layer: Monitor-Daten aktualisieren
|
|
if (typeof DisastersLayer !== 'undefined' && DisastersLayer._dataSource) {
|
|
DisastersLayer._fetchMonitorContext();
|
|
}
|
|
|
|
if (typeof Sidebar !== 'undefined') Sidebar.update();
|
|
},
|
|
|
|
_setupLayerToggles() {
|
|
var toggles = {
|
|
'layer-flights': function(on) { on ? FlightsLayer.start(Globe.viewer) : FlightsLayer.stop(); },
|
|
'layer-ships': function(on) { on ? ShipsLayer.start(Globe.viewer) : ShipsLayer.stop(); },
|
|
'layer-gdelt': function(on) { on ? GdeltLayer.start(Globe.viewer) : GdeltLayer.stop(); },
|
|
'layer-satellites': function(on) { on ? SatellitesLayer.start(Globe.viewer) : SatellitesLayer.stop(); },
|
|
'layer-disasters': function(on) { on ? DisastersLayer.start(Globe.viewer) : DisastersLayer.stop(); },
|
|
'layer-weather': function(on) { on ? WeatherLayer.start(Globe.viewer) : WeatherLayer.stop(); },
|
|
'layer-daynight': function(on) { Globe.viewer.scene.globe.enableLighting = on; },
|
|
'layer-crosshairs': function(on) { CrosshairsUI.toggle(on); },
|
|
'layer-labels': function(on) { Globe._toggleLabels(on); },
|
|
};
|
|
Object.keys(toggles).forEach(function(id) {
|
|
var cb = document.getElementById(id);
|
|
if (cb) cb.addEventListener('change', function() { toggles[id](this.checked); });
|
|
});
|
|
},
|
|
|
|
_updateStats() {
|
|
var parts = [];
|
|
if (typeof FlightsLayer !== 'undefined' && FlightsLayer._count > 0) {
|
|
parts.push(FlightsLayer._count.toLocaleString('de-DE') + ' Flugzeuge');
|
|
document.getElementById('count-flights').textContent = FlightsLayer._count.toLocaleString('de-DE');
|
|
}
|
|
if (typeof ShipsLayer !== 'undefined' && ShipsLayer._count > 0) {
|
|
parts.push(ShipsLayer._count.toLocaleString('de-DE') + ' Schiffe');
|
|
document.getElementById('count-ships').textContent = ShipsLayer._count.toLocaleString('de-DE');
|
|
}
|
|
if (typeof QuakesLayer !== 'undefined' && QuakesLayer._count > 0) {
|
|
document.getElementById('count-quakes').textContent = QuakesLayer._count.toLocaleString('de-DE');
|
|
}
|
|
if (typeof SatellitesLayer !== 'undefined' && SatellitesLayer._count > 0) {
|
|
document.getElementById('count-satellites').textContent = SatellitesLayer._count.toLocaleString('de-DE');
|
|
}
|
|
if (typeof DisastersLayer !== 'undefined' && DisastersLayer._count > 0) {
|
|
document.getElementById('count-disasters').textContent = DisastersLayer._count.toLocaleString('de-DE');
|
|
}
|
|
if (typeof GdeltLayer !== 'undefined' && GdeltLayer._count > 0) {
|
|
document.getElementById('count-gdelt').textContent = GdeltLayer._count.toLocaleString('de-DE');
|
|
}
|
|
if (parts.length) {
|
|
document.getElementById('bottom-stats').textContent = parts.join(' | ');
|
|
}
|
|
},
|
|
};
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { Globe.init(); });
|