add WebGLTileLayer and update version of openlayers with performance (#68)

fixes

Author: bmanojlovic

package.json

@@ -40,7 +40,7 @@
     "core-js": "^3.6.5",
     "file-saver": "^2.0.5",
     "jspdf": "^2.3.1",
-    "ol": "^6.6.1",
+    "ol": "^6.12.0",
     "ol-contextmenu": "^4.1.0",
     "ol-ext": "^3.2.4",
     "proj4": "^2.7.5",

src/components/layers/WebGLTileLayer.vue

@@ -0,0 +1,87 @@
+<template lang="">
+<div>
+    <slot></slot>
+</div>
+</template>
+
+<script>
+import {
+    inject,
+    provide,
+    onUnmounted,
+    onMounted,
+    watch,
+    computed
+} from 'vue'
+
+import TileLayer from 'ol/layer/WebGLTile';
+import usePropsAsObjectProperties from '@/composables/usePropsAsObjectProperties'
+import BaseLayer from "./BaseLayer"
+export default {
+    extends: BaseLayer,
+    name: 'ol-webgl-tile-layer',
+    setup(props) {
+
+        const map = inject('map');
+        const overViewMap = inject('overviewMap', null);
+
+        const {
+            properties
+        } = usePropsAsObjectProperties(props);
+
+        const tileLayer = computed(() => new TileLayer(properties));
+
+        const applyTileLayer = () => {
+
+            if (overViewMap != null) {
+                overViewMap.value.getOverviewMap().addLayer(tileLayer.value);
+                overViewMap.value.changed();
+            } else {
+                map.addLayer(tileLayer.value);
+            }
+        };
+
+        const removeTileLayer = () => {
+
+            if (overViewMap != null) {
+                overViewMap.value.getOverviewMap().removeLayer(tileLayer.value);
+                overViewMap.value.changed();
+            } else {
+                map.removeLayer(tileLayer.value);
+            }
+        };
+
+        if (overViewMap != null) {
+            watch(overViewMap, () => {
+                removeTileLayer();
+                applyTileLayer();
+
+            });
+        }
+
+        onMounted(() => {
+            applyTileLayer();
+        });
+
+        onUnmounted(() => {
+            removeTileLayer();
+        });
+
+        provide('tileLayer', tileLayer);
+
+        return {
+            tileLayer
+        }
+    },
+    props: {  
+        preload: {
+            type: Number,
+            default: 1
+        },
+    }
+}
+</script>
+
+<style lang="">
+
+</style>

src/components/layers/index.js

@@ -1,4 +1,5 @@
 import TileLayer from './TileLayer.vue'
+import WebGLTileLayer from './WebGLTileLayer.vue'
 import ImageLayer from './ImageLayer.vue'
 import VectorLayer from './VectorLayer.vue'
 import AnimatedClusterLayer from './AnimatedClusterLayer'
@@ -13,6 +14,7 @@ function install(app) {
   install.installed = true
 
   app.component(TileLayer.name, TileLayer)
+  app.component(WebGLTileLayer.name, WebGLTileLayer)
   app.component(ImageLayer.name, ImageLayer)
   app.component(VectorLayer.name, VectorLayer)
   app.component(AnimatedClusterLayer.name, AnimatedClusterLayer)
@@ -24,6 +26,7 @@ export default install
 export {
   install,
   TileLayer,
+  WebGLTileLayer,
   ImageLayer,
   VectorLayer,
   AnimatedClusterLayer,