fix: handle visibility and opacity changes

closes #277

Author: d-koppenhagen

Diff for: docs/.vitepress/theme/demo.css

@@ -75,6 +75,7 @@ main form {
   display: flex;
   align-items: baseline;
   gap: 1rem;
+  margin-bottom: 1rem;
 }
 
 main form fieldset {
@@ -86,6 +87,10 @@ main form fieldset {
   border: none;
 }
 
+main form label {
+  font-weight: bold;
+}
+
 main input[type="checkbox"] {
   -webkit-appearance: none;
   appearance: none;
@@ -123,3 +128,41 @@ main ul > li:has(> input[type="checkbox"]) {
   align-items: center;
   gap: 0.5rem;
 }
+
+main input[type="range"] {
+  margin: 0;
+  padding: 0;
+  position: relative;
+  top: 50%;
+  top: 0.9rem;
+}
+
+main input[type="range"] {
+  -webkit-appearance: none;
+}
+
+main input[type="range"]::-webkit-slider-runnable-track {
+  width: 300px;
+  height: 5px;
+  background: #ddd;
+  border: none;
+  border-radius: 3px;
+}
+
+main input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border: none;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: var(--vp-c-brand-1);
+  margin-top: -4px;
+}
+
+main input[type="range"]:focus {
+  outline: none;
+}
+
+main input[type="range"]:focus::-webkit-slider-runnable-track {
+  background: #ccc;
+}

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

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, provide, onUnmounted, onMounted, watch } from "vue";
+import { inject, provide, onUnmounted, onMounted, watch, ref } from "vue";
 import ImageLayer from "ol/layer/Image";
 import type Map from "ol/Map";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
@@ -25,12 +25,27 @@ const layerGroup = inject<LayerGroup | null>("layerGroup", null);
 
 const { properties } = usePropsAsObjectProperties(props);
 
-const imageLayer = new ImageLayer(properties);
+const imageLayer = ref(new ImageLayer(properties));
 
 watch(properties, () => {
-  imageLayer.setProperties(properties);
+  imageLayer.value.setProperties(properties);
 });
 
+watch(
+  () => props.opacity,
+  (newOpacity: number) => {
+    imageLayer.value.setOpacity(newOpacity);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.visible,
+  (newVisible: boolean) => {
+    imageLayer.value.setVisible(newVisible);
+  },
+  { immediate: true },
+);
 onMounted(() => {
   map?.addLayer(imageLayer);
 

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

@@ -11,7 +11,7 @@ import {
   onUnmounted,
   onMounted,
   watch,
-  computed,
+  ref,
   type Ref,
 } from "vue";
 import TileLayer from "ol/layer/Tile";
@@ -42,7 +42,23 @@ const overViewMap = inject<Ref<OverviewMap | null> | null>("overviewMap", null);
 
 const { properties } = usePropsAsObjectProperties(props);
 
-const tileLayer = computed(() => new TileLayer(properties));
+const tileLayer = ref(new TileLayer(properties));
+
+watch(
+  () => props.opacity,
+  (newOpacity: number) => {
+    tileLayer.value.setOpacity(newOpacity);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.visible,
+  (newVisible: boolean) => {
+    tileLayer.value.setVisible(newVisible);
+  },
+  { immediate: true },
+);
 
 const applyTileLayer = () => {
   if (layerGroup) {

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

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import type { Ref } from "vue";
-import { inject, provide, onUnmounted, onMounted, watch, computed } from "vue";
+import { inject, provide, onUnmounted, onMounted, watch, ref } from "vue";
 import TileLayer, { type Options } from "ol/layer/WebGLTile";
 import type Map from "ol/Map";
 import type { OverviewMap } from "ol/control";
@@ -24,7 +24,23 @@ const overViewMap = inject<Ref<OverviewMap | null> | null>("overviewMap", null);
 
 const { properties } = usePropsAsObjectProperties(props);
 
-const tileLayer = computed(() => new TileLayer(properties));
+const tileLayer = ref(new TileLayer(properties));
+
+watch(
+  () => props.opacity,
+  (newOpacity: number) => {
+    tileLayer.value.setOpacity(newOpacity);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.visible,
+  (newVisible: boolean) => {
+    tileLayer.value.setVisible(newVisible);
+  },
+  { immediate: true },
+);
 
 const applyTileLayer = () => {
   if (layerGroup) {

Diff for: src/components/styles/OlStyleText.vue

@@ -66,7 +66,7 @@ const createText = (properties: typeof props) => {
     "fill" | "stroke" | "backgroundFill" | "backgroundStroke"
   >;
   const options: Options = {
-    ...innerProperties
+    ...innerProperties,
   };
   if (properties.fill) {
     options.fill = new Fill({ color: properties.fill });

Diff for: src/demos/TileWMSDemo.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,11 @@
       <ol-source-osm />
     </ol-tile-layer>
 
-    <ol-tile-layer :zIndex="1001">
+    <ol-tile-layer
+      :zIndex="1001"
+      :opacity="layerOpacity"
+      :visible="layerVisible"
+    >
       <ol-source-tile-wms
         url="https://ahocevar.com/geoserver/wms"
         :extent="[-13884991, 2870341, -7455066, 6338219]"
@@ -29,4 +52,6 @@ import { ref } from "vue";
 const zoom = ref(4);
 const rotation = ref(0);
 const center = ref([-10997148, 4569099]);
+const layerOpacity = ref(0.4);
+const layerVisible = ref(true);
 </script>