refactor(ol-source-image-wms): pass-through all props and events from ol/source/ImageWMS

Author: d-koppenhagen

docs/componentsguide/sources/imagewms/index.md

@@ -54,74 +54,67 @@ const center = ref([-10997148, 4569099]);
 
 ## Properties
 
-### attributions
+### Props from OpenLayers
 
-- **Type**: `string`
-
-Attributions
-
-### crossOrigin
-
-- **Type**: `string`
-- **Default**: `ol-layer`
-
-The crossOrigin attribute for loaded images. Note that you must provide a crossOrigin value if you want to access pixel data with the Canvas renderer.
-
-### hidpi
-
-- **Type**: `Boolean`
-- **Default**: `true`
-
-### serverType
-
-- **Type**: `string`
+Properties are passed-trough from OpenLayers directly.
+Their types and default values can be checked-out [in the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_ImageWMS-ImageWMS.html).
+Only some properties deviate caused by reserved keywords from Vue / HTML.
+This deviating props are described in the section below.
 
-The type of the remote WMS server: mapserver, geoserver or qgis. Only needed if hidpi is true.
+### Deviating Properties
 
-### imageLoadFunction
+The following additional properties are available for setting specific `params`.
 
-- **Type**: `Function`
+#### layers
 
-Optional function to load an image given a URL
+Sets / overrides the `params.LAYERS` property.
 
-### imageSmoothing
+- **Type**: `string` | `unknown[]`
 
-- **Type**: `Boolean`
-- **Default**: `true`
+#### styles
 
-Enable image smoothing.
+Sets / overrides the `params.STYLES` property.
 
-### layers
+- **Type**: `string` | `unknown[]`
 
-- **Type**: `[String,Array]`
+#### time
 
-### styles
+Sets / overrides the `params.TIME` property.
 
-- **Type**: `[String,Array]`
-
-### ratio
-
-- **Type**: `number`
-- **Default**: `1.5`
+- **Type**: `string`
 
-Ratio. 1 means image requests are the size of the map viewport, 2 means twice the width and height of the map viewport, and so on. Must be 1 or higher.
+## Events
 
-### resolutions
+You have access to all Events from the underlying source.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_ImageWMS-ImageWMS.html) to see the available events tht will be fired.
 
-- **Type**: `Array<number>`
+```html
+<ol-source-image-wms :url="imgUrl" @error="handleEvent" />
+```
 
-Resolutions. If specified, requests will be made for these resolutions only.
+## Methods
 
-### url
+You have access to all Methods from the underlying source.
+Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_ImageWMS-ImageWMS.html) to see the available methods.
 
-- **Type**: `string`
+To access the source, you can use a `ref()` as shown below:
 
-WMS service URL.
+```vue
+<template>
+  <!-- ... -->
+  <ol-source-image-wms :url="url" ref="sourceRef" />
+  <!-- ... -->
+</template>
 
-### params
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type ImageWMS from "ol/source/ImageWMS";
 
-WMS request parameters.
-`VERSION` is `1.3.0` by default.
-`WIDTH`, `HEIGHT`, `BBOX` and `CRS` (`SRS` for WMS version < `1.3.0`) will be set dynamically.
+const sourceRef = ref<{ source: ImageWMS }>(null);
 
-- **Type**: `Object.<string, *>`
+onMounted(() => {
+  const source: ImageWMS = sourceRef.value?.source;
+  // call your method on `source`
+});
+</script>
+```

src/components/sources/OlSourceImageWMS.vue

@@ -2,38 +2,22 @@
   <div v-if="false"></div>
 </template>
 <script setup lang="ts">
-import ImageWMS from "ol/source/ImageWMS";
-import type { Options as ProjectionOptions } from "ol/proj/Projection";
-import Projection from "ol/proj/Projection";
+import ImageWMS, { type Options } from "ol/source/ImageWMS";
 import { inject, onMounted, onUnmounted, watch } from "vue";
-import type { Extent } from "ol/extent";
 import type ImageLayer from "ol/layer/Image";
 import type ImageSource from "ol/source/Image";
-import type { ServerType } from "ol/source/wms";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import type { ProjectionLike } from "ol/proj";
+import projectionFromProperties from "@/helpers/projection";
+import eventGateway from "@/helpers/eventGateway";
 
 const props = withDefaults(
-  defineProps<{
-    attributions?: string;
-    crossOrigin?: string;
-    imageExtent?: Extent;
-    projection?: ProjectionLike;
-    reprojectionErrorThreshold?: number;
-    format?: string;
-    version?: string;
-    matrixSet?: string;
-    serverType?: ServerType;
-    imageSmoothing?: boolean;
-    layers: string | unknown[];
-    styles?: string | unknown[];
-    time?: string;
-    ratio?: number;
-    imageSize?: number[];
-    url?: string;
-    params?: Record<string, unknown>;
-    imageLoadFunction?: (...args: unknown[]) => unknown;
-  }>(),
+  defineProps<
+    Options & {
+      layers: string | unknown[];
+      styles?: string | unknown[];
+      time?: string;
+    }
+  >(),
   {
     projection: "EPSG:3857",
     reprojectionErrorThreshold: 0.5,
@@ -45,27 +29,33 @@ const props = withDefaults(
     ratio: 1,
   }
 );
+const emit = defineEmits([]);
 
 const layer = inject<ImageLayer<ImageSource> | null>("imageLayer");
 const { properties } = usePropsAsObjectProperties(props);
 
 const createSource = () => {
-  return new ImageWMS({
+  const i = new ImageWMS({
     ...properties,
     params: {
       ...props.params,
       LAYERS: props.layers,
       STYLES: props.styles,
       TIME: props.time,
     },
-    projection:
-      typeof properties.projection === "string"
-        ? properties.projection
-        : // @ts-ignore
-          new Projection({
-            ...properties.projection,
-          }),
+    projection: projectionFromProperties(properties.projection),
   });
+
+  eventGateway(emit, i, [
+    "change",
+    "error",
+    "imageloadend",
+    "imageloaderror",
+    "imageloadstart",
+    "propertychange",
+  ]);
+
+  return i;
 };
 
 let source = createSource();