refactor(ol-vector-image-layer): migrate to script setup

Author: d-koppenhagen

docs/componentsguide/layers/vectorimagelayer/index.md

@@ -23,7 +23,7 @@ Load features simply by providing url value and format GeoJSON
   <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
-    style="height:400px"
+    style="height: 400px"
   >
     <ol-view
       ref="view"
@@ -43,31 +43,17 @@ Load features simply by providing url value and format GeoJSON
   </ol-map>
 </template>
 
-<script>
+<script setup>
 import { ref, inject } from "vue";
-export default {
-  setup() {
-    const center = ref([0, 0]);
-    const projection = ref("EPSG:4326");
-    const zoom = ref(3);
-    const rotation = ref(0);
-
-    const url = ref("https://openlayers.org/data/vector/ecoregions.json");
-
-    const format = inject("ol-format");
-    console.log(format);
-    const geoJson = new format.GeoJSON();
-
-    return {
-      center,
-      projection,
-      zoom,
-      rotation,
-      url,
-      geoJson,
-    };
-  },
-};
+
+const center = ref([0, 0]);
+const projection = ref("EPSG:4326");
+const zoom = ref(3);
+const rotation = ref(0);
+
+const url = ref("https://openlayers.org/data/vector/ecoregions.json");
+const format = inject("ol-format");
+const geoJson = new format.GeoJSON();
 </script>
 ```
 
@@ -82,7 +68,7 @@ A CSS class name to set to the layer element.
 
 ### opacity
 
-- **Type**: `number `
+- **Type**: `number`
 - **Default**: `1`
 
 Opacity (0, 1).

src/components/layers/OlVectorImageLayer.vue

@@ -0,0 +1,59 @@
+<template lang="">
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { inject, provide, onUnmounted, onMounted, watch, computed } from "vue";
+
+import VectorImageLayer from "ol/layer/VectorImage";
+import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import useBaseLayerProps from "@/composables/useBaseLayerProps";
+
+const props = defineProps({
+  ...useBaseLayerProps(),
+  renderBuffer: {
+    type: Number,
+    default: 100,
+  },
+  updateWhileAnimating: {
+    type: Boolean,
+    default: false,
+  },
+  styles: {
+    type: [String, Array, Function],
+  },
+  updateWhileInteracting: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const map = inject("map");
+
+const { properties } = usePropsAsObjectProperties(props);
+
+const vectorImageLayer = computed(() => new VectorImageLayer(properties));
+
+watch(properties, () => {
+  vectorImageLayer.value.setProperties(properties);
+});
+
+onMounted(() => {
+  map.addLayer(vectorImageLayer.value);
+});
+
+onUnmounted(() => {
+  map.removeLayer(vectorImageLayer.value);
+});
+
+provide("vectorLayer", vectorImageLayer);
+provide("stylable", vectorImageLayer);
+
+defineExpose({
+  vectorImageLayer,
+});
+</script>
+
+<style lang=""></style>

src/components/layers/VectorImageLayer.vue

@@ -1,5 +1,5 @@
 import WebGLTileLayer from "./WebGLTileLayer.vue";
-import VectorImageLayer from "./VectorImageLayer.vue";
+import OlVectorImageLayer from "./OlVectorImageLayer.vue";
 import VectorLayer from "./VectorLayer.vue";
 import OlAnimatedClusterLayer from "./OlAnimatedClusterLayer.vue";
 import OlHeatmapLayer from "./OlHeatmapLayer.vue";
@@ -18,8 +18,8 @@ function install(app) {
   app.component("ol-heatmap-layer", OlHeatmapLayer);
   app.component("ol-image-layer", OlImageLayer);
   app.component("ol-tile-layer", OlTileLayer);
+  app.component("ol-vector-image-layer", OlVectorImageLayer);
   app.component(WebGLTileLayer.name, WebGLTileLayer);
-  app.component(VectorImageLayer.name, VectorImageLayer);
   app.component(VectorLayer.name, VectorLayer);
   app.component(WebglPointsLayer.name, WebglPointsLayer);
 }
@@ -32,8 +32,8 @@ export {
   OlHeatmapLayer,
   OlImageLayer,
   OlTileLayer,
+  OlVectorImageLayer,
   WebGLTileLayer,
-  VectorImageLayer,
   VectorLayer,
   WebglPointsLayer,
 };

src/components/layers/index.js

@@ -32,6 +32,5 @@ const rotation = ref(0);
 
 const url = ref("https://openlayers.org/data/vector/ecoregions.json");
 const format = inject("ol-format");
-console.log(format);
 const geoJson = new format.GeoJSON();
 </script>