Add the draping of imagery layers on 3d tiles functionality

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

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, ControlLabel, InputGroup } from 'react-bootstrap';
+import { FormGroup, ControlLabel, InputGroup, Checkbox } from 'react-bootstrap';
 import DebouncedFormControl from '../../../misc/DebouncedFormControl';
 import Message from '../../../I18N/Message';
 import PointCloudShadingSettings from './PointCloudShadingSettings';
@@ -29,6 +29,15 @@ function ThreeDTilesSettings({
     }
     return (
         <div style={{ margin: '0 -8px' }}>
+            <FormGroup className="form-group-flex">
+                <Checkbox
+                    key="enableImageryOverlay"
+                    checked={layer.enableImageryOverlay === undefined ? false : layer.enableImageryOverlay}
+                    onChange={(event) => onChange("enableImageryOverlay", event.target.checked)}
+                >
+                    <Message msgId="layerProperties.3dTiles.enableImageryOverlay"/>
+                </Checkbox>
+            </FormGroup>
             <FormGroup className="form-group-flex">
                 <ControlLabel><Message msgId="layerProperties.3dTiles.format"/></ControlLabel>
                 <InputGroup>

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

@@ -43,6 +43,7 @@ describe('ThreeDTilesSettings', () => {
         }}/>, document.getElementById('container'));
         const checkboxNodes = document.querySelectorAll('.checkbox');
         expect([...checkboxNodes].map(node => node.innerText)).toEqual([
+            'layerProperties.3dTiles.enableImageryOverlay',
             'layerProperties.3dTiles.pointCloudShading.attenuation',
             'layerProperties.3dTiles.pointCloudShading.eyeDomeLighting'
         ]);

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

@@ -22,7 +22,9 @@ class CesiumLayer extends React.Component {
         onCreationError: PropTypes.func,
         position: PropTypes.number,
         securityToken: PropTypes.string,
-        zoom: PropTypes.number
+        zoom: PropTypes.number,
+        imageryLayersTreeUpdatedCount: PropTypes.number,
+        onImageryLayersTreeUpdate: PropTypes.func
     };
 
     componentDidMount() {
@@ -33,6 +35,9 @@ class CesiumLayer extends React.Component {
         if (this.props.options && this.layer && visibility) {
             this.addLayer(this.props);
             this.updateZIndex();
+            if (this.provider) {
+                this.props.onImageryLayersTreeUpdate();
+            }
         }
     }
 
@@ -48,6 +53,7 @@ class CesiumLayer extends React.Component {
             if (this.provider) {
                 this.provider._position = newProps.position;
             }
+            this.props.onImageryLayersTreeUpdate();
         }
         if (this.props.options && this.props.options.params && this.layer.updateParams && newProps.options.visibility) {
             const changed = Object.keys(this.props.options.params).reduce((found, param) => {
@@ -64,7 +70,6 @@ class CesiumLayer extends React.Component {
                 setTimeout(() => {
                     this.removeLayer(oldProvider);
                 }, 1000);
-
             }
         }
         this.updateLayer(newProps, this.props);
@@ -77,11 +82,7 @@ class CesiumLayer extends React.Component {
             if (this.layer.detached && this.layer?.remove) {
                 this.layer.remove();
             } else {
-                if (this.layer.destroy) {
-                    this.layer.destroy();
-                }
-
-                this.props.map.imageryLayers.remove(this.provider);
+                this.removeLayer();
             }
             if (this.refreshTimer) {
                 clearInterval(this.refreshTimer);
@@ -159,12 +160,17 @@ class CesiumLayer extends React.Component {
 
     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();
+        if (!this.provider) {
+            if (visibility) {
+                this.addLayer(props);
+                this.updateZIndex();
+                return;
+            }
+            this.removeLayer();
             return;
         }
-        this.removeLayer();
+        // use the native show property to avoid re-creation of an imagery layer
+        this.provider.show = !!visibility;
         return;
     }
 
@@ -205,7 +211,7 @@ class CesiumLayer extends React.Component {
     };
 
     setLayerOpacity = (opacity) => {
-        var oldOpacity = this.props.options && this.props.options.opacity !== undefined ? this.props.options.opacity : 1.0;
+        const oldOpacity = this.props.options && this.props.options.opacity !== undefined ? this.props.options.opacity : 1.0;
         if (opacity !== oldOpacity && this.layer && this.provider) {
             this.provider.alpha = opacity;
             this.props.map.scene.requestRender();
@@ -244,12 +250,16 @@ class CesiumLayer extends React.Component {
             {
                 ...newProps.options,
                 securityToken: newProps.securityToken,
-                forceProxy: this._isProxy
+                forceProxy: this._isProxy,
+                imageryLayersTreeUpdatedCount: newProps.imageryLayersTreeUpdatedCount,
+                position: newProps.position
             },
             {
                 ...oldProps.options,
                 securityToken: oldProps.securityToken,
-                forceProxy: this._prevIsProxy
+                forceProxy: this._prevIsProxy,
+                imageryLayersTreeUpdatedCount: oldProps.imageryLayersTreeUpdatedCount,
+                position: oldProps.position
             },
             this.props.map);
         if (newLayer) {
@@ -311,9 +321,13 @@ class CesiumLayer extends React.Component {
     }
 
     removeLayer = (provider) => {
+        if (this.layer.destroy) {
+            this.layer.destroy();
+        }
         const toRemove = provider || this.provider;
         if (toRemove) {
             this.props.map.imageryLayers.remove(toRemove);
+            this.props.onImageryLayersTreeUpdate();
         }
         // detached layers are layers that do not work through a provider
         // for this reason they cannot be added or removed from the map imageryProviders

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

@@ -24,7 +24,7 @@ import {
     getResolutions
 } from '../../../utils/MapUtils';
 import { reprojectBbox } from '../../../utils/CoordinatesUtils';
-import { throttle, isEqual } from 'lodash';
+import { throttle, isEqual, debounce } from 'lodash';
 
 class CesiumMap extends React.Component {
     static propTypes = {
@@ -81,7 +81,8 @@ class CesiumMap extends React.Component {
     };
 
     state = {
-        renderError: null
+        renderError: null,
+        imageryLayersTreeUpdatedCount: 0
     };
 
     UNSAFE_componentWillMount() {
@@ -194,6 +195,7 @@ class CesiumMap extends React.Component {
         this.updateLighting({}, this.props);
         this.forceUpdate();
         map.scene.requestRender();
+
     }
 
     UNSAFE_componentWillReceiveProps(newProps) {
@@ -451,7 +453,13 @@ class CesiumMap extends React.Component {
                 map: map,
                 projection: mapProj,
                 onCreationError: this.props.onCreationError,
-                zoom: this.props.zoom
+                zoom: this.props.zoom,
+                imageryLayersTreeUpdatedCount: this.state.imageryLayersTreeUpdatedCount,
+                onImageryLayersTreeUpdate: debounce(() =>
+                    this.setState(({ imageryLayersTreeUpdatedCount }) => ({
+                        imageryLayersTreeUpdatedCount: imageryLayersTreeUpdatedCount + 1
+                    })),
+                50)
             }) : null;
         }) : null;
         const ErrorPanel = this.props.errorPanel;

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

@@ -73,6 +73,26 @@ function clip3DTiles(tileSet, options, map) {
     });
 }
 
+const applyImageryLayers = (tileSet, options, map) => {
+    if (!options.enableImageryOverlay || !tileSet || tileSet.isDestroyed()) return;
+    // Collect map layers that should be applied to primitive
+    const mapLayers = [];
+    for (let i = 0; i < map.imageryLayers.length; i++) {
+        const layer = map.imageryLayers.get(i);
+        if (layer._position > options.position) {
+            mapLayers.push(layer);
+        }
+    }
+    // Add layers in the correct order
+    mapLayers.forEach((layer, idx) => {
+        const current = tileSet.imageryLayers.get(idx);
+        if (current !== layer) {
+            tileSet.imageryLayers.add(layer);
+        }
+    });
+    map.scene.requestRender();
+};
+
 let pendingCallbacks = {};
 
 function ensureReady(layer, callback, eventKey) {
@@ -130,53 +150,66 @@ const createLayer = (options, map) => {
     let promise;
     const removeTileset = () => {
         updateGooglePhotorealistic3DTilesBrandLogo(map, options, tileSet);
+        tileSet.imageryLayers.removeAll(false);
         map.scene.primitives.remove(tileSet);
         tileSet = undefined;
     };
     const layer = {
         getTileSet: () => tileSet,
         getResource: () => resource
     };
+
+    let timeout = undefined;
+
     return {
         detached: true,
         ...layer,
         add: () => {
-            resource = new Cesium.Resource({
-                url: options.url,
-                proxy: options.forceProxy ? 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.
-            });
-            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(layer, () => {
-                    updateModelMatrix(tileSet, options);
-                    clip3DTiles(tileSet, options, map);
-                    updateShading(tileSet, options, map);
-                    getStyle(options)
-                        .then((style) => {
-                            if (style) {
-                                tileSet.style = new Cesium.Cesium3DTileStyle(style);
-                            }
-                            Object.keys(pendingCallbacks).forEach((eventKey) => {
-                                pendingCallbacks[eventKey](tileSet);
+            // delay creation of tileset when frequents recreation are requested
+            timeout = setTimeout(() => {
+                timeout = undefined;
+                resource = new Cesium.Resource({
+                    url: options.url,
+                    proxy: options.forceProxy ? 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.
+                });
+                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(layer, () => {
+                        updateModelMatrix(tileSet, options);
+                        clip3DTiles(tileSet, options, map);
+                        updateShading(tileSet, options, map);
+                        getStyle(options)
+                            .then((style) => {
+                                if (style) {
+                                    tileSet.style = new Cesium.Cesium3DTileStyle(style);
+                                }
+                                Object.keys(pendingCallbacks).forEach((eventKey) => {
+                                    pendingCallbacks[eventKey](tileSet);
+                                });
+                                pendingCallbacks = {};
+                                applyImageryLayers(tileSet, options, map);
                             });
-                            pendingCallbacks = {};
-                        });
+                    });
                 });
-            });
+            }, 50);
         },
         remove: () => {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = undefined;
+            }
             if (tileSet) {
                 removeTileset();
                 return;
@@ -194,7 +227,11 @@ const createLayer = (options, map) => {
 Layers.registerType('3dtiles', {
     create: createLayer,
     update: function(layer, newOptions, oldOptions, map) {
-        if (newOptions.forceProxy !== oldOptions.forceProxy) {
+        if (newOptions.forceProxy !== oldOptions.forceProxy
+            // recreate the tileset when the imagery has been updated and the layer has enableImageryOverlay set to true
+            || newOptions.enableImageryOverlay && (newOptions.imageryLayersTreeUpdatedCount !== oldOptions.imageryLayersTreeUpdatedCount)
+            || (newOptions.enableImageryOverlay && !oldOptions.enableImageryOverlay)
+        ) {
             return createLayer(newOptions, map);
         }
         if (

web/client/translations/data.ca-ES.json

@@ -171,7 +171,8 @@
           "eyeDomeLighting": "Activa la il\u00b7luminaci\u00f3",
           "eyeDomeLightingStrength": "For\u00e7a d\u2019il\u00b7luminaci\u00f3",
           "eyeDomeLightingRadius": "Radi d\u2019il\u00b7luminaci\u00f3"
-        }
+        },
+        "enableImageryOverlay": "Habilita la superposició d’imatges"
       },
       "modelLayer": {
         "modelCenterLat": "Latitude Center (DD)",

web/client/translations/data.de-DE.json

@@ -181,7 +181,8 @@
           "eyeDomeLighting": "Beleuchtung aktivieren",
           "eyeDomeLightingStrength": "Lichtstärke",
           "eyeDomeLightingRadius": "Beleuchtungsradius"
-        }
+        },
+        "enableImageryOverlay": "Bildüberlagerung aktivieren"
       },
       "modelLayer": {
         "modelCenterLat": "Breitengrad des Zentrums (DD)",

web/client/translations/data.en-US.json

@@ -181,7 +181,8 @@
           "eyeDomeLighting": "Enable lighting",
           "eyeDomeLightingStrength": "Lighting strength",
           "eyeDomeLightingRadius": "Lighting radius"
-        }
+        },
+        "enableImageryOverlay": "Enable imagery overlay"
       },
       "modelLayer": {
         "modelCenterLat": "Center's Latitude (DD)",

web/client/translations/data.es-ES.json

@@ -178,7 +178,8 @@
           "eyeDomeLighting": "Habilitar iluminación",
           "eyeDomeLightingStrength": "Intensidad de iluminación",
           "eyeDomeLightingRadius": "Radio de iluminación"
-        }
+        },
+        "enableImageryOverlay": "Habilitar la superposición de imágenes"
       },
       "modelLayer": {
         "modelCenterLat": "Latitud del centro (DD)",

web/client/translations/data.fr-FR.json

@@ -181,7 +181,8 @@
           "eyeDomeLighting": "Activer l'éclairage",
           "eyeDomeLightingStrength": "Force d'éclairage",
           "eyeDomeLightingRadius": "Rayon d'éclairage"
-        }
+        },
+        "enableImageryOverlay": "Activer la superposition d’images"
       },
       "modelLayer": {
         "modelCenterLat": "Latitude du centre (DD)",

web/client/translations/data.it-IT.json

@@ -181,7 +181,8 @@
           "eyeDomeLighting": "Abilita illuminazione",
           "eyeDomeLightingStrength": "Intensità luminosa",
           "eyeDomeLightingRadius": "Raggio di illuminazione"
-        }
+        },
+        "enableImageryOverlay": "Abilita la sovrapposizione delle immagini"
       },
       "modelLayer": {
         "modelCenterLat": "Latitudine del centro (DD)",

web/client/translations/data.nl-NL.json

@@ -181,7 +181,8 @@
           "eyeDomeLighting": "Activeer belichting",
           "eyeDomeLightingStrength": "Belichtingssterkte",
           "eyeDomeLightingRadius": "Belichtingsradius"
-        }
+        },
+        "enableImageryOverlay": "Beeldoverlay inschakelen"
       },
       "modelLayer": {
         "modelCenterLat": "Breedtegraad centrum (DD)",