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);