fix: apply URL changes on XYZ source

closes #383

Author: d-koppenhagen

src/components/sources/OlSourceXYZ.vue

@@ -3,12 +3,14 @@
 </template>
 <script setup lang="ts">
 import XYZ, { type Options } from "ol/source/XYZ";
-import type { Ref } from "vue";
+import { type Ref, watch } from "vue";
 import { inject } from "vue";
 import type TileLayer from "ol/layer/Tile";
 import type { ImageTile } from "ol";
 import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
+import type { Source } from "ol/source";
+import type { UrlFunction } from "ol/Tile";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
@@ -35,7 +37,22 @@ const props = withDefaults(defineProps<Options>(), {
 
 const layer = inject<Ref<TileLayer<XYZ>> | null>("tileLayer");
 
-const { source } = useSource(XYZ, layer, props, TILE_SOURCE_EVENTS);
+const { source, updateSource } = useSource(
+  XYZ,
+  layer,
+  props,
+  TILE_SOURCE_EVENTS,
+  (source) => {
+    if (props.url) {
+      source.setUrl(props.url);
+    }
+  },
+);
+
+watch(
+  () => props.url,
+  () => updateSource(),
+);
 
 defineExpose({
   layer,

src/components/sources/OlSourceXyz.vue

@@ -3,12 +3,14 @@
 </template>
 <script setup lang="ts">
 import XYZ, { type Options } from "ol/source/XYZ";
-import type { Ref } from "vue";
+import { type Ref, watch } from "vue";
 import { inject } from "vue";
 import type TileLayer from "ol/layer/Tile";
 import type { ImageTile } from "ol";
 import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
 import useSource from "@/composables/useSource";
+import type { Source } from "ol/source";
+import type { UrlFunction } from "ol/Tile";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
 defineOptions({
@@ -35,7 +37,22 @@ const props = withDefaults(defineProps<Options>(), {
 
 const layer = inject<Ref<TileLayer<XYZ>> | null>("tileLayer");
 
-const { source } = useSource(XYZ, layer, props, TILE_SOURCE_EVENTS);
+const { source, updateSource } = useSource(
+  XYZ,
+  layer,
+  props,
+  TILE_SOURCE_EVENTS,
+  (source) => {
+    if (props.url) {
+      source.setUrl(props.url);
+    }
+  },
+);
+
+watch(
+  () => props.url,
+  () => updateSource(),
+);
 
 defineExpose({
   layer,

src/composables/useSource.ts

@@ -19,6 +19,8 @@ export default function useSource<T extends Source>(
   layer: Ref<Layer> | Ref<Cluster> | null | undefined,
   props: ConstructorParameters<typeof SourceClass>[0],
   eventsToHandle: string[] = [],
+  // eslint-disable-next-line
+  sourceUpdateActions?: (source: T) => void,
 ) {
   function getProperties() {
     return usePropsAsObjectProperties({
@@ -46,6 +48,9 @@ export default function useSource<T extends Source>(
         source.value.set(key, properties[keyInObj]);
       }
     }
+    if (sourceUpdateActions) {
+      sourceUpdateActions(source.value);
+    }
     layer?.value?.setSource(source.value);
     useOpenLayersEvents(source, eventsToHandle);
     return source;