Add support for opacity of parent being carried through the layer groups

works also with layer aggregates, so that the opacity set to the layer in the menu is given to all sub-layers/child-layers
geoadmin · Dec 4, 2023 · f052d2d · f052d2d
1 parent d8f955e
commit f052d2d
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 13 deletions.
diff --git a/src/modules/map/components/openlayers/OpenLayersExternalWMTSLayer.vue b/src/modules/map/components/openlayers/OpenLayersExternalWMTSLayer.vue
@@ -15,20 +15,24 @@ const props = defineProps({
         type: ExternalWMTSLayer,
         required: true,
     },
+    parentLayerOpacity: {
+        type: Number,
+        default: null,
+    },
     zIndex: {
         type: Number,
         default: -1,
     },
 })
-const { externalWmtsLayerConfig, zIndex } = toRefs(props)
+const { externalWmtsLayerConfig, parentLayerOpacity, zIndex } = toRefs(props)
 
 // mapping relevant store values
 const store = useStore()
 const projection = computed(() => store.state.position.projection)
 
 // extracting useful info from what we've linked so far
 const layerId = computed(() => externalWmtsLayerConfig.value.serverLayerId)
-const opacity = computed(() => externalWmtsLayerConfig.value.opacity)
+const opacity = computed(() => parentLayerOpacity.value || externalWmtsLayerConfig.value.opacity)
 const getCapabilitiesUrl = computed(() => externalWmtsLayerConfig.value.getURL())
 
 const wmtsGetCapParser = new WMTSCapabilities()

diff --git a/src/modules/map/components/openlayers/OpenLayersGeoJSONLayer.vue b/src/modules/map/components/openlayers/OpenLayersGeoJSONLayer.vue
@@ -18,20 +18,24 @@ const props = defineProps({
         type: GeoAdminGeoJsonLayer,
         required: true,
     },
+    parentLayerOpacity: {
+        type: Number,
+        default: null,
+    },
     zIndex: {
         type: Number,
         default: -1,
     },
 })
-const { geoJsonConfig, zIndex } = toRefs(props)
+const { geoJsonConfig, parentLayerOpacity, zIndex } = toRefs(props)
 
 // mapping relevant store values
 const store = useStore()
 const projection = computed(() => store.state.position.projection)
 
 // extracting useful info from what we've linked so far
 const layerId = computed(() => geoJsonConfig.value.serverLayerId)
-const opacity = computed(() => geoJsonConfig.value.opacity || 1.0)
+const opacity = computed(() => parentLayerOpacity.value || geoJsonConfig.value.opacity)
 const geoJsonData = computed(() => geoJsonConfig.value.geoJsonData)
 const geoJsonStyle = computed(() => geoJsonConfig.value.geoJsonStyle)
 const isLoading = computed(() => geoJsonConfig.value.isLoading)

diff --git a/src/modules/map/components/openlayers/OpenLayersInternalLayer.vue b/src/modules/map/components/openlayers/OpenLayersInternalLayer.vue
@@ -21,12 +21,16 @@ const props = defineProps({
         type: AbstractLayer,
         default: null,
     },
+    parentLayerOpacity: {
+        type: Number,
+        default: null,
+    },
     zIndex: {
         type: Number,
         default: -1,
     },
 })
-const { layerConfig, zIndex } = toRefs(props)
+const { layerConfig, parentLayerOpacity, zIndex } = toRefs(props)
 
 const store = useStore()
 const projection = computed(() => store.state.position.projection)
