From f080e83ece58f3e6ba7cbda47c53218170be9577 Mon Sep 17 00:00:00 2001
From: Boris Manojlovic <boris@steki.net>
Date: Sun, 5 Sep 2021 17:49:27 +0200
Subject: [PATCH] Add Image WMS  source: ol-source-image-wms (#23)

ol-source-image-wms is added
---
 src/components/sources/SourceImageWMS.vue | 128 ++++++++++++++++++++++
 src/components/sources/index.js           |   8 +-
 2 files changed, 134 insertions(+), 2 deletions(-)
 create mode 100644 src/components/sources/SourceImageWMS.vue

diff --git a/src/components/sources/SourceImageWMS.vue b/src/components/sources/SourceImageWMS.vue
new file mode 100644
index 00000000..e9a7e80e
--- /dev/null
+++ b/src/components/sources/SourceImageWMS.vue
@@ -0,0 +1,128 @@
+<template>
+<div v-if="false">
+
+</div>
+</template>
+
+<script>
+import ImageWMS from 'ol/source/ImageWMS';
+import Projection from 'ol/proj/Projection';
+
+import {
+    inject,
+    onMounted,
+    onUnmounted,
+    watch,
+} from 'vue'
+import usePropsAsObjectProperties from '@/composables/usePropsAsObjectProperties'
+
+export default {
+    name: 'ol-source-image-wms',
+    setup(props) {
+
+        const layer = inject('imageLayer');
+        const {
+            properties
+        } = usePropsAsObjectProperties(props);
+
+
+
+        const createSource = () => {
+            return new ImageWMS({
+                ...properties,
+                params: {
+                    'LAYERS': props.layers,
+                    'STYLES': props.styles
+                    },
+                projection: typeof properties.projection == "string" ? properties.projection : new Projection({
+                    ...properties.projection
+                })
+            });
+        };
+
+        let source = createSource();
+
+        watch(properties, () => {
+            layer.setSource(null)
+            source = createSource();
+            layer.setSource(source)
+
+        });
+        onMounted(() => {
+            layer.setSource(source)
+        });
+
+        onUnmounted(() => {
+            layer.setSource(null)
+        });
+
+        return {
+            layer,
+            source
+        }
+    },
+    props: {
+        attributions: {
+            type: String
+        },
+        crossOrigin: {
+            type: String
+        },
+        imageExtent: {
+            type: Array
+        },
+        projection: {
+            type: [String, Object],
+            default: 'EPSG:3857'
+        },
+        reprojectionErrorThreshold: {
+            type: Number,
+            default: 0.5
+        },
+        format: {
+            type: String,
+            default: 'image/png'
+        },
+        version: {
+            type: String,
+            default: '1.3.0'
+        },
+        matrixSet: {
+            type: String
+        },
+        serverType: {
+            type: String,
+            default: 'mapserver'
+        },
+        imageSmoothing: {
+            type: Boolean,
+            default: true
+        },
+        layers: {
+            type: [String,Array],
+            required: true
+        },
+        styles: {
+            type: [String,Array],
+            default: ''
+        },
+        ratio: {
+            type: Number,
+            default: 1
+        },
+        imageSize: {
+            type: Array
+        },
+        url: {
+            type: String
+        },
+        params: {
+            type: Object
+        }
+    }
+}
+</script>
+
+<style lang="">
+
+</style>
diff --git a/src/components/sources/index.js b/src/components/sources/index.js
index aabbec88..5a1ba4ff 100644
--- a/src/components/sources/index.js
+++ b/src/components/sources/index.js
@@ -6,6 +6,8 @@ import SourceVector from './SourceVector.vue'
 import SourceCluster from './SourceCluster.vue'
 import SourceBingMaps from './SourceBingMaps.vue'
 import SourceTianDiTu from './SourceTianDiTu.vue'
+import SourceImageWMS from './SourceImageWMS.vue'
+
 function install (app) {
 
     if (install.installed) {
@@ -22,6 +24,7 @@ function install (app) {
     app.component(SourceCluster.name, SourceCluster)
     app.component(SourceBingMaps.name, SourceBingMaps)
     app.component(SourceTianDiTu.name, SourceTianDiTu)
+    app.component(SourceImageWMS.name, SourceImageWMS)
   }
   
   export default install
@@ -34,5 +37,6 @@ function install (app) {
     SourceWMTS,
     SourceVector,
     SourceCluster,
-    SourceTianDiTu
-  }
\ No newline at end of file
+    SourceTianDiTu,
+    SourceImageWMS,
+  }