fix(ol-vector-layer): watch opacity / visible changes

closes #347

Author: d-koppenhagen

src/components/layers/OlVectorLayer.vue

@@ -43,9 +43,35 @@ const properties = usePropsAsObjectProperties(props);
 
 const vectorLayer = computed(() => new VectorLayer(properties));
 
-watch(properties, () => {
-  vectorLayer.value.setProperties(properties);
-});
+watch(
+  () => properties,
+  (newValue) => {
+    vectorLayer.value.setProperties(newValue);
+    for (const key in newValue) {
+      const keyInObj = key as keyof typeof newValue;
+      if (newValue[keyInObj]) {
+        vectorLayer.value.set(key, newValue[keyInObj]);
+      }
+    }
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.visible,
+  (newVisible: boolean) => {
+    vectorLayer.value.setVisible(newVisible);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.opacity,
+  (newOpacity: number) => {
+    vectorLayer.value.setOpacity(newOpacity);
+  },
+  { immediate: true },
+);
 
 onMounted(() => {
   map?.addLayer(vectorLayer.value);

src/demos/VectorSourceDemo1.vue

@@ -1,4 +1,19 @@
 <template>
+  <form>
+    <fieldset>
+      <label for="opacity">Layer Opacity</label>
+      <input
+        type="range"
+        id="opacity"
+        min="0"
+        max="1"
+        step="0.1"
+        v-model.number="opacity"
+      />
+      <span class="description">{{ opacity }}</span>
+    </fieldset>
+  </form>
+
   <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
@@ -12,7 +27,11 @@
       :constrainRotation="16"
     />
 
-    <ol-vector-layer background="#1a2b39" ref="vectorSourceRef">
+    <ol-vector-layer
+      background="#1a2b39"
+      ref="vectorSourceRef"
+      :opacity="opacity"
+    >
       <ol-source-vector :url="url" :format="geoJson">
         <ol-style :overrideStyleFunction="styleFn"></ol-style>
       </ol-source-vector>
@@ -35,6 +54,7 @@ import { shiftKeyOnly } from "ol/events/condition";
 import { ref, inject } from "vue";
 import type { DragBoxEvent } from "ol/interaction/DragBox";
 
+const opacity = ref(1);
 const center = ref([0, 0]);
 const projection = ref("EPSG:4326");
 const zoom = ref(0);