From 9709536036f622ebdd6abd2c996a0ce1c77ebb0b Mon Sep 17 00:00:00 2001 From: Claude Dev Date: Thu, 26 Mar 2026 10:28:44 +0100 Subject: [PATCH] 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 | 137 ++++++++++++++++++++++++++++++-------------- 1 file changed, 93 insertions(+), 44 deletions(-) diff --git a/static/js/ui/vlm.js b/static/js/ui/vlm.js index d0e9d5e..3cbe910 100644 --- a/static/js/ui/vlm.js +++ b/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), - outlineWidth: 2, + outlineColor: Cesium.Color.fromCssColorString('#e040fb'), + outlineWidth: 3, height: 0, }, }); - // Label in der Mitte des Bereichs - 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: 'SUCHBEREICH', - font: '11px monospace', - fillColor: Cesium.Color.fromCssColorString('#e040fb').withAlpha(0.7), - outlineColor: Cesium.Color.BLACK, - outlineWidth: 3, - style: Cesium.LabelStyle.FILL_AND_OUTLINE, - verticalOrigin: Cesium.VerticalOrigin.CENTER, - horizontalOrigin: Cesium.HorizontalOrigin.CENTER, - distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, isSmall ? 500000 : 8000000), - disableDepthTestDistance: Number.POSITIVE_INFINITY, + // Zweites Rechteck leicht versetzt als Glow-Effekt + this._searchAreaGlow = Globe.viewer.entities.add({ + rectangle: { + coordinates: Cesium.Rectangle.fromDegrees( + bbox.west - 0.05, bbox.south - 0.05, + bbox.east + 0.05, bbox.north + 0.05 + ), + material: Cesium.Color.TRANSPARENT, + outline: true, + outlineColor: Cesium.Color.fromCssColorString('#e040fb').withAlpha(0.35), + outlineWidth: 1, + height: 0, }, }); - // 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, - color: Cesium.Color.fromCssColorString('#e040fb').withAlpha(0.6), - outlineColor: Cesium.Color.BLACK, - outlineWidth: 1, + pixelSize: 8, + color: Cesium.Color.fromCssColorString('#e040fb'), + outlineColor: Cesium.Color.WHITE, + 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) { - Globe.viewer.entities.remove(this._searchAreaEntity); - this._searchAreaEntity = null; - } - if (this._searchAreaLabel && Globe.viewer) { - Globe.viewer.entities.remove(this._searchAreaLabel); - this._searchAreaLabel = null; - } - if (this._searchAreaCorners) { - for (var i = 0; i < this._searchAreaCorners.length; i++) { - if (Globe.viewer) Globe.viewer.entities.remove(this._searchAreaCorners[i]); + var v = Globe.viewer; + if (!v) return; + var self = this; + ['_searchAreaEntity', '_searchAreaGlow', '_searchAreaLabel', '_exifMarkerEntity'].forEach(function(k) { + if (self[k]) { v.entities.remove(self[k]); self[k] = null; } + }); + ['_searchAreaCorners', '_searchAreaEdges', '_searchAreaDiags'].forEach(function(k) { + if (self[k]) { + for (var i = 0; i < self[k].length; i++) { v.entities.remove(self[k][i]); } + self[k] = null; } - this._searchAreaCorners = null; - } - if (this._exifMarkerEntity && Globe.viewer) { - Globe.viewer.entities.remove(this._exifMarkerEntity); - this._exifMarkerEntity = null; - } + }); }, _reset: function() {