refactor(ol-layerswitcher-control): migrate to script setup

Author: d-koppenhagen

src/components/mapControls/LayerSwitcherControl.vue

@@ -5,10 +5,10 @@
 <script>
 import LayerSwitcherImage from "ol-ext/control/LayerSwitcherImage";
 import useControl from "@/composables/useControl";
-import LayerSwitcherControl from "./LayerSwitcherControl.vue";
+import OlLayerSwitcherControl from "./OlLayerSwitcherControl.vue";
 export default {
   name: "ol-layerswitcherimage-control",
-  extends: LayerSwitcherControl,
+  extends: OlLayerSwitcherControl,
   setup(props, context) {
     const { control } = useControl(LayerSwitcherImage, props, context);
     return {

src/components/mapControls/LayerSwitcherImageControl.vue

@@ -0,0 +1,66 @@
+<template lang="">
+  <div v-if="false"></div>
+</template>
+
+<script setup>
+import LayerSwitcher from "ol-ext/control/LayerSwitcher";
+import useControl from "@/composables/useControl";
+import { useAttrs } from "vue";
+
+const props = defineProps({
+  selection: {
+    type: Boolean,
+  },
+  displayInLayerSwitcher: {
+    type: Function,
+  },
+  show_progress: {
+    type: Boolean,
+    default: false,
+  },
+  mouseover: {
+    type: Boolean,
+    default: false,
+  },
+  reordering: {
+    type: Boolean,
+    default: true,
+  },
+  trash: {
+    type: Boolean,
+    default: false,
+  },
+  oninfo: {
+    type: Function,
+  },
+  extent: {
+    type: Boolean,
+  },
+  onextent: {
+    type: Function,
+  },
+  drawDelay: {
+    type: Number,
+  },
+  collapsed: {
+    type: Boolean,
+    default: true,
+  },
+  layerGroup: {
+    type: Object,
+  },
+  noScroll: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const attrs = useAttrs();
+const { control } = useControl(LayerSwitcher, props, { attrs });
+
+defineExpose({
+  control,
+});
+</script>
+
+<style lang=""></style>

src/components/mapControls/OlLayerSwitcherControl.vue

@@ -14,7 +14,7 @@ import SwipeControl from "./SwipeControl.vue";
 import ToggleControl from "./ToggleControl.vue";
 import PrintDialog from "./PrintDialog.vue";
 import VideoRecorderControl from "./VideoRecorderControl.vue";
-import LayerSwitcherControl from "./LayerSwitcherControl.vue";
+import OlLayerSwitcherControl from "./OlLayerSwitcherControl.vue";
 import LayerSwitcherImageControl from "./LayerSwitcherImageControl.vue";
 import ZoneControl from "./ZoneControl.vue";
 
@@ -41,7 +41,7 @@ function install(app) {
   app.component("ol-button-control", OlButtonControl);
   app.component(PrintDialog.name, PrintDialog);
   app.component(VideoRecorderControl.name, VideoRecorderControl);
-  app.component(LayerSwitcherControl.name, LayerSwitcherControl);
+  app.component("ol-layerswitcher-control", OlLayerSwitcherControl);
   app.component(LayerSwitcherImageControl.name, LayerSwitcherImageControl);
   app.component(ZoneControl.name, ZoneControl);
 }
@@ -55,6 +55,7 @@ export {
   OlContextMenuControl,
   OlControlBar,
   OlFullScreenControl,
+  OlLayerSwitcherControl,
   MousePositionControl,
   OverviewMapControl,
   ScaleLineControl,
@@ -66,7 +67,6 @@ export {
   ToggleControl,
   PrintDialog,
   VideoRecorderControl,
-  LayerSwitcherControl,
   LayerSwitcherImageControl,
   ZoneControl,
 };

src/components/mapControls/index.js

@@ -49,6 +49,14 @@
       <input type="checkbox" id="swipecontrol" v-model="showSwipeControl" />
       <label for="swipecontrol">swipe-control</label>
     </li>
+    <li>
+      <input
+        type="checkbox"
+        id="layerswitchercontrol"
+        v-model="showLayerSwitcherControl"
+      />
+      <label for="layerswitchercontrol">layerswitcher-control</label>
+    </li>
   </ul>
 
   <ol-map
@@ -91,6 +99,10 @@
       :layerList="layerList"
     />
 
+    <ol-layerswitcher-control
+      v-if="showLayerSwitcherControl && layerList.length > 0"
+    />
+
     <ol-tile-layer ref="jawgLayer" title="JAWG">
       <ol-source-xyz
         crossOrigin="anonymous"
@@ -125,6 +137,7 @@ const overviewmapcontrol = ref(true);
 const mousepositioncontrol = ref(true);
 const rotatecontrol = ref(true);
 const showSwipeControl = ref(true);
+const showLayerSwitcherControl = ref(true);
 
 onMounted(() => {
   layerList.value.push(jawgLayer.value.tileLayer);