fix(ol-tile-layer): do not spread props into toRefs

closes #410

Author: d-koppenhagen

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

@@ -28,7 +28,7 @@ const props = withDefaults(
 );
 defineEmits<Emits>();
 
-const { layer } = useLayer(TileLayer, toRefs({ ...props }), [
+const { layer } = useLayer(TileLayer, toRefs(props), [
   "change:useInterimTilesOnError",
   "change:preload",
 ]);

Diff for: src/demos/XYZSourceDemo.vue

@@ -1,13 +1,27 @@
 <template>
   <form>
-    <select v-model="selected" class="select-default">
-      <option value="https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png">
-        OSM
-      </option>
-      <option value="https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}">
-        GOOGLE
-      </option>
-    </select>
+    <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>
+      <select v-model="selected" class="select-default">
+        <option value="https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png">
+          OSM
+        </option>
+        <option value="https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}">
+          GOOGLE
+        </option>
+      </select>
+    </fieldset>
   </form>
   {{ selected }}
   <ol-map
@@ -22,7 +36,7 @@
       :projection="projection"
     />
 
-    <ol-tile-layer>
+    <ol-tile-layer :opacity="layerOpacity">
       <ol-source-xyz :url="selected" />
     </ol-tile-layer>
   </ol-map>
@@ -35,4 +49,5 @@ const center = ref([40, 40]);
 const projection = ref("EPSG:4326");
 const zoom = ref(8);
 const selected = ref("https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png");
+const layerOpacity = ref(1);
 </script>