fix(ol-webgl-tile-layer): react on property changes

- make TileLayer a shallowRef, to not always create a new class
- apply property changes using `.set('<prop>', value)`
- add demo for opacity / visibility changes

closes #319

Author: d-koppenhagen

Diff for: src/components/layers/OlWebglTileLayer.vue

@@ -6,7 +6,14 @@
 
 <script setup lang="ts">
 import type { Ref } from "vue";
-import { inject, provide, onUnmounted, onMounted, watch, computed } from "vue";
+import {
+  inject,
+  provide,
+  onUnmounted,
+  onMounted,
+  watch,
+  shallowRef,
+} from "vue";
 import TileLayer, { type Options } from "ol/layer/WebGLTile";
 import type Map from "ol/Map";
 import type { OverviewMap } from "ol/control";
@@ -23,22 +30,19 @@ const overViewMap = inject<Ref<OverviewMap | null> | null>("overviewMap", null);
 
 const { properties } = usePropsAsObjectProperties(props);
 
-const tileLayer = computed(() => new TileLayer(properties));
+const tileLayer = shallowRef(new TileLayer(properties));
 
 watch(
-  () => props.opacity,
-  (newOpacity: number) => {
-    tileLayer.value.setOpacity(newOpacity);
+  () => properties,
+  (newValue) => {
+    for (const key in newValue) {
+      const keyInObj = key as keyof typeof newValue;
+      if (newValue[keyInObj]) {
+        tileLayer.value.set(key, newValue[keyInObj]);
+      }
+    }
   },
-  { immediate: true },
-);
-
-watch(
-  () => props.visible,
-  (newVisible: boolean) => {
-    tileLayer.value.setVisible(newVisible);
-  },
-  { immediate: true },
+  { deep: true },
 );
 
 const applyTileLayer = () => {

Diff for: src/demos/GeoTIFFDemo.vue

@@ -1,4 +1,23 @@
 <template>
+  <form>
+    <fieldset>
+      <label for="opacity-slider">Layer Opacity</label>
+      <input
+        type="range"
+        id="opacity-slider"
+        min="0"
+        max="1"
+        step="0.1"
+        v-model.number="layerOpacity"
+      />
+      <span class="description">{{ layerOpacity }}</span>
+    </fieldset>
+    <fieldset>
+      <label for="visibility-toggle">Layer Visibility:</label>
+      <input type="checkbox" id="visibility-toggle" v-model="layerVisible" />
+      <span> {{ layerVisible ? "Visible" : "Hidden" }}</span>
+    </fieldset>
+  </form>
   <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
@@ -11,7 +30,12 @@
       :projection="projection"
     />
 
-    <ol-webgl-tile-layer :style="trueColor">
+    <ol-webgl-tile-layer
+      :style="trueColor"
+      :zIndex="1001"
+      :opacity="layerOpacity"
+      :visible="layerVisible"
+    >
       <ol-source-geo-tiff
         :normalize="false"
         :sources="[
@@ -31,6 +55,8 @@ import { ref } from "vue";
 const center = ref([0, 0]);
 const zoom = ref(2);
 const projection = ref("EPSG:4326");
+const layerOpacity = ref(1);
+const layerVisible = ref(true);
 
 const max = 3000;
 function normalize(value) {