@@ -52,35 +56,41 @@ function shouldAggregateSubLayerBeVisible(subLayer) {
         <OpenLayersVectorLayer
             v-if="projection.epsg === WEBMERCATOR.epsg && layerConfig.type === LayerTypes.VECTOR"
             :vector-layer-config="layerConfig"
+            :parent-layer-opacity="parentLayerOpacity"
             :z-index="zIndex"
         />
         <OpenLayersWMTSLayer
             v-if="layerConfig.type === LayerTypes.WMTS && !layerConfig.isExternal"
             :wmts-layer-config="layerConfig"
+            :parent-layer-opacity="parentLayerOpacity"
             :z-index="zIndex"
         />
         <OpenLayersExternalWMTSLayer
             v-if="layerConfig.type === LayerTypes.WMTS && layerConfig.isExternal"
             :external-wmts-layer-config="layerConfig"
+            :parent-layer-opacity="parentLayerOpacity"
             :z-index="zIndex"
         />
         <!-- as external and internal (geoadmin) WMS layers can be managed the same way,
              we do not have a specific component for external layers but we reuse the one for geoadmin's layers-->
         <OpenLayersWMSLayer
             v-if="layerConfig.type === LayerTypes.WMS"
             :wms-layer-config="layerConfig"
+            :parent-layer-opacity="parentLayerOpacity"
             :z-index="zIndex"
         />
         <OpenLayersGeoJSONLayer
             v-if="layerConfig.type === LayerTypes.GEOJSON"
             :geo-json-config="layerConfig"
+            :parent-layer-opacity="parentLayerOpacity"
             :z-index="zIndex"
         />
         <div v-if="layerConfig.type === LayerTypes.GROUP">
             <OpenLayersInternalLayer
                 v-for="(layer, index) in layerConfig.layers"
                 :key="`${layer.getID()}-${index}`"
                 :layer-config="layer"
+                :parent-layer-opacity="layerConfig.opacity"
                 :z-index="zIndex + index"
             />
         </div>
@@ -100,13 +110,15 @@ function shouldAggregateSubLayerBeVisible(subLayer) {
                 <OpenLayersInternalLayer
                     v-if="shouldAggregateSubLayerBeVisible(aggregateSubLayer)"
                     :layer-config="aggregateSubLayer.layer"
+                    :parent-layer-opacity="layerConfig.opacity"
                     :z-index="zIndex"
                 />
             </div>
         </div>
         <OpenLayersKMLLayer
             v-if="layerConfig.type === LayerTypes.KML && layerConfig.addToMap"
             :kml-layer-config="layerConfig"
+            :parent-layer-opacity="parentLayerOpacity"
             :z-index="zIndex"
         />
         <slot />

diff --git a/src/modules/map/components/openlayers/OpenLayersKMLLayer.vue b/src/modules/map/components/openlayers/OpenLayersKMLLayer.vue
@@ -17,12 +17,16 @@ const props = defineProps({
         type: KMLLayer,
         required: true,
     },
+    parentLayerOpacity: {
+        type: Number,
+        default: null,
+    },
     zIndex: {
         type: Number,
         default: -1,
     },
 })
-const { kmlLayerConfig, zIndex } = toRefs(props)
+const { kmlLayerConfig, parentLayerOpacity, zIndex } = toRefs(props)
 
 // mapping relevant store values
 const store = useStore()
@@ -31,7 +35,7 @@ const availableIconSets = computed(() => store.state.drawing.iconSets)
 
 // extracting useful info from what we've linked so far
 const layerId = computed(() => kmlLayerConfig.value.getID())
-const opacity = computed(() => kmlLayerConfig.value.opacity || 1.0)
+const opacity = computed(() => parentLayerOpacity.value || kmlLayerConfig.value.opacity)
 const url = computed(() => kmlLayerConfig.value.getURL())
 
 const kmlData = ref(null)

diff --git a/src/modules/map/components/openlayers/OpenLayersVectorLayer.vue b/src/modules/map/components/openlayers/OpenLayersVectorLayer.vue
@@ -22,16 +22,20 @@ const props = defineProps({
         type: GeoAdminVectorLayer,
         required: true,
     },
+    parentLayerOpacity: {
+        type: Number,
+        default: null,
+    },
     zIndex: {
         type: Number,
         default: -1,
     },
 })
-const { vectorLayerConfig, zIndex } = toRefs(props)
+const { vectorLayerConfig, parentLayerOpacity, zIndex } = toRefs(props)
 
 // extracting useful info from what we've linked so far
 const layerId = computed(() => vectorLayerConfig.value.getID())
-const opacity = computed(() => vectorLayerConfig.value.opacity || 1.0)
+const opacity = computed(() => parentLayerOpacity.value, vectorLayerConfig.value.opacity)
 const styleUrl = computed(() => vectorLayerConfig.value.getURL())
 
 const layer = new MapLibreLayer({

diff --git a/src/modules/map/components/openlayers/OpenLayersWMSLayer.vue b/src/modules/map/components/openlayers/OpenLayersWMSLayer.vue
@@ -18,12 +18,16 @@ const props = defineProps({
         type: [GeoAdminWMSLayer, ExternalWMSLayer],
         required: true,
     },
+    parentLayerOpacity: {
+        type: Number,
+        default: null,
+    },
     zIndex: {
         type: Number,
         default: -1,
     },
 })
-const { wmsLayerConfig, zIndex } = toRefs(props)
+const { wmsLayerConfig, parentLayerOpacity, zIndex } = toRefs(props)
 
 // mapping relevant store values
 const store = useStore()
@@ -38,7 +42,7 @@ const layerId = computed(
 const wmsVersion = computed(() => wmsLayerConfig.value.wmsVersion || '1.3.0')
 const format = computed(() => wmsLayerConfig.value.format || 'png')
 const gutter = computed(() => wmsLayerConfig.value.gutter || -1)
-const opacity = computed(() => wmsLayerConfig.value.opacity || 1.0)
+const opacity = computed(() => parentLayerOpacity.value || wmsLayerConfig.value.opacity)
 const url = computed(() => wmsLayerConfig.value.getURL())
 const timestamp = computed(() => getTimestampFromConfig(wmsLayerConfig.value, previewYear.value))
 

diff --git a/src/modules/map/components/openlayers/OpenLayersWMTSLayer.vue b/src/modules/map/components/openlayers/OpenLayersWMTSLayer.vue
@@ -14,12 +14,16 @@ const props = defineProps({
         type: GeoAdminWMTSLayer,
         required: true,
     },
+    parentLayerOpacity: {
+        type: Number,
+        default: null,
+    },
     zIndex: {
         type: Number,
         default: -1,
     },
 })
-const { wmtsLayerConfig, zIndex } = toRefs(props)
+const { wmtsLayerConfig, parentLayerOpacity, zIndex } = toRefs(props)
 
 // mapping relevant store values
 const store = useStore()
@@ -28,7 +32,7 @@ const projection = computed(() => store.state.position.projection)
 
 // extracting useful info from what we've linked so far
 const layerId = computed(() => wmtsLayerConfig.value.serverLayerId)
-const opacity = computed(() => wmtsLayerConfig.value.opacity)
+const opacity = computed(() => parentLayerOpacity.value || wmtsLayerConfig.value.opacity)
 const url = computed(() => {
     return wmtsLayerConfig.value.getURL(
         projection.value.epsgNumber,