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

closes #359

Author: d-koppenhagen

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,

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,

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,

src/demos/XYZSourceDemo.vue

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