2be1f6a37d
PANEL (links): - 240px breit (war 200px) - Checkboxen 16x16px (war 12x12) - Dots 10px (war 8px) - Layer-Namen 13px (war 11px) - Counts 12px (war 10px) - Mehr Padding pro Toggle-Zeile INFOBOX (bei Klick): - Links neben dem Panel platziert (254px vom Rand) - 420px breit, max 60vh hoch, scrollbar - Kollidiert nicht mit Panel oder Sidebar - Groesserer Titel (14px), mehr Padding PUNKTE AUF DEM GLOBUS: - Flugzeuge: 3/4/5px (war 2/2.5/3) - Schiffe: 3/4/5px (war 2/2.5/3) - Militaer: 6px (war 4) - Katastrophen: 10px (war 8) - Erdbeben: 6-15px (war 4-10) - GDELT: 7px (war 5) - ISS: 14px (war 10) - Cluster: +30% groesser HEADER + FOOTER: - Header 48px (war 44px) - Footer 32px (war 28px) - Titel 15px, Stats 12px - Lage-Select + Suche groesser
89 Zeilen
4.2 KiB
JavaScript
89 Zeilen
4.2 KiB
JavaScript
const MilitaryLayer = {
|
|
_viewer: null, _points: null, _labels: null, _interval: null, _count: 0, _data: [],
|
|
_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(); }, 20000);
|
|
this._handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
|
this._handler.setInputAction(function(c) { self._onClick(c.position); }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
},
|
|
|
|
stop() {
|
|
if (this._interval) { clearInterval(this._interval); this._interval = null; }
|
|
if (this._handler) { this._handler.destroy(); this._handler = null; }
|
|
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 = [];
|
|
},
|
|
|
|
_onClick(pos) {
|
|
if (!this._viewer || !this._data.length) return;
|
|
var cart = this._viewer.scene.pickPosition(pos);
|
|
if (!cart) { var ray = this._viewer.scene.camera.getPickRay(pos); cart = this._viewer.scene.globe.pick(ray, this._viewer.scene); }
|
|
if (!cart) return;
|
|
var c = Cesium.Cartographic.fromCartesian(cart);
|
|
var lat = Cesium.Math.toDegrees(c.latitude), lon = Cesium.Math.toDegrees(c.longitude);
|
|
var best = null, bd = 999;
|
|
for (var i = 0; i < this._data.length; i++) {
|
|
var a = this._data[i], d = Math.abs(a.lat-lat) + Math.abs(a.lon-lon);
|
|
if (d < bd) { bd = d; best = a; }
|
|
}
|
|
if (best && bd < 1) {
|
|
var cs = best.flight || best.reg || best.hex || '?';
|
|
this._viewer.trackedEntity = undefined;
|
|
this._viewer.selectedEntity = new Cesium.Entity({
|
|
name: 'MIL: ' + cs,
|
|
description: '<div style="font-family:monospace;font-size:13px;color:#ff4444;padding:8px">' +
|
|
'<strong>' + cs + '</strong><br>REG: ' + (best.reg||'?') + '<br>TYP: ' + (best.type||'?') +
|
|
'<br>ALT: ' + (best.alt_baro||'?') + ' ft<br>SPD: ' + (best.gs||'?') + ' kts' +
|
|
'<br>SQK: ' + (best.squawk||'?') + '</div>',
|
|
});
|
|
}
|
|
},
|
|
|
|
_fetch() {
|
|
var self = this;
|
|
var statusEl = document.getElementById('status-military');
|
|
if (statusEl) { statusEl.textContent = 'Lade...'; statusEl.classList.add('active'); }
|
|
fetch('/api/military')
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
self._data = data.ac || [];
|
|
self._count = self._data.length;
|
|
self._render();
|
|
if (statusEl) statusEl.textContent = self._count + ' Militaer';
|
|
})
|
|
.catch(function() { if (statusEl) statusEl.textContent = 'Fehler'; })
|
|
.finally(function() { setTimeout(function() { if (statusEl) statusEl.classList.remove('active'); }, 5000); });
|
|
},
|
|
|
|
_render() {
|
|
if (!this._points) return;
|
|
this._points.removeAll();
|
|
this._labels.removeAll();
|
|
var red = Cesium.Color.fromCssColorString('#ff2222');
|
|
for (var i = 0; i < this._data.length; i++) {
|
|
var a = this._data[i];
|
|
var altM = (a.alt_baro || 10000) * 0.3048;
|
|
this._points.add({ position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, altM), pixelSize: 6, color: red });
|
|
var cs = a.flight || a.reg || '';
|
|
if (cs) {
|
|
this._labels.add({
|
|
position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, altM),
|
|
text: cs, font: '9px monospace',
|
|
fillColor: red.withAlpha(0.8), outlineColor: Cesium.Color.BLACK, outlineWidth: 2,
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
pixelOffset: new Cesium.Cartesian2(6, -3), scale: 0.7,
|
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500000),
|
|
});
|
|
}
|
|
}
|
|
},
|
|
};
|