closes #26,closes #30 baseLayer prop is added to all layer and bug fi…

…x for dublicate ol-control-toggle
MelihAltintas · Sep 12, 2021 · 1bc722d · 1bc722d
1 parent b19ea31
commit 1bc722d
Show file tree

Hide file tree

Showing 24 changed files with 97 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue3-openlayers",
-  "version": "0.1.44",
+  "version": "0.1.45",
   "description": "Openlayers Wrapper for Vue3",
   "repository": {
     "type": "git",

diff --git a/src/App.vue b/src/App.vue
@@ -15,15 +15,15 @@
         <ol-source-xyz crossOrigin='anonymous' url="https://c.tile.jawg.io/jawg-dark/{z}/{x}/{y}.png?access-token=87PWIbRaZAGNmYDjlYsLkeTVJpQeCfl2Y61mcHopxXqSdxXExoTLEv7dwqBwSWuJ" />
     </ol-tile-layer>
 
-    <ol-control-bar>
-        <ol-control-toggle html="<i class='fas fa-map-marker'></i>" className="edit" title="Point" :onToggle="(active)=>changeDrawType(active,'Point')" />
-        <ol-control-toggle html="<i class='fas fa-draw-polygon'></i>" className="edit" title="Polygon" :onToggle="(active)=>changeDrawType(active,'Polygon')" />
-        <ol-control-toggle html="<i class='fas fa-circle'></i>" className="edit" title="Circle" :onToggle="(active)=>changeDrawType(active,'Circle')" />
-        <ol-control-toggle html="<i class='fas fa-grip-lines'></i>" className="edit" title="LineString" :onToggle="(active)=>changeDrawType(active,'LineString')" />
-        <ol-control-videorecorder @stop="videoStopped">
+    <ol-control-bar >
+        <ol-control-toggle :order="0" html="<i class='fas fa-map-marker'></i>" className="edit" title="Point" :onToggle="(active)=>changeDrawType(active,'Point')" />
+        <ol-control-toggle :order="1" html="<i class='fas fa-draw-polygon'></i>" className="edit" title="Polygon" :onToggle="(active)=>changeDrawType(active,'Polygon')" />
+        <ol-control-toggle :order="2" html="<i class='fas fa-circle'></i>" className="edit" title="Circle" :onToggle="(active)=>changeDrawType(active,'Circle')" />
+        <ol-control-toggle :order="3" html="<i class='fas fa-grip-lines'></i>" className="edit" title="LineString" :onToggle="(active)=>changeDrawType(active,'LineString')" />
+        <ol-control-videorecorder  :order="4" @stop="videoStopped">
 
         </ol-control-videorecorder>
-        <ol-control-printdialog />
+        <ol-control-printdialog :order="5" />
     </ol-control-bar>
 
     <ol-mouseposition-control />
@@ -175,7 +175,6 @@ export default {
         const projection = ref('EPSG:4326')
         const zoom = ref(6)
         const rotation = ref(0)
-
         const format = inject('ol-format');
 
         const geoJson = new format.GeoJSON();
@@ -326,9 +325,11 @@ export default {
             layerList.value.push(osmLayer.value.tileLayer);
             console.log(layerList.value)
             console.log(animationPath.value)
+
         });
 
         return {
+
             center,
             projection,
             zoom,

diff --git a/src/components/layers/AnimatedClusterLayer.vue b/src/components/layers/AnimatedClusterLayer.vue
@@ -105,7 +105,11 @@ export default {
         preview: {
             type: String,
 
-        }
+        },
+        baseLayer: {
+            type: Boolean,
+
+        },
     }
 }
 </script>

diff --git a/src/components/layers/ImageLayer.vue b/src/components/layers/ImageLayer.vue
@@ -85,7 +85,11 @@ export default {
         preview: {
             type: String,
 
-        }
+        },
+        baseLayer: {
+            type: Boolean,
+
+        },
     }
 }
 </script>

