fix: Suchbereich deutlich sichtbarer

- Kraeftigere Fuellung (0.15-0.25 statt 0.06-0.12)
- Explizite Kanten-Polylines (width 3, 90% Opazitaet)
- Aeusserer Glow-Rahmen als zweites Rechteck
- Horizontale Schraffur-Linien fuer taktischen Look
- Groessere Eckpunkte (8px, weisser Rand)
- Label: fett, 13px, mit Hintergrund-Box
- Sichtbar bis 12.000km Entfernung

static/js/ui/vlm.js

@@ -465,41 +465,55 @@ const VlmUI = {
         if (!Globe.viewer || !bbox) return;
 
         var isSmall = (Math.abs(bbox.north - bbox.south) < 2 && Math.abs(bbox.east - bbox.west) < 2);
-        var fillAlpha = isSmall ? 0.12 : 0.06;
-        var outlineAlpha = isSmall ? 0.7 : 0.4;
 
+        // Helle, klar sichtbare Fuellung
         this._searchAreaEntity = Globe.viewer.entities.add({
             name: 'Suchbereich: ' + label,
             rectangle: {
                 coordinates: Cesium.Rectangle.fromDegrees(bbox.west, bbox.south, bbox.east, bbox.north),
-                material: Cesium.Color.fromCssColorString('#e040fb').withAlpha(fillAlpha),
+                material: Cesium.Color.fromCssColorString('#e040fb').withAlpha(isSmall ? 0.25 : 0.15),
                 outline: true,
-                outlineColor: Cesium.Color.fromCssColorString('#e040fb').withAlpha(outlineAlpha),
+                outlineColor: Cesium.Color.fromCssColorString('#e040fb'),
-                outlineWidth: 2,
+                outlineWidth: 3,
                 height: 0,
             },
         });
 
-        // Label in der Mitte des Bereichs
+        // Zweites Rechteck leicht versetzt als Glow-Effekt
-        var centerLat = (bbox.south + bbox.north) / 2;
+        this._searchAreaGlow = Globe.viewer.entities.add({
-        var centerLon = (bbox.west + bbox.east) / 2;
+            rectangle: {
-        this._searchAreaLabel = Globe.viewer.entities.add({
+                coordinates: Cesium.Rectangle.fromDegrees(
-            position: Cesium.Cartesian3.fromDegrees(centerLon, centerLat, 0),
+                    bbox.west - 0.05, bbox.south - 0.05,
-            label: {
+                    bbox.east + 0.05, bbox.north + 0.05
-                text: 'SUCHBEREICH',
+                ),
-                font: '11px monospace',
+                material: Cesium.Color.TRANSPARENT,
-                fillColor: Cesium.Color.fromCssColorString('#e040fb').withAlpha(0.7),
+                outline: true,
-                outlineColor: Cesium.Color.BLACK,
+                outlineColor: Cesium.Color.fromCssColorString('#e040fb').withAlpha(0.35),
-                outlineWidth: 3,
+                outlineWidth: 1,
-                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                height: 0,
-                verticalOrigin: Cesium.VerticalOrigin.CENTER,
-                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, isSmall ? 500000 : 8000000),
-                disableDepthTestDistance: Number.POSITIVE_INFINITY,
             },
         });
 
-        // Eckpunkte-Markierungen
+        // Diagonale Linien fuer taktisches Schraffur-Gefuehl
+        this._searchAreaDiags = [];
+        var steps = isSmall ? 6 : 12;
+        for (var s = 1; s < steps; s++) {
+            var t = s / steps;
+            // Horizontale Linien
+            var lineLat = bbox.south + t * (bbox.north - bbox.south);
+            this._searchAreaDiags.push(Globe.viewer.entities.add({
+                polyline: {
+                    positions: Cesium.Cartesian3.fromDegreesArray([
+                        bbox.west, lineLat, bbox.east, lineLat
+                    ]),
+                    width: 1,
+                    material: Cesium.Color.fromCssColorString('#e040fb').withAlpha(0.08),
+                    clampToGround: true,
+                },
+            }));
+        }
+
+        // Eckpunkte - groesser und heller
         this._searchAreaCorners = [];
         var corners = [
             [bbox.west, bbox.south], [bbox.east, bbox.south],
@@ -509,16 +523,57 @@ const VlmUI = {
             this._searchAreaCorners.push(Globe.viewer.entities.add({
                 position: Cesium.Cartesian3.fromDegrees(corners[i][0], corners[i][1], 0),
                 point: {
-                    pixelSize: 4,
+                    pixelSize: 8,
-                    color: Cesium.Color.fromCssColorString('#e040fb').withAlpha(0.6),
+                    color: Cesium.Color.fromCssColorString('#e040fb'),
-                    outlineColor: Cesium.Color.BLACK,
+                    outlineColor: Cesium.Color.WHITE,
-                    outlineWidth: 1,
+                    outlineWidth: 2,
                     disableDepthTestDistance: Number.POSITIVE_INFINITY,
                 },
             }));
         }
 
-        // Kamera auf den Bereich ausrichten wenn kein EXIF-GPS (EXIF fliegt bereits hin)
+        // Kantenlinien explizit als Polylines (deutlich sichtbarer als rectangle outline)
+        this._searchAreaEdges = [];
+        var edgePositions = [
+            [bbox.west, bbox.south, bbox.east, bbox.south],
+            [bbox.east, bbox.south, bbox.east, bbox.north],
+            [bbox.east, bbox.north, bbox.west, bbox.north],
+            [bbox.west, bbox.north, bbox.west, bbox.south],
+        ];
+        for (var e = 0; e < edgePositions.length; e++) {
+            this._searchAreaEdges.push(Globe.viewer.entities.add({
+                polyline: {
+                    positions: Cesium.Cartesian3.fromDegreesArray(edgePositions[e]),
+                    width: 3,
+                    material: Cesium.Color.fromCssColorString('#e040fb').withAlpha(0.9),
+                    clampToGround: true,
+                },
+            }));
+        }
+
+        // Label - groesser und deutlicher
+        var centerLat = (bbox.south + bbox.north) / 2;
+        var centerLon = (bbox.west + bbox.east) / 2;
+        this._searchAreaLabel = Globe.viewer.entities.add({
+            position: Cesium.Cartesian3.fromDegrees(centerLon, centerLat, 0),
+            label: {
+                text: '\u25A0 SUCHBEREICH',
+                font: 'bold 13px monospace',
+                fillColor: Cesium.Color.fromCssColorString('#e040fb'),
+                outlineColor: Cesium.Color.BLACK,
+                outlineWidth: 4,
+                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                verticalOrigin: Cesium.VerticalOrigin.CENTER,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, isSmall ? 800000 : 12000000),
+                disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                backgroundColor: Cesium.Color.fromCssColorString('#e040fb').withAlpha(0.15),
+                showBackground: true,
+                backgroundPadding: new Cesium.Cartesian2(8, 4),
+            },
+        });
+
+        // Kamera auf den Bereich ausrichten wenn kein EXIF-GPS
         if (!isSmall) {
             Globe.viewer.camera.flyTo({
                 destination: Cesium.Rectangle.fromDegrees(bbox.west - 2, bbox.south - 2, bbox.east + 2, bbox.north + 2),
@@ -528,24 +583,18 @@ const VlmUI = {
     },
 
     _clearSearchArea: function() {
-        if (this._searchAreaEntity && Globe.viewer) {
+        var v = Globe.viewer;
-            Globe.viewer.entities.remove(this._searchAreaEntity);
+        if (!v) return;
-            this._searchAreaEntity = null;
+        var self = this;
-        }
+        ['_searchAreaEntity', '_searchAreaGlow', '_searchAreaLabel', '_exifMarkerEntity'].forEach(function(k) {
-        if (this._searchAreaLabel && Globe.viewer) {
+            if (self[k]) { v.entities.remove(self[k]); self[k] = null; }
-            Globe.viewer.entities.remove(this._searchAreaLabel);
+        });
-            this._searchAreaLabel = null;
+        ['_searchAreaCorners', '_searchAreaEdges', '_searchAreaDiags'].forEach(function(k) {
-        }
+            if (self[k]) {
-        if (this._searchAreaCorners) {
+                for (var i = 0; i < self[k].length; i++) { v.entities.remove(self[k][i]); }
-            for (var i = 0; i < this._searchAreaCorners.length; i++) {
+                self[k] = null;
-                if (Globe.viewer) Globe.viewer.entities.remove(this._searchAreaCorners[i]);
-            }
-            this._searchAreaCorners = null;
-        }
-        if (this._exifMarkerEntity && Globe.viewer) {
-            Globe.viewer.entities.remove(this._exifMarkerEntity);
-            this._exifMarkerEntity = null;
             }
+        });
     },
 
     _reset: function() {