Fix #9775 Visibility limits not working in 3D for detached layers

web/client/components/TOC/fragments/settings/VisibilityLimitsForm.jsx

@@ -254,13 +254,6 @@ function VisibilityLimitsForm({
         clearMessages();
     }, [ dpu,  resolutionString ]);
 
-    useEffect(() => {
-        if (isMounted.current && (!isNil(maxResolution) || !isNil(minResolution))) {
-            setCapabilitiesMessage(maxResolution, minResolution);
-            setRangeError(maxResolution, minResolution);
-        }
-    }, [isMounted]);
-
     return (
         <div className="ms-visibility-limits-form">
             <div className="ms-visibility-limits-form-title" style={{ display: 'flex', alignItems: 'center' }}>

web/client/components/TOC/fragments/settings/__tests__/VisibilityLimitsForm-test.jsx

@@ -47,8 +47,6 @@ describe('VisibilityLimitsForm', () => {
             '1 : 37795',
             'layerProperties.visibilityLimits.scale'
         ]);
-        const message = document.querySelector('.alert-success');
-        expect(message.textContent).toBe('layerProperties.visibilityLimits.serverValuesUpdate');
     });
     it('should render maxResolution and minResolution labels as resolution', () => {
         const layer = {

web/client/components/map/cesium/Layer.jsx

@@ -25,8 +25,11 @@ class CesiumLayer extends React.Component {
     };
 
     componentDidMount() {
-        this.createLayer(this.props.type, this.props.options, this.props.position, this.props.map, this.props.securityToken);
-        if (this.props.options && this.layer && this.getVisibilityOption(this.props)) {
+        // initial visibility should also take into account the visibility limits
+        // in particular for detached layers (eg. Vector, WFS, 3D Tiles, ...)
+        const visibility = this.getVisibilityOption(this.props);
+        this.createLayer(this.props.type, { ...this.props.options, visibility }, this.props.position, this.props.map, this.props.securityToken);
+        if (this.props.options && this.layer && visibility) {
             this.addLayer(this.props);
             this.updateZIndex();
         }
@@ -129,19 +132,46 @@ class CesiumLayer extends React.Component {
         }
     };
 
+    setDetachedLayerVisibility = (visibility, props) => {
+        // use internal setVisible
+        // if a detached layers implements setVisible
+        if (this.layer?.setVisible) {
+            this.layer.setVisible(visibility);
+            return;
+        }
+        // if visible we will remove the layer and create a new one
+        if (visibility) {
+            this.removeLayer();
+            this.createLayer(props.type, {
+                ...props.options,
+                visibility
+            }, props.position, props.map, props.securityToken);
+            return;
+        }
+        // while hidden layers will be completely removed
+        this.removeLayer();
+        return;
+    };
+
+    setImageryLayerVisibility = (visibility, props) => {
+        // this type of layer will be added and removed from the imageryLayers array of Cesium
+        if (visibility) {
+            this.addLayer(props);
+            this.updateZIndex();
+            return;
+        }
+        this.removeLayer();
+        return;
+    }
+
     setLayerVisibility = (newProps) => {
         const oldVisibility = this.getVisibilityOption(this.props);
         const newVisibility = this.getVisibilityOption(newProps);
         if (newVisibility !== oldVisibility) {
-            if (this.layer?.detached && this.layer?.setVisible) {
-                this.layer.setVisible(newVisibility);
+            if (!!this.layer?.detached) {
+                this.setDetachedLayerVisibility(newVisibility, newProps);
             } else {
-                if (newVisibility) {
-                    this.addLayer(newProps);
-                    this.updateZIndex();
-                } else {
-                    this.removeLayer();
-                }
+                this.setImageryLayerVisibility(newVisibility, newProps);
             }
             newProps.map.scene.requestRender();
         }
@@ -167,7 +197,7 @@ class CesiumLayer extends React.Component {
                 return false;
             }
         }
-        return visibility;
+        return !!visibility;
     };
 
     setLayerOpacity = (opacity) => {

web/client/components/map/cesium/Map.jsx

@@ -336,7 +336,15 @@ class CesiumMap extends React.Component {
     };
 
     getZoomFromHeight = (height) => {
-        return Math.log2(this.props.zoomToHeight / height) + 1;
+        let distance = height;
+        // when camera is tilted we could compute the height as the distance between the camera point of view and the viewed point on the map
+        // the viewed point or target is computed as the intersection of an imaginary vector based on the camera direction (ray) and the globe surface
+        // if the camera is orthogonal to the globe distance should match the height so this computation is still valid
+        const target = this.map.scene.globe.pick(new Cesium.Ray(this.map.camera.position, this.map.camera.direction), this.map.scene);
+        if (target) {
+            distance = Cesium.Cartesian3.distance(target, this.map.camera.position);
+        }
+        return Math.log2(this.props.zoomToHeight / distance) + 1;
     };
 
     getHeightFromZoom = (zoom) => {

web/client/components/map/cesium/__tests__/Layer-test.jsx

@@ -588,7 +588,8 @@ describe('Cesium layer', () => {
 
         let options = {
             id: 'overlay-1',
-            position: { x: 13, y: 43 }
+            position: { x: 13, y: 43 },
+            visibility: true
         };
         // create layers
         let layer = ReactDOM.render(
@@ -616,7 +617,8 @@ describe('Cesium layer', () => {
             position: { x: 13, y: 43 },
             onClose: () => {
                 closed = true;
-            }
+            },
+            visibility: true
         };
         // create layers
         let layer = ReactDOM.render(
@@ -643,7 +645,8 @@ describe('Cesium layer', () => {
         document.body.appendChild(element);
         let options = {
             id: 'overlay-1',
-            position: { x: 13, y: 43 }
+            position: { x: 13, y: 43 },
+            visibility: true
         };
         // create layers
         let layer = ReactDOM.render(
@@ -659,7 +662,8 @@ describe('Cesium layer', () => {
 
     it('creates a marker layer for cesium map', () => {
         let options = {
-            point: { lng: 13, lat: 43 }
+            point: { lng: 13, lat: 43 },
+            visibility: true
         };
         // create layers
         let layer = ReactDOM.render(

web/client/components/map/cesium/__tests__/Map-test.jsx

@@ -168,7 +168,7 @@ describe('CesiumMap', () => {
                         try {
                             expect(Math.round(Math.round(center.y * precision) / precision)).toBe(30);
                             expect(Math.round(Math.round(center.x * precision) / precision)).toBe(20);
-                            expect(zoom).toBe(5);
+                            expect(Math.round(zoom)).toBe(5);
                             expect(bbox.bounds).toBeTruthy();
                             expect(bbox.crs).toBeTruthy();
                             expect(size.height).toBeTruthy();

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

@@ -16,6 +16,13 @@ import { isEqual } from 'lodash';
  */
 Layers.registerType('marker', {
     create: (options, map) => {
+        if (!options.visibility) {
+            return {
+                detached: true,
+                point: undefined,
+                remove: () => {}
+            };
+        }
         const style = {
             point: {
                 pixelSize: 5,
@@ -26,7 +33,7 @@ Layers.registerType('marker', {
             ...options.style
         };
         const point = map.entities.add({
-            position: Cesium.Cartesian3.fromDegrees(options.point.lng, options.point.lat),
+            position: Cesium.Cartesian3.fromDegrees(options?.point?.lng || 0, options?.point?.lat || 0),
             ...style
         });
         return {
@@ -38,12 +45,8 @@ Layers.registerType('marker', {
         };
     },
     update: function(layer, newOptions, oldOptions, map) {
-        if (!isEqual(newOptions.point, oldOptions.point)
-        || newOptions.visibility !== oldOptions.visibility) {
-            layer.remove();
-            return newOptions.visibility
-                ? this.create(newOptions, map)
-                : null;
+        if (!isEqual(newOptions.point, oldOptions.point)) {
+            return this.create(newOptions, map);
         }
         return null;
     }

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

@@ -166,11 +166,19 @@ const cloneOriginalOverlay = (original, options) => {
 Layers.registerType('overlay', {
     create: (options, map) => {
 
+        if (!options.visibility) {
+            return {
+                detached: true,
+                info: undefined,
+                remove: () => {}
+            };
+        }
         const original = document.getElementById(options.id);
-        const cloned = cloneOriginalOverlay(original, options);
+        // use a div fallback to avoid error if the original element does not exist
+        const cloned = original ? cloneOriginalOverlay(original, options) : document.createElement('div');
 
         let infoWindow = new InfoWindow(map);
-        infoWindow.showAt(options.position.y, options.position.x, cloned);
+        infoWindow.showAt(options?.position?.y || 0, options?.position?.x || 0, cloned);
         infoWindow.setVisible(true);
         let info = map.scene.primitives.add(infoWindow);
 
@@ -183,12 +191,8 @@ Layers.registerType('overlay', {
         };
     },
     update: function(layer, newOptions, oldOptions, map) {
-        if (!isEqual(newOptions.position, oldOptions.position)
-        || newOptions.visibility !== oldOptions.visibility) {
-            layer.remove();
-            return newOptions.visibility
-                ? this.create(newOptions, map)
-                : null;
+        if (!isEqual(newOptions.position, oldOptions.position)) {
+            return this.create(newOptions, map);
         }
         return null;
     }

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

@@ -48,8 +48,7 @@ const createLayer = (config, map) => {
         terrainProvider,
         remove: () => {
             map.terrainProvider = new Cesium.EllipsoidTerrainProvider();
-        },
-        setVisible: () => {}
+        }
     };
 };
 

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

@@ -129,73 +129,67 @@ function updateShading(tileSet, options, map) {
 
 Layers.registerType('3dtiles', {
     create: (options, map) => {
-        if (options.visibility && options.url) {
-
-            let tileSet;
-            const resource = new Cesium.Resource({
-                url: options.url,
-                proxy: needProxy(options.url) ? new Cesium.DefaultProxy(getProxyUrl()) : undefined
-                // TODO: axios supports also adding access tokens or credentials (e.g. authkey, Authentication header ...).
-                // if we want to use internal cesium functionality to retrieve data
-                // we need to create a utility to set a CesiumResource that applies also this part.
-                // in addition to this proxy.
-            });
-            Cesium.Cesium3DTileset.fromUrl(resource,
-                {
-                    showCreditsOnScreen: true
-                }
-            ).then((_tileSet) => {
-                tileSet = _tileSet;
-                updateGooglePhotorealistic3DTilesBrandLogo(map, options, tileSet);
-                map.scene.primitives.add(tileSet);
-                // assign the original mapstore id of the layer
-                tileSet.msId = options.id;
-
-                ensureReady(tileSet, () => {
-                    updateModelMatrix(tileSet, options);
-                    clip3DTiles(tileSet, options, map);
-                    updateShading(tileSet, options, map);
-                    getStyle(options)
-                        .then((style) => {
-                            if (style) {
-                                tileSet.style = new Cesium.Cesium3DTileStyle(style);
-                            }
-                        });
-                });
-            });
-
+        if (!options.visibility) {
             return {
                 detached: true,
-                getTileSet: () => tileSet,
-                resource,
-                remove: () => {
-                    if (tileSet) {
-                        updateGooglePhotorealistic3DTilesBrandLogo(map, options, tileSet);
-                        map.scene.primitives.remove(tileSet);
-                    }
-                },
-                setVisible: (visible) => {
-                    if (tileSet) {
-                        tileSet.show = !!visible;
-                    }
-                }
+                getTileSet: () => undefined,
+                remove: () => {}
             };
         }
+        let tileSet;
+        const resource = new Cesium.Resource({
+            url: options.url,
+            proxy: needProxy(options.url) ? new Cesium.DefaultProxy(getProxyUrl()) : undefined
+            // TODO: axios supports also adding access tokens or credentials (e.g. authkey, Authentication header ...).
+            // if we want to use internal cesium functionality to retrieve data
+            // we need to create a utility to set a CesiumResource that applies also this part.
+            // in addition to this proxy.
+        });
+        let promise = Cesium.Cesium3DTileset.fromUrl(resource,
+            {
+                showCreditsOnScreen: true
+            }
+        ).then((_tileSet) => {
+            tileSet = _tileSet;
+            updateGooglePhotorealistic3DTilesBrandLogo(map, options, tileSet);
+            map.scene.primitives.add(tileSet);
+            // assign the original mapstore id of the layer
+            tileSet.msId = options.id;
+
+            ensureReady(tileSet, () => {
+                updateModelMatrix(tileSet, options);
+                clip3DTiles(tileSet, options, map);
+                updateShading(tileSet, options, map);
+                getStyle(options)
+                    .then((style) => {
+                        if (style) {
+                            tileSet.style = new Cesium.Cesium3DTileStyle(style);
+                        }
+                    });
+            });
+        });
+        const removeTileset = () => {
+            updateGooglePhotorealistic3DTilesBrandLogo(map, options, tileSet);
+            map.scene.primitives.remove(tileSet);
+            tileSet = undefined;
+        };
         return {
             detached: true,
-            getTileSet: () => undefined,
-            remove: () => {},
-            setVisible: () => {}
+            getTileSet: () => tileSet,
+            resource,
+            remove: () => {
+                if (tileSet) {
+                    removeTileset();
+                    return;
+                }
+                promise.then(() => {
+                    removeTileset();
+                });
+                return;
+            }
         };
     },
     update: function(layer, newOptions, oldOptions, map) {
-        if (newOptions.visibility && !oldOptions.visibility) {
-            return this.create(newOptions, map);
-        }
-        if (!newOptions.visibility && oldOptions.visibility && layer?.remove) {
-            layer.remove();
-            return null;
-        }
         const tileSet = layer?.getTileSet();
         if (
             (!isEqual(newOptions.clippingPolygon, oldOptions.clippingPolygon)