Exakte Ort-Artikel-Zuordnung + Lage zentriert im Header
Monitor-Feed liefert jetzt pro Standort die vollstaendigen Artikel: Headline, Quelle, URL, Inhalts-Auszug, Datum. Keine globale Summary mehr, keine Proximity-Heuristik. Klick auf Waldbrand USA -> zeigt US-Waldbrand-Artikel Klick auf Kenia -> zeigt Kenia-Ueberschwemmungs-Artikel Klick auf Erdbeben -> zeigt naechsten passenden Artikel Lage-Auswahl zentriert in der Header-Leiste.
Dieser Commit ist enthalten in:
@@ -1,6 +1,5 @@
|
||||
/**
|
||||
* Monitor-Layer: OSINT-Daten aus dem AegisSight Monitor.
|
||||
* Zeigt geoparsete Standorte mit Zusammenfassungen auf dem Globus.
|
||||
* Monitor-Layer: OSINT-Daten mit ortsspezifischen Artikeln.
|
||||
*/
|
||||
const MonitorLayer = {
|
||||
_viewer: null,
|
||||
@@ -17,15 +16,9 @@ const MonitorLayer = {
|
||||
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(); }, 120000);
|
||||
|
||||
// Klick-Handler
|
||||
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() {
|
||||
@@ -36,90 +29,6 @@ const MonitorLayer = {
|
||||
this._count = 0; this._data = []; this._incidents = [];
|
||||
},
|
||||
|
||||
_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);
|
||||
|
||||
// Naechsten Monitor-Punkt finden
|
||||
var best = null, bestDist = 999;
|
||||
for (var i = 0; i < this._data.length; i++) {
|
||||
var f = this._data[i];
|
||||
var c = f.geometry.coordinates;
|
||||
var d = Math.abs(c[1] - clickLat) + Math.abs(c[0] - clickLon);
|
||||
if (d < bestDist) { bestDist = d; best = f; }
|
||||
}
|
||||
if (!best || bestDist > 2) return;
|
||||
|
||||
var p = best.properties;
|
||||
var incident = null;
|
||||
for (var j = 0; j < this._incidents.length; j++) {
|
||||
if (this._incidents[j].id === p.incident_id) { incident = this._incidents[j]; break; }
|
||||
}
|
||||
|
||||
// Info-Panel bauen
|
||||
var catColors = { primary: '#ff2222', secondary: '#ff8800', tertiary: '#4499ff', mentioned: '#888888' };
|
||||
var catLabels = { primary: 'Hauptgeschehen', secondary: 'Reaktionen', tertiary: 'Beteiligte', mentioned: 'Erwaehnt' };
|
||||
var catColor = catColors[p.category] || '#888';
|
||||
var catLabel = catLabels[p.category] || p.category;
|
||||
|
||||
var html = '<div style="font-family:monospace;font-size:12px;padding:10px;max-width:400px;line-height:1.6">';
|
||||
|
||||
// Ort + Kategorie
|
||||
html += '<div style="margin-bottom:10px">';
|
||||
html += '<span style="color:' + catColor + ';font-size:14px;font-weight:700">' + (p.name || '?') + '</span>';
|
||||
if (p.country) html += ' <span style="color:#888;font-size:11px">(' + p.country + ')</span>';
|
||||
html += '<br><span style="color:' + catColor + ';font-size:10px;letter-spacing:1px">' + catLabel.toUpperCase() + '</span>';
|
||||
html += ' · <span style="color:#aaa">' + (p.article_count || 0) + ' Artikel</span>';
|
||||
html += '</div>';
|
||||
|
||||
// Headlines
|
||||
var headlines = p.headlines || [];
|
||||
if (headlines.length && headlines[0]) {
|
||||
html += '<div style="border-left:2px solid ' + catColor + ';padding-left:8px;margin-bottom:10px">';
|
||||
for (var h = 0; h < Math.min(headlines.length, 3); h++) {
|
||||
if (headlines[h] && headlines[h].trim()) {
|
||||
html += '<div style="color:#e0e0e0;font-size:11px;margin-bottom:4px">• ' + headlines[h].trim().substring(0, 120) + '</div>';
|
||||
}
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
// Lage-Zusammenfassung
|
||||
if (incident && incident.summary) {
|
||||
html += '<div style="border-top:1px solid #333;padding-top:8px;margin-top:4px">';
|
||||
html += '<div style="color:#00ff88;font-size:10px;letter-spacing:1px;margin-bottom:4px">' + (incident.title || 'LAGE').toUpperCase() + '</div>';
|
||||
// Summary kuerzen und Markdown-Formatierung entfernen
|
||||
var summary = incident.summary
|
||||
.replace(/##?\s*/g, '')
|
||||
.replace(/\*\*/g, '')
|
||||
.replace(/\[(\d+)\]/g, '')
|
||||
.substring(0, 500);
|
||||
html += '<div style="color:#ccc;font-size:11px;line-height:1.5">' + summary;
|
||||
if (incident.summary.length > 500) html += '...';
|
||||
html += '</div>';
|
||||
if (incident.updated_at) {
|
||||
html += '<div style="color:#666;font-size:9px;margin-top:6px">Stand: ' + new Date(incident.updated_at).toLocaleString('de-DE') + '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
this._viewer.trackedEntity = undefined;
|
||||
this._viewer.selectedEntity = new Cesium.Entity({
|
||||
name: (p.name || '?') + ' — ' + (incident ? incident.title : 'Monitor'),
|
||||
description: html,
|
||||
});
|
||||
},
|
||||
|
||||
_fetchForLage(lageId) {
|
||||
var self = this;
|
||||
var loadEl = document.getElementById('loading-monitor');
|
||||
@@ -141,68 +50,96 @@ const MonitorLayer = {
|
||||
},
|
||||
|
||||
_fetch() {
|
||||
var self = this;
|
||||
var loadEl = document.getElementById('loading-monitor');
|
||||
var statusEl = document.getElementById('status-monitor');
|
||||
if (loadEl) loadEl.classList.add('active');
|
||||
if (statusEl) { statusEl.textContent = 'Lade Monitor-Daten...'; statusEl.classList.add('active'); }
|
||||
var lageId = (typeof Globe !== 'undefined' && Globe._currentLageId) ? Globe._currentLageId : '';
|
||||
fetch('/api/monitor-feed' + (lageId ? '?incident_id=' + lageId : ''))
|
||||
.then(function(r) { return r.json(); })
|
||||
.then(function(data) {
|
||||
self._data = data.features || [];
|
||||
self._incidents = data.incidents || [];
|
||||
self._count = self._data.length;
|
||||
self._render();
|
||||
if (statusEl) {
|
||||
var incCount = self._incidents.length;
|
||||
statusEl.textContent = self._count + ' Orte aus ' + incCount + ' Lagen';
|
||||
}
|
||||
})
|
||||
.catch(function(e) { console.warn('Monitor error:', e); if (statusEl) statusEl.textContent = 'Fehler'; })
|
||||
.finally(function() { if (loadEl) loadEl.classList.remove('active'); setTimeout(function() { if (statusEl) statusEl.classList.remove('active'); }, 8000); });
|
||||
if (lageId) this._fetchForLage(lageId);
|
||||
},
|
||||
|
||||
_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 best = null, bestDist = 999;
|
||||
for (var i = 0; i < this._data.length; i++) {
|
||||
var f = this._data[i];
|
||||
var c = f.geometry.coordinates;
|
||||
var d = Math.abs(c[1] - clickLat) + Math.abs(c[0] - clickLon);
|
||||
if (d < bestDist) { bestDist = d; best = f; }
|
||||
}
|
||||
if (!best || bestDist > 2) return;
|
||||
|
||||
var p = best.properties;
|
||||
var catColors = { primary: '#ff2222', secondary: '#ff8800', tertiary: '#4499ff', mentioned: '#888888' };
|
||||
var color = catColors[p.category] || '#888';
|
||||
|
||||
var html = '<div style="font-family:monospace;font-size:12px;padding:10px;max-width:400px;line-height:1.6">';
|
||||
html += '<span style="color:' + color + ';font-size:14px;font-weight:700">' + (p.name || '?') + '</span>';
|
||||
if (p.country) html += ' <span style="color:#888">(' + p.country + ')</span>';
|
||||
html += '<br><span style="color:#aaa">' + (p.article_count || 0) + ' Artikel</span>';
|
||||
|
||||
// Ortsspezifische Artikel
|
||||
var articles = p.articles || [];
|
||||
if (articles.length) {
|
||||
html += '<div style="margin-top:8px">';
|
||||
articles.forEach(function(a) {
|
||||
html += '<div style="border-left:2px solid ' + color + ';padding-left:8px;margin-bottom:8px">';
|
||||
html += '<div style="color:#e0e0e0;font-size:12px;font-weight:700">' + (a.headline || '?') + '</div>';
|
||||
if (a.summary) {
|
||||
html += '<div style="color:#bbb;font-size:11px;margin-top:2px">' + a.summary + '</div>';
|
||||
}
|
||||
html += '<div style="color:#666;font-size:9px;margin-top:2px">';
|
||||
if (a.source) html += a.source;
|
||||
if (a.date) html += ' | ' + new Date(a.date).toLocaleDateString('de-DE');
|
||||
html += '</div></div>';
|
||||
});
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
this._viewer.trackedEntity = undefined;
|
||||
this._viewer.selectedEntity = new Cesium.Entity({
|
||||
name: (p.name || '?') + ' — ' + (p.incident_title || ''),
|
||||
description: html,
|
||||
});
|
||||
},
|
||||
|
||||
_render() {
|
||||
if (!this._points) return;
|
||||
this._points.removeAll();
|
||||
this._labels.removeAll();
|
||||
|
||||
var colors = {
|
||||
'primary': Cesium.Color.fromCssColorString('#ff2222'),
|
||||
'secondary': Cesium.Color.fromCssColorString('#ff8800'),
|
||||
'tertiary': Cesium.Color.fromCssColorString('#4499ff'),
|
||||
'mentioned': Cesium.Color.fromCssColorString('#888888'),
|
||||
};
|
||||
|
||||
for (var i = 0; i < this._data.length; i++) {
|
||||
var f = this._data[i];
|
||||
var coords = f.geometry.coordinates;
|
||||
var p = f.properties;
|
||||
var cat = p.category || 'mentioned';
|
||||
var color = colors[cat] || colors.mentioned;
|
||||
var color = colors[p.category] || colors.mentioned;
|
||||
var count = p.article_count || 1;
|
||||
var size = Math.min(Math.max(Math.sqrt(count) * 2.5, 4), 14);
|
||||
|
||||
this._points.add({
|
||||
position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 1000),
|
||||
pixelSize: size,
|
||||
color: color,
|
||||
outlineColor: Cesium.Color.WHITE.withAlpha(0.6),
|
||||
outlineWidth: 1,
|
||||
pixelSize: size, color: color,
|
||||
outlineColor: Cesium.Color.WHITE.withAlpha(0.6), outlineWidth: 1,
|
||||
});
|
||||
|
||||
if (count >= 2) {
|
||||
this._labels.add({
|
||||
position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 1000),
|
||||
text: (p.name || '?') + ' (' + count + ')',
|
||||
font: '11px sans-serif',
|
||||
fillColor: color,
|
||||
outlineColor: Cesium.Color.BLACK,
|
||||
outlineWidth: 3,
|
||||
font: '11px sans-serif', fillColor: color,
|
||||
outlineColor: Cesium.Color.BLACK, outlineWidth: 3,
|
||||
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||||
pixelOffset: new Cesium.Cartesian2(0, -size - 6),
|
||||
scale: 0.8,
|
||||
pixelOffset: new Cesium.Cartesian2(0, -size - 6), scale: 0.8,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 3000000),
|
||||
});
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren