Fix #10633 Enhancing MapViews Layer Options

docs/developer-guide/maps-configuration.md

@@ -1644,6 +1644,12 @@ Example:
             "clippingPolygonFeatureId": "feature.id.01",
             "clippingPolygonUnion": false
           }
+        ],
+        "groups": [
+          {
+            "id": "group_01",
+            "visibility": true
+          }
         ]
       }
     ],
@@ -1710,6 +1716,7 @@ View configuration object
 | globeTranslucency.nearDistance | number | when `fadeByDistance` is true it indicates the minimum distance to apply translucency |
 | globeTranslucency.farDistance | number |  when `fadeByDistance` is true it indicates the maximum distance to apply translucency |
 | layers | array | array of layer configuration overrides, default properties override `visibility` and `opacity` |
+| groups | array | array of group configuration overrides, default property overrides `visibility` |
 
 Resource object configuration
 

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

@@ -95,12 +95,19 @@ function clip3DTiles(tileSet, options, map) {
         });
 }
 
-function ensureReady(tileSet, callback) {
+let pendingCallbacks = {};
+
+function ensureReady(layer, callback, eventKey) {
+    const tileSet = layer.getTileSet();
+    if (!tileSet && eventKey) {
+        pendingCallbacks[eventKey] = callback;
+        return;
+    }
     if (tileSet.ready) {
-        callback();
+        callback(tileSet);
     } else {
         tileSet.readyPromise.then(() => {
-            callback();
+            callback(tileSet);
         });
     }
 }
@@ -152,10 +159,13 @@ const createLayer = (options, map) => {
         map.scene.primitives.remove(tileSet);
         tileSet = undefined;
     };
+    const layer = {
+        getTileSet: () => tileSet,
+        getResource: () => resource
+    };
     return {
         detached: true,
-        getTileSet: () => tileSet,
-        getResource: () => resource,
+        ...layer,
         add: () => {
             resource = new Cesium.Resource({
                 url: options.url,
@@ -175,7 +185,7 @@ const createLayer = (options, map) => {
                 map.scene.primitives.add(tileSet);
                 // assign the original mapstore id of the layer
                 tileSet.msId = options.id;
-                ensureReady(tileSet, () => {
+                ensureReady(layer, () => {
                     updateModelMatrix(tileSet, options);
                     clip3DTiles(tileSet, options, map);
                     updateShading(tileSet, options, map);
@@ -184,6 +194,10 @@ const createLayer = (options, map) => {
                             if (style) {
                                 tileSet.style = new Cesium.Cesium3DTileStyle(style);
                             }
+                            Object.keys(pendingCallbacks).forEach((eventKey) => {
+                                pendingCallbacks[eventKey](tileSet);
+                            });
+                            pendingCallbacks = {};
                         });
                 });
             });
@@ -209,39 +223,38 @@ Layers.registerType('3dtiles', {
         if (newOptions.forceProxy !== oldOptions.forceProxy) {
             return createLayer(newOptions, map);
         }
-        const tileSet = layer?.getTileSet();
         if (
             (!isEqual(newOptions.clippingPolygon, oldOptions.clippingPolygon)
             || newOptions.clippingPolygonUnion !== oldOptions.clippingPolygonUnion
             || newOptions.clipOriginalGeometry !== oldOptions.clipOriginalGeometry)
-         && tileSet) {
-            ensureReady(tileSet, () => {
+        ) {
+            ensureReady(layer, (tileSet) => {
                 clip3DTiles(tileSet, newOptions, map);
-            });
+            }, 'clip');
         }
         if ((
             !isEqual(newOptions.style, oldOptions.style)
             || newOptions?.pointCloudShading?.attenuation !== oldOptions?.pointCloudShading?.attenuation
-        ) && tileSet) {
-            ensureReady(tileSet, () => {
+        )) {
+            ensureReady(layer, (tileSet) => {
                 getStyle(newOptions)
                     .then((style) => {
                         if (style && tileSet) {
                             tileSet.makeStyleDirty();
                             tileSet.style = new Cesium.Cesium3DTileStyle(style);
                         }
                     });
-            });
+            }, 'style');
         }
-        if (!isEqual(newOptions.pointCloudShading, oldOptions.pointCloudShading) && tileSet) {
-            ensureReady(tileSet, () => {
+        if (!isEqual(newOptions.pointCloudShading, oldOptions.pointCloudShading)) {
+            ensureReady(layer, (tileSet) => {
                 updateShading(tileSet, newOptions, map);
-            });
+            }, 'shading');
         }
-        if (tileSet && newOptions.heightOffset !== oldOptions.heightOffset) {
-            ensureReady(tileSet, () => {
+        if (newOptions.heightOffset !== oldOptions.heightOffset) {
+            ensureReady(layer, (tileSet) => {
                 updateModelMatrix(tileSet, newOptions);
-            });
+            }, 'matrix');
         }
         return null;
     }

web/client/components/mapviews/MapViewSettings.jsx

@@ -31,6 +31,7 @@ function ViewSettings({
     view,
     api,
     layers = [],
+    groups = [],
     onChange,
     onUpdateResource = () => { },
     onCaptureView,
@@ -77,6 +78,26 @@ function ViewSettings({
         });
     }
 
+    function handleChangeGroup(groupId, options) {
+        const viewGroup = view?.groups?.find(vGroup => vGroup.id === groupId);
+        const viewGroups = viewGroup
+            ? (view?.groups || [])
+                .map((vGroup) => vGroup.id === groupId ? ({ ...viewGroup, ...options }) : vGroup)
+            : [...(view?.groups || []), { id: groupId, ...options }];
+        onChange({
+            ...view,
+            groups: viewGroups
+        });
+    }
+
+    function handleResetGroup(groupId) {
+        const viewGroups = view?.groups?.filter(vGroup => vGroup.id !== groupId);
+        onChange({
+            ...view,
+            groups: viewGroups
+        });
+    }
+
     function updateLayerRequest({ layer, inverse = false, offset = 0 } = {}) {
         return getResourceFromLayer({
             layer,
@@ -108,11 +129,14 @@ function ViewSettings({
                             onChange={handleChange}
                             resources={resources}
                             layers={layers.filter(({ type }) => !(api?.options?.unsupportedLayers || []).includes(type))}
+                            groups={groups}
                             vectorLayers={availableVectorLayers}
                             updateLayerRequest={updateLayerRequest}
                             locale={locale}
                             onChangeLayer={handleChangeLayer}
                             onResetLayer={handleResetLayer}
+                            onChangeGroup={handleChangeGroup}
+                            onResetGroup={handleResetGroup}
                             showClipGeometries={showClipGeometries}
                             onShowClipGeometries={onShowClipGeometries}
                             onCaptureView={onCaptureView}

web/client/components/mapviews/MapViewsSupport.jsx

@@ -161,6 +161,7 @@ function MapViewsSupport({
     selectedId,
     defaultTitle = 'Map View',
     layers,
+    groups,
     locale,
     resources: resourcesProp = [],
     services,
@@ -597,6 +598,7 @@ function MapViewsSupport({
                                             onChange={handleUpdateView}
                                             onCaptureView={handleCaptureView}
                                             layers={layers}
+                                            groups={groups}
                                             locale={locale}
                                             services={services}
                                             selectedService={selectedService}