Add Image WMS source: ol-source-image-wms (#23)

ol-source-image-wms is added

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>

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
-  }
+    SourceTianDiTu,
+    SourceImageWMS,
+  }