diff --git a/src/components/layers/TileLayer.vue b/src/components/layers/TileLayer.vue
@@ -117,7 +117,11 @@ export default {
         preview: {
             type: String,
 
-        }
+        },
+        baseLayer:{
+            type: Boolean,
+
+        },
     }
 }
 </script>

diff --git a/src/components/layers/VectorLayer.vue b/src/components/layers/VectorLayer.vue
@@ -106,7 +106,11 @@ export default {
         preview: {
             type: String,
 
-        }
+        },
+        baseLayer: {
+            type: Boolean,
+
+        },
     }
 }
 </script>

diff --git a/src/components/mapControls/AttributionControl.vue b/src/components/mapControls/AttributionControl.vue
@@ -12,10 +12,10 @@ import useControl from '@/composables/useControl'
 
 export default {
     name: 'ol-attribution-control',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(Attribution, props);
+        } = useControl(Attribution, props,context);
         return {
             control
         }

diff --git a/src/components/mapControls/ContextMenuControl.vue b/src/components/mapControls/ContextMenuControl.vue
@@ -12,10 +12,10 @@ import useControl from '@/composables/useControl'
 
 export default {
     name: 'ol-context-menu',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(ContextMenu, props);
+        } = useControl(ContextMenu, props,context);
         return {
             control
         }

