fix(ol-source-xyz): watch for changed props

closes #359

Author: d-koppenhagen

Diff for: src/components/sources/OlSourceXYZ.vue

@@ -8,7 +8,6 @@ import { inject } from "vue";
 import type TileLayer from "ol/layer/Tile";
 import type { ImageTile } from "ol";
 import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
-import type { TileGrid } from "ol/tilegrid";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -37,15 +36,7 @@ const props = withDefaults(defineProps<Options>(), {
 
 const layer = inject<Ref<TileLayer<XYZ>> | null>("tileLayer");
 
-const { source } = useSource(
-  XYZ,
-  layer,
-  {
-    ...props,
-    tileGrid: props.tileGrid as TileGrid | undefined,
-  },
-  TILE_SOURCE_EVENTS,
-);
+const { source } = useSource(XYZ, layer, props, TILE_SOURCE_EVENTS);
 
 defineExpose({
   layer,

Diff for: src/components/sources/OlSourceXyz.vue

@@ -8,7 +8,6 @@ import { inject } from "vue";
 import type TileLayer from "ol/layer/Tile";
 import type { ImageTile } from "ol";
 import { TILE_SOURCE_EVENTS } from "@/composables/useOpenLayersEvents";
-import type { TileGrid } from "ol/tilegrid";
 import useSource from "@/composables/useSource";
 
 // prevent warnings caused by event pass-through via useOpenLayersEvents composable
@@ -37,15 +36,7 @@ const props = withDefaults(defineProps<Options>(), {
 
 const layer = inject<Ref<TileLayer<XYZ>> | null>("tileLayer");
 
-const { source } = useSource(
-  XYZ,
-  layer,
-  {
-    ...props,
-    tileGrid: props.tileGrid as TileGrid | undefined,
-  },
-  TILE_SOURCE_EVENTS,
-);
+const { source } = useSource(XYZ, layer, props, TILE_SOURCE_EVENTS);
 
 defineExpose({
   layer,

Diff for: src/composables/useSource.ts

@@ -20,22 +20,32 @@ export default function useSource<T extends Source>(
   props: ConstructorParameters<typeof SourceClass>[0],
   eventsToHandle: string[] = [],
 ) {
-  const properties = usePropsAsObjectProperties({
-    ...props,
-    ...(props.projection
-      ? {
-          projection: projectionFromProperties(
-            props.projection as ProjectionLike,
-          ),
-        }
-      : {}),
-  });
+  function createSource() {
+    const properties = usePropsAsObjectProperties({
+      ...props,
+      ...(props.projection
+        ? {
+            projection: projectionFromProperties(
+              props.projection as ProjectionLike,
+            ),
+          }
+        : {}),
+    });
 
-  const source = shallowRef(new SourceClass(properties));
+    return shallowRef(new SourceClass(properties));
+  }
+
+  let source = createSource();
 
-  useOpenLayersEvents(source, eventsToHandle);
+  const { updateOpenLayersEventHandlers } = useOpenLayersEvents(
+    source,
+    eventsToHandle,
+  );
 
   function updateSource() {
+    source = createSource();
+    updateOpenLayersEventHandlers();
+    layer?.value?.setSource(null);
     layer?.value?.setSource(source.value);
   }
 
@@ -49,7 +59,7 @@ export default function useSource<T extends Source>(
 
   watch(() => layer, updateSource);
 
-  watch(() => properties, updateSource, { deep: true, immediate: true });
+  watch(() => props, updateSource, { deep: true, immediate: true });
 
   return {
     source,

Diff for: src/demos/XYZSourceDemo.vue

@@ -9,6 +9,7 @@
       </option>
     </select>
   </form>
+  {{ selected }}
   <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"