Fix #12044: fix wfs layer hidden in 3D + scale arrow not rendering (#12155)

* fix #12044: fix wfs layer hidden in 3D + scale arrow not rendering

- fix not hidding wfs layers with scale limits
- handle showing arrow for current scale in scales DD for scaleDenominator

* - Fix: Arrow UI disappears when zooming out in 3D styler view

* - fix the scale limit filter to exclude max value and include min scale value

* - for 3D, ehnace getMapScaleForCesium to take camera prependicular poosition into account
- enhance calc. scale value in geoStylerStyleToOlParserStyleFct to match the predefined scale values list
- fix FE unit test

* - fix FE unit test

* - add unit tests for getMapScaleForCesium and isCameraPerpendicularToSurface

Author: mahmoudadel54

web/client/components/map/cesium/plugins/WFSLayer.js

@@ -70,7 +70,8 @@ const createLayer = (options, map) => {
         id: options?.id,
         map: map,
         opacity: options.opacity,
-        queryable: options.queryable === undefined || options.queryable
+        queryable: options.queryable === undefined || options.queryable,
+        styleRules: options?.style?.body?.rules || []
     });
     let loader;
     let loadingBbox;
@@ -187,6 +188,11 @@ Layers.registerType('wfs', {
             return createLayer(newOptions, map);
         }
         if (layer?.styledFeatures && !isEqual(newOptions.style, oldOptions.style)) {
+            // update style rules here
+            if (!isEqual(newOptions?.style?.body?.rules, oldOptions?.style?.body?.rules)) {
+                let styleRules = newOptions?.style?.body?.rules || [];
+                layer.styledFeatures._setStyleRules(styleRules);
+            }
             layerToGeoStylerStyle(newOptions)
                 .then((style) => {
                     getStyle(applyDefaultStyleToVectorLayer({

web/client/plugins/styleeditor/VectorStyleEditor.jsx

@@ -30,6 +30,9 @@ import { classificationVector } from '../../api/StyleEditor';
 import SLDService from '../../api/SLDService';
 import { classifyGeoJSON, availableMethods } from '../../api/GeoJSONClassification';
 import { getLayerJSONFeature } from '../../observables/wfs';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { currentZoomLevelSelector, scalesSelector } from '../../selectors/map';
 
 const { getColors } = SLDService;
 
@@ -84,7 +87,9 @@ function VectorStyleEditor({
         'Courier New',
         'Brush Script MT'
     ],
-    onUpdateNode = () => {}
+    onUpdateNode = () => {},
+    scales = [],
+    zoom = 0
 }) {
 
     const request = capabilitiesRequest[layer?.type];
@@ -253,9 +258,15 @@ function VectorStyleEditor({
                 simple: !['vector', 'wfs'].includes(layer?.type),
                 supportedSymbolizerMenuOptions: ['Simple', 'Extrusion', 'Classification'],
                 fonts,
-                enableFieldExpression: ['vector', 'wfs'].includes(layer.type)
+                enableFieldExpression: ['vector', 'wfs'].includes(layer.type),
+                scales,
+                zoom: Math.round(zoom)   // passing this for showing arrow of current scale for ScaleDenominator
             }}
         />
     );
 }
-export default VectorStyleEditor;
+const ConnectedVectorStyleEditor = connect(createSelector([scalesSelector, currentZoomLevelSelector], (scales, zoom) => ({
+    scales: scales.map(scale => Math.round(scale)),
+    zoom
+})))(VectorStyleEditor);
+export default ConnectedVectorStyleEditor;

web/client/utils/MapUtils.js

@@ -346,6 +346,76 @@ export function getScale(projection, dpi, resolution) {
     const dpu = dpi2dpu(dpi, projection);
     return resolution * dpu;
 }
+
+/**
+ * Checks if the camera is looking perpendicular (nadir) to the surface
+ * @param {Cesium.Camera} camera - The Cesium camera
+ * @param {Cesium.Cartesian3} position - Position on the globe (Cartesian3)
+ * @param {Cesium.Ellipsoid} ellipsoid - The ellipsoid (usually scene.globe.ellipsoid)
+ * @param {number} threshold - Cosine threshold (0.95 = ~18°, 0.99 = ~8°)
+ * @returns {boolean} True if camera is approximately perpendicular
+ */
+export function isCameraPerpendicularToSurface(camera, position, ellipsoid, threshold = 0.95) {
+    const surfaceNormal = ellipsoid.geodeticSurfaceNormal(position);
+    const cameraDirection = camera.direction;
+
+    // Dot product: -1 = exactly opposite (straight down), 0 = parallel to surface
+    const dot = Cesium.Cartesian3.dot(cameraDirection, surfaceNormal);
+
+    // Check if dot product is close to -1 (camera looking straight down)
+    return dot < -threshold;
+}
+
+/**
+ * Calculates the map scale denominator at the center of the Cesium viewer's screen.
+ *
+ * * @param {Cesium.Viewer} viewer - The Cesium Viewer instance containing the scene and camera.
+ * @returns {number} The map scale denominator (M in 1:M) at the screen center.
+ *                   Returns a fallback scale based on camera height if the camera
+ *                   is looking at space or the globe intersection fails.
+ **/
+export function getMapScaleForCesium(viewer) {
+    const FALLBACK_EARTH_CIRCUMFERENCE_METERS = 80000000;
+    const cesiumDefaultProj = "EPSG:3857";
+    const scene = viewer.scene;
+    const camera = scene.camera;
+    const canvas = scene.canvas;
+    const ellipsoid = scene.globe.ellipsoid;
+    // 1. Get two points at the center of the screen, 1 pixel apart horizontally
+    const centerX = Math.floor(canvas.clientWidth / 2);
+    const centerY = Math.floor(canvas.clientHeight / 2);
+
+    const leftPoint = new Cesium.Cartesian2(centerX, centerY);
+    const rightPoint = new Cesium.Cartesian2(centerX + 1, centerY);
+
+    // 2. Convert screen pixels to Globe positions (Cartesian3)
+    const leftRay = camera.getPickRay(leftPoint);
+    const rightRay = camera.getPickRay(rightPoint);
+
+    const leftPos = scene.globe.pick(leftRay, scene);
+    const rightPos = scene.globe.pick(rightRay, scene);
+
+    // Check if camera is perpendicular (only if we have a valid position to test against)
+    const isPerpendicular = Cesium.defined(leftPos) ? isCameraPerpendicularToSurface(camera, leftPos, ellipsoid, 0.95) : false;
+
+    if (!Cesium.defined(leftPos) || !Cesium.defined(rightPos) || isPerpendicular) {
+        console.warn('Camera is looking at space/sky or is perpendicular');
+        const cameraPosition = camera.positionCartographic;
+        const currentZoom = Math.log2(FALLBACK_EARTH_CIRCUMFERENCE_METERS / (cameraPosition.height)) + 1;
+        const resolutions = getResolutions();
+        const resolution = resolutions[Math.round(currentZoom)];
+        const scaleVal = getScale(cesiumDefaultProj, DEFAULT_SCREEN_DPI, resolution);
+        return Math.round(scaleVal ?? 0);
+    }
+
+    const leftCartographic = scene.globe.ellipsoid.cartesianToCartographic(leftPos);
+    const rightCartographic = scene.globe.ellipsoid.cartesianToCartographic(rightPos);
+
+    const geodesic = new Cesium.EllipsoidGeodesic(leftCartographic, rightCartographic);
+    const resolution = geodesic.surfaceDistance; // This is meters per 1 pixel [resolution]
+    const scaleValue = getScale(cesiumDefaultProj, DEFAULT_SCREEN_DPI, resolution);
+    return Math.round(scaleValue ?? 0);
+}
 /**
  * get random coordinates within CRS extent
  * @param {string} crs the code of the projection for example EPSG:4346

web/client/utils/__tests__/MapUtils-test.js

@@ -6,6 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import expect from 'expect';
+import * as Cesium from 'cesium';
 
 import { keys, sortBy } from 'lodash';
 
@@ -47,7 +48,9 @@ import {
     recursiveIsChangedWithRules,
     filterFieldByRules,
     prepareObjectEntries,
-    parseFieldValue
+    parseFieldValue,
+    isCameraPerpendicularToSurface,
+    getMapScaleForCesium
 } from '../MapUtils';
 import { VisualizationModes } from '../MapTypeUtils';
 
@@ -2560,3 +2563,127 @@ describe('prepareObjectEntries', () => {
         expect(entries).toEqual([]);
     });
 });
+describe('test calc scale utils for cesium', () => {
+    it('isCameraPerpendicularToSurface - nadir (straight down) returns true', () => {
+        const ellipsoid = Cesium.Ellipsoid.WGS84;
+        const position = Cesium.Cartesian3.fromDegrees(0, 0);
+        const surfaceNormal = ellipsoid.geodeticSurfaceNormal(position);
+
+        // Camera direction opposite to surface normal = looking straight down
+        const camera = {
+            direction: Cesium.Cartesian3.negate(surfaceNormal, new Cesium.Cartesian3())
+        };
+
+        const result = isCameraPerpendicularToSurface(camera, position, ellipsoid, 0.95);
+        expect(result).toBe(true);
+    });
+
+    it('isCameraPerpendicularToSurface - oblique angle returns false', () => {
+        const ellipsoid = Cesium.Ellipsoid.WGS84;
+        const position = Cesium.Cartesian3.fromDegrees(0, 0);
+
+        // Tilted camera direction (~45° from nadir, dot ≈ -0.7)
+        const camera = {
+            direction: new Cesium.Cartesian3(0, -0.7, -0.7)
+        };
+
+        const result = isCameraPerpendicularToSurface(camera, position, ellipsoid, 0.95);
+        expect(result).toBe(false);
+    });
+
+    it('isCameraPerpendicularToSurface - horizontal view returns false', () => {
+        const ellipsoid = Cesium.Ellipsoid.WGS84;
+        const position = Cesium.Cartesian3.fromDegrees(0, 0);
+
+        // Camera looking horizontally (dot = 0)
+        const camera = {
+            direction: new Cesium.Cartesian3(1, 0, 0)
+        };
+
+        const result = isCameraPerpendicularToSurface(camera, position, ellipsoid, 0.95);
+        expect(result).toBe(false);
+    });
+
+    it('getMapScaleForCesium - returns number when camera looks at sky', () => {
+    // Minimal stub: globe.pick returns undefined = looking at sky
+        const mockViewer = {
+            scene: {
+                canvas: { clientWidth: 800, clientHeight: 600 },
+                camera: {
+                    direction: new Cesium.Cartesian3(0, 0, 1),
+                    positionCartographic: { height: 10000 },
+                    getPickRay: () => ({})
+                },
+                globe: {
+                    ellipsoid: Cesium.Ellipsoid.WGS84,
+                    pick: () => undefined
+                }
+            }
+        };
+
+        const result = getMapScaleForCesium(mockViewer);
+
+        expect(typeof result).toBe('number');
+        expect(Number.isInteger(result)).toBe(true);
+        expect(result).toBeGreaterThan(0);
+    });
+
+    it('getMapScaleForCesium - returns number with valid positions + perpendicular camera', () => {
+    // Minimal stub: valid positions + perpendicular camera → triggers fallback by design
+        const mockPos = Cesium.Cartesian3.fromDegrees(0, 0, 0);
+        const mockViewer = {
+            scene: {
+                canvas: { clientWidth: 800, clientHeight: 600 },
+                camera: {
+                    direction: new Cesium.Cartesian3(0, 0, -1), // straight down
+                    positionCartographic: { height: 5000 },
+                    getPickRay: () => ({})
+                },
+                globe: {
+                    ellipsoid: Cesium.Ellipsoid.WGS84,
+                    pick: () => mockPos,
+                    cartesianToCartographic: () => ({
+                        longitude: 0,
+                        latitude: 0,
+                        height: 0
+                    })
+                }
+            }
+        };
+
+        const result = getMapScaleForCesium(mockViewer);
+
+        expect(typeof result).toBe('number');
+        expect(Number.isInteger(result)).toBe(true);
+    });
+
+    it('getMapScaleForCesium - returns number with valid positions + oblique camera', () => {
+    // Minimal stub: valid positions + oblique camera → uses EllipsoidGeodesic path
+        const mockPos = Cesium.Cartesian3.fromDegrees(0, 0, 0);
+        const mockViewer = {
+            scene: {
+                canvas: { clientWidth: 800, clientHeight: 600 },
+                camera: {
+                    direction: new Cesium.Cartesian3(0, -0.5, -0.8), // tilted
+                    positionCartographic: { height: 5000 },
+                    getPickRay: () => ({})
+                },
+                globe: {
+                    ellipsoid: Cesium.Ellipsoid.WGS84,
+                    pick: () => mockPos,
+                    cartesianToCartographic: () => ({
+                        longitude: 0,
+                        latitude: 0,
+                        height: 0
+                    })
+                }
+            }
+        };
+
+        const result = getMapScaleForCesium(mockViewer);
+
+        expect(typeof result).toBe('number');
+        expect(Number.isInteger(result)).toBe(true);
+    });
+});
+

web/client/utils/styleparser/OLStyleParser.js

@@ -66,6 +66,7 @@ import { drawIcons } from './IconUtils';
 
 import isString from 'lodash/isString';
 import { geometryFunctionsLibrary } from './GeometryFunctionsUtils';
+import { DEFAULT_SCREEN_DPI, getScale } from '../MapUtils';
 
 const getGeometryFunction = geometryFunctionsLibrary.openlayers({
     Point: OlGeomPoint,
@@ -443,14 +444,9 @@ export class OlStyleParser {
                     this._getMap = () => map;
                     const styles = [];
 
-                    // calculate scale for resolution (from ol-util MapUtil)
-                    const units = map
-                        ? map.getView().getProjection().getUnits()
-                        : 'm';
-                    const dpi = 25.4 / 0.28;
-                    const mpu = METERS_PER_UNIT[units];
-                    const inchesPerMeter = 39.37;
-                    const scale = resolution * mpu * inchesPerMeter * dpi;
+                    // instead of using ol0util MapUtil -> calc. scale value using getScale() to be matched with the predefined scale list values
+                    const projection = map?.getView()?.getProjection()?.getCode() || "EPSG:3857";
+                    const scale = Math.round(getScale(projection, DEFAULT_SCREEN_DPI, resolution));
 
                     rules.forEach((rule) => {
                         // handling scale denominator

web/client/utils/styleparser/StyleParserUtils.js

@@ -425,6 +425,29 @@ export const geoStylerStyleFilter = (feature, filter) => {
     }
     return matchesFilter;
 };
+/**
+ * Checks if a GeoStyler rule should be visible at the current map scale.
+ *
+ * @param {Object} [rule={}] - GeoStyler rule with optional scaleDenominator
+ * @param {Object} [rule.scaleDenominator] - Scale constraints { min?, max? }
+ * @param {number} [mapViewScale] - Current map scale denominator (1 : X)
+ * @returns {boolean} true if rule should be applied at this scale
+ * @example
+ * geoStylerScaleDenominatorFilter(
+ *   { scaleDenominator: { min: 1000, max: 10000 } },
+ *   5000
+ * ); // → true
+ */
+export const geoStylerScaleDenominatorFilter = (rule = {}, mapViewScale) => {
+    if (rule?.scaleDenominator && mapViewScale) {
+        const {min, max} = rule?.scaleDenominator;
+        if ((min !== undefined && mapViewScale < min) ||
+        (max !== undefined && mapViewScale >= max)) {
+            return false;
+        }
+    }
+    return true;
+};
 /**
  * parse a string template and replace the placeholders with feature properties
  * @param {object} feature a GeoJSON feature

web/client/utils/styleparser/__tests__/StyleParserUtils-test.js

@@ -167,4 +167,48 @@ describe("StyleParserUtils ", () => {
         expect(width).toBe(annotationSymbolizer.size);
         expect(height).toBe(annotationSymbolizer.size);
     });
+    // tests for geoStylerScaleDenominatorFilter
+    describe('geoStylerScaleDenominatorFilter', () => {
+
+        it('returns true when scale is within [min, max] range -> max excluded and min included', () => {
+            const rule = { scaleDenominator: { min: 1000, max: 10000 } };
+            expect(geoStylerScaleDenominatorFilter(rule, 1000)).toBe(true);  // min included
+            expect(geoStylerScaleDenominatorFilter(rule, 5000)).toBe(true);
+            expect(geoStylerScaleDenominatorFilter(rule, 10000)).toBe(false); // max is excluded
+        });
+
+        it('returns false when scale is outside [min, max] range', () => {
+            const rule = { scaleDenominator: { min: 1000, max: 10000 } };
+            expect(geoStylerScaleDenominatorFilter(rule, 500)).toBe(false);
+            expect(geoStylerScaleDenominatorFilter(rule, 50000)).toBe(false);
+        });
+
+        it('works with only min or only max defined', () => {
+            const minOnly = { scaleDenominator: { min: 5000 } };
+            const maxOnly = { scaleDenominator: { max: 5000 } };
+
+            expect(geoStylerScaleDenominatorFilter(minOnly, 10000)).toBe(true);
+            expect(geoStylerScaleDenominatorFilter(minOnly, 1000)).toBe(false);
+            expect(geoStylerScaleDenominatorFilter(maxOnly, 1000)).toBe(true);
+            expect(geoStylerScaleDenominatorFilter(maxOnly, 10000)).toBe(false);
+        });
+
+        it('returns true when no scale filter or no mapViewScale provided', () => {
+            expect(geoStylerScaleDenominatorFilter({}, 5000)).toBe(true);
+            expect(geoStylerScaleDenominatorFilter({ scaleDenominator: {} }, 5000)).toBe(true);
+            expect(geoStylerScaleDenominatorFilter({ scaleDenominator: { min: 1000 } }, undefined)).toBe(true);
+        });
+
+        it('works with real-world rule structure', () => {
+            const rule = {
+                symbolizerId: "rule-001",
+                kind: "Fill",
+                color: "#3388FF",
+                scaleDenominator: { min: 2500, max: 25000 }
+            };
+            expect(geoStylerScaleDenominatorFilter(rule, 1000)).toBe(false);
+            expect(geoStylerScaleDenominatorFilter(rule, 10000)).toBe(true);
+            expect(geoStylerScaleDenominatorFilter(rule, 50000)).toBe(false);
+        });
+    });
 });