reactivity, opacity and so on

[bmanojlovic]

Describe the bug
reactivity in vue works as is but values do not change for opacity or visibility (just opacity in version bellow) on openlayers level
at all, yeah i assume it is something totally trivial but can't figure out what
https://stackblitz.com/edit/vitejs-vite-34ktn3?file=src%2Fcomponents%2FTheMap.vue
Affected version(s)

Please run npm list --depth=0 vue vue3-openlayers ol ol-ext ol-contextmenu and paste the output below:

<VERSION_OUTPUT>

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. macOS]
• Browser [e.g. chrome, safari]

Smartphone (please complete the following information):

• Device: [e.g. iPhone 14]
• OS: [e.g. iOS 16.15.1]
• Browser [e.g. chrome, safari]

Additional context
Add any other context about the problem here.

[d-koppenhagen]

To make values reactive, the should be wraped into a ref:

-const center = fromLonLat([21.0059, 44.0165]);
-const zoom = 7;
-const projection = 'EPSG:3857';
-const osmVisible = true;
+const center = ref(fromLonLat([21.0059, 44.0165]));
+const zoom = ref(7);
+const projection = ref('EPSG:3857');
+const osmVisible = ref(true);

[bmanojlovic]

are you joking???
const layerOpacity = ref(0.99);
and that is a problematic value osmVisible is not relevant at all

[bmanojlovic]

let me slowly explain....
there is slider that you can slide around and its value is REACTIVE and it does not work at all
and to prove MY point of reactive thing i have added

{{ layerOpacity }}

so you can understand
https://stackblitz.com/edit/vitejs-vite-hnwumw?file=src%2Fcomponents%2FTheMap.vue

[d-koppenhagen]

Okay, now I got the point. Sorry. I repoened it. I think it's a bug in the tileLayer implementation. I Will take over the example in the demo app and reproduce and fix it. But it will take a bit of time. Feel free to investigate by yourself and send me a PR if you are faster :)

[bmanojlovic]

i did investigate and did not find really anything problematic to be honest, not an expert in programming - but will try to investigate more

[bmanojlovic]

lets call this "workaround" to make it work, using direct manipulation of openlayers.
of course still looking for real problem solution.

<template>
  <div>
    <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height: 400px; width: 800px">
      <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" />
      <ol-zoom-control />

      <ol-tile-layer :zIndex="1000">
        <ol-source-osm />
      </ol-tile-layer>

      <ol-image-layer :zIndex="1001">
        <ol-source-image-wms ref="imagewms" url="https://ahocevar.com/geoserver/wms" :extent="[-13884991, 2870341, -7455066, 6338219]" layers="topp:states" serverType="geoserver" />
      </ol-image-layer>
    </ol-map>
    <div>
      <label v-for="option in opacityOptions" :key="option.value">
        <input type="radio" v-model="opacity" :value="option.value" />
        {{ option.label }}
      </label>
    </div>
    {{ opacity }}
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const zoom = ref(4);
const rotation = ref(0);
const center = ref([-10997148, 4569099]);
const opacity = ref(30); // Default opacity set to 30%
const opacityOptions = [
  { label: '0%', value: 0 },
  { label: '10%', value: 10 },
  { label: '20%', value: 20 },
  { label: '30%', value: 30 },
  { label: '40%', value: 40 },
  { label: '50%', value: 50 },
  { label: '60%', value: 60 },
  { label: '70%', value: 70 },
  { label: '80%', value: 80 },
  { label: '90%', value: 90 },
  { label: '100%', value: 100 },
];
const imagewms = ref(null);
watch(opacity, (newOpacityValue) => {
  const newOpacity = newOpacityValue / 100;
  if (imagewms.value) {
    imagewms.value.layer.setOpacity(newOpacity);
  }
});
</script>