diff --git a/src/components/mapControls/ControlBar.vue b/src/components/mapControls/ControlBar.vue
@@ -10,10 +10,10 @@ import useControl from '@/composables/useControl'
 import {provide} from "vue"
 export default {
     name: 'ol-control-bar',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(Bar, props);
+        } = useControl(Bar, props,context);
 
         provide('controlBar',control)
         return {

diff --git a/src/components/mapControls/FullScreenControl.vue b/src/components/mapControls/FullScreenControl.vue
@@ -13,11 +13,11 @@ import useControl from '@/composables/useControl'
 
 export default {
     name: 'ol-fullscreen-control',
-    setup(props) {
+    setup(props,context) {
 
         const {
             control
-        } = useControl(FullScreen, props);
+        } = useControl(FullScreen, props,context);
         return {
             control
         }

diff --git a/src/components/mapControls/LayerSwitcherControl.vue b/src/components/mapControls/LayerSwitcherControl.vue
@@ -10,10 +10,10 @@ import useControl from '@/composables/useControl'
 
 export default {
     name: 'ol-layerswitcher-control',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(LayerSwitcher, props);
+        } = useControl(LayerSwitcher, props,context);
         return {
             control
         }

diff --git a/src/components/mapControls/LayerSwitcherImageControl.vue b/src/components/mapControls/LayerSwitcherImageControl.vue
@@ -11,10 +11,10 @@ import LayerSwitcherControl from './LayerSwitcherControl'
 export default {
     name: 'ol-layerswitcherimage-control',
     extends: LayerSwitcherControl,
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(LayerSwitcherImage, props);
+        } = useControl(LayerSwitcherImage, props,context);
         return {
             control
         }

diff --git a/src/components/mapControls/MousePositionControl.vue b/src/components/mapControls/MousePositionControl.vue
@@ -13,10 +13,10 @@ import useControl from '@/composables/useControl'
 
 export default {
     name: 'ol-mouseposition-control',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(MousePosition, props);
+        } = useControl(MousePosition, props,context);
         return {
             control
         }

diff --git a/src/components/mapControls/OverviewMapControl.vue b/src/components/mapControls/OverviewMapControl.vue
@@ -17,13 +17,13 @@ import {
 } from 'vue'
 export default {
     name: 'ol-overviewmap-control',
-    setup(props) {
+    setup(props,context) {
 
         const map = inject('map');
 
         const {
             control
-        } = useControl(OverviewMap, props);
+        } = useControl(OverviewMap, props,context);
 
         onMounted(() => {
             control.value.setMap(map);

diff --git a/src/components/mapControls/PrintDialog.vue b/src/components/mapControls/PrintDialog.vue
@@ -14,10 +14,10 @@ import { jsPDF } from "jspdf";
 
 export default {
     name: 'ol-control-printdialog',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(PrintDialog, props);
+        } = useControl(PrintDialog, props,context);
 
         control.value.on(['print','error'], function (e) {
 

diff --git a/src/components/mapControls/RotateControl.vue b/src/components/mapControls/RotateControl.vue
@@ -10,10 +10,10 @@ import Rotate from 'ol/control/Rotate';
 
 export default {
     name: 'ol-rotate-control',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(Rotate, props);
+        } = useControl(Rotate, props,context);
         return {
             control
         }

diff --git a/src/components/mapControls/ScaleLineControl.vue b/src/components/mapControls/ScaleLineControl.vue
@@ -13,10 +13,10 @@ import {
 
 export default {
     name: 'ol-scaleline-control',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(ScaleLine, props);
+        } = useControl(ScaleLine, props,context);
         return {
             control
         }

diff --git a/src/components/mapControls/SwipeControl.vue b/src/components/mapControls/SwipeControl.vue
@@ -12,10 +12,10 @@ import {
 } from "vue"
 export default {
     name: 'ol-swipe-control',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(Swipe, props);
+        } = useControl(Swipe, props,context);
 
         const {
             layerList

diff --git a/src/components/mapControls/ToggleControl.vue b/src/components/mapControls/ToggleControl.vue
@@ -8,13 +8,12 @@
 import Toggle from 'ol-ext/control/Toggle'
 
 import useControl from '@/composables/useControl'
-
 export default {
     name: 'ol-control-toggle',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(Toggle, props);
+        } = useControl(Toggle, props,context);
 
         return {
             control
@@ -37,7 +36,6 @@ export default {
         onToggle: {
             type: Function,
         },
-
     }
 }
 </script>

diff --git a/src/components/mapControls/VideoRecorderControl.vue b/src/components/mapControls/VideoRecorderControl.vue
@@ -14,24 +14,22 @@ import {toRefs} from 'vue'
 export default {
     name: 'ol-control-videorecorder',
     emits: ['start', 'stop'],
-    setup(props, {
-        emit
-    }) {
+    setup(props, context) {
 
         const {
             control
         } =
-        useControl(VideoRecorder, props);
+        useControl(VideoRecorder, props,context);
 
         const{downloadName} = toRefs(props)
 
         control.value.on("start", (event) => {
-            emit('start', event)
+            context.emit('start', event)
 
         })
 
         control.value.on("stop", (event) => {
-            emit('stop', event)
+            context.emit('stop', event)
             saveAs(event.videoURL, downloadName.value);
         })
         return {

diff --git a/src/components/mapControls/ZoomControl.vue b/src/components/mapControls/ZoomControl.vue
@@ -10,10 +10,10 @@ import useControl from '@/composables/useControl'
 
 export default {
     name: 'ol-zoom-control',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(Zoom, props);
+        } = useControl(Zoom, props,context);
         return {
             control
         }

diff --git a/src/components/mapControls/ZoomSliderControl.vue b/src/components/mapControls/ZoomSliderControl.vue
@@ -10,11 +10,11 @@ import ZoomSlider from 'ol/control/ZoomSlider';
 
 export default {
     name: 'ol-zoomslider-control',
-    setup(props) {
+    setup(props,context) {
 
         const {
             control
-        } = useControl(ZoomSlider, props);
+        } = useControl(ZoomSlider, props,context);
         return {
             control
         }

diff --git a/src/components/mapControls/ZoomToExtentControl.vue b/src/components/mapControls/ZoomToExtentControl.vue
@@ -11,10 +11,10 @@ import ZoomToExtent from 'ol/control/ZoomToExtent';
 
 export default {
     name: 'ol-zoomtoextent-control',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(ZoomToExtent, props);
+        } = useControl(ZoomToExtent, props,context);
         return {
             control
         }