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

closes #410

Author: d-koppenhagen

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",
 ]);

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>