zones add

Author: MelihAltintas

Diff for: package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-openlayers",
-  "version": "0.1.48",
+  "version": "0.1.49",
   "description": "Openlayers Wrapper for Vue3",
   "repository": {
     "type": "git",

Diff for: src/App.vue

@@ -7,6 +7,10 @@
 
     <ol-layerswitcherimage-control />
 
+    <ol-zone-control :zones="zones" :projection="projection" :layer="jawgLayer.tileLayer" v-if="jawgLayer != null">
+
+    </ol-zone-control>
+
     <ol-tile-layer ref="osmLayer" title="OSM">
         <ol-source-osm />
     </ol-tile-layer>
@@ -326,6 +330,18 @@ export default {
 
         });
 
+        const zones = [{
+            title: "Turkey",
+            extent: [17.952,46.241,52.449,31.222]
+        },
+        {
+            title: "Cyprus",
+            extent: [31.2836,36.1623,35.5957,34.1823]
+        }, {
+            title: "Brazil",
+            extent: [-120.32,22.76,17.67,-47.52]
+        }]
+
         return {
 
             center,
@@ -358,7 +374,8 @@ export default {
             starIcon,
             changeDrawType,
             path,
-            animationPath
+            animationPath,
+            zones
         }
     },
 }

Diff for: src/assets/style.css

@@ -40,4 +40,21 @@
 
 .ol-collapsed:hover {
     background-color: rgba(255,255,255,0);
+}
+
+.ol-control.ol-mapzone {
+    top: 12.5em !important;
+}
+
+.ol-control.ol-mapzone button {
+
+ margin-top: 0em !important; 
+}
+
+.ol-layerswitcher-image button {
+    background-color: transparent !important;
+}
+
+.ol-mapzone > div p {
+    background-color: black !important;
 }

Diff for: src/components/mapControls/ZoneControl.vue

@@ -0,0 +1,47 @@
+<template lang="">
+<div v-if="false">
+
+</div>
+</template>
+
+<script>
+import Zone from 'ol-ext/control/MapZone';
+import useControl from '@/composables/useControl'
+
+export default {
+    name: 'ol-zone-control',
+    setup(props,context) {
+        const {
+            control
+        } = useControl(Zone, props,context);
+        return {
+            control
+        }
+
+    },
+    props: {
+        className: {
+            type: String,
+        },
+        zones: {
+            type: Array,
+        },
+        layer: {
+            type: [Object,Function],
+        },
+        projection: {
+            type: String,
+            default: 'EPSG:3857'
+        },
+        centerOnClick: {
+            type: Boolean,
+            default: true
+        },
+
+    }
+}
+</script>
+
+<style lang="">
+
+</style>

Diff for: src/components/mapControls/index.js

@@ -15,6 +15,7 @@ import PrintDialog from './PrintDialog.vue'
 import VideoRecorderControl from './VideoRecorderControl.vue'
 import LayerSwitcherControl from './LayerSwitcherControl.vue'
 import LayerSwitcherImageControl from './LayerSwitcherImageControl.vue'
+import ZoneControl from './ZoneControl.vue'
 function install (app) {
 
     if (install.installed) {
@@ -40,6 +41,7 @@ function install (app) {
     app.component(VideoRecorderControl.name, VideoRecorderControl)
     app.component(LayerSwitcherControl.name, LayerSwitcherControl)
     app.component(LayerSwitcherImageControl.name, LayerSwitcherImageControl)
+    app.component(ZoneControl.name, ZoneControl)
   }
 
   export default install
@@ -61,5 +63,6 @@ function install (app) {
     PrintDialog,
     VideoRecorderControl,
     LayerSwitcherControl,
-    LayerSwitcherImageControl
+    LayerSwitcherImageControl,
+    ZoneControl
   }