refactor(ol-animated-clusterlayer): migrate to script setup

Author: d-koppenhagen

docs/componentsguide/layers/animatedclusterlayer/index.md

@@ -17,7 +17,7 @@ import AnimatedClusterDemo from "@demos/AnimatedClusterDemo.vue"
   <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
-    style="height:400px"
+    style="height: 400px"
   >
     <ol-view
       ref="view"
@@ -73,62 +73,47 @@ import AnimatedClusterDemo from "@demos/AnimatedClusterDemo.vue"
   </ol-map>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
 
 import markerIcon from "@/assets/marker.png";
 
-export default {
-  setup() {
-    const center = ref([40, 40]);
-    const projection = ref("EPSG:4326");
-    const zoom = ref(5);
-    const rotation = ref(0);
-
-    const overrideStyleFunction = (feature, style) => {
-      let clusteredFeatures = feature.get("features");
-      let size = clusteredFeatures.length;
-
-      let color = size > 20 ? "192,0,0" : size > 8 ? "255,128,0" : "0,128,0";
-      var radius = Math.max(8, Math.min(size, 20));
-      let dash = (2 * Math.PI * radius) / 6;
-      let calculatedDash = [0, dash, dash, dash, dash, dash, dash];
-
-      style.getImage().getStroke().setLineDash(dash);
-      style
-        .getImage()
-        .getStroke()
-        .setColor("rgba(" + color + ",0.5)");
-      style.getImage().getStroke().setLineDash(calculatedDash);
-      style
-        .getImage()
-        .getFill()
-        .setColor("rgba(" + color + ",1)");
-
-      style.getImage().setRadius(radius);
-
-      style.getText().setText(size.toString());
-    };
-
-    const getRandomInRange = (from, to, fixed) => {
-      return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
-    };
-
-    const featureSelected = (event) => {
-      console.log(event);
-    };
-
-    return {
-      center,
-      projection,
-      zoom,
-      rotation,
-      markerIcon,
-      getRandomInRange,
-      overrideStyleFunction,
-      featureSelected,
-    };
-  },
+const center = ref([40, 40]);
+const projection = ref("EPSG:4326");
+const zoom = ref(5);
+const rotation = ref(0);
+
+const overrideStyleFunction = (feature, style) => {
+  const clusteredFeatures = feature.get("features");
+  const size = clusteredFeatures.length;
+
+  const color = size > 20 ? "192,0,0" : size > 8 ? "255,128,0" : "0,128,0";
+  const radius = Math.max(8, Math.min(size, 20));
+  const dash = (2 * Math.PI * radius) / 6;
+  const calculatedDash = [0, dash, dash, dash, dash, dash, dash];
+
+  style.getImage().getStroke().setLineDash(dash);
+  style
+    .getImage()
+    .getStroke()
+    .setColor("rgba(" + color + ",0.5)");
+  style.getImage().getStroke().setLineDash(calculatedDash);
+  style
+    .getImage()
+    .getFill()
+    .setColor("rgba(" + color + ",1)");
+
+  style.getImage().setRadius(radius);
+
+  style.getText().setText(size.toString());
+};
+
+const getRandomInRange = (from, to, fixed) => {
+  return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
+};
+
+const featureSelected = (event) => {
+  console.log(event);
 };
 </script>
 ```
@@ -144,14 +129,14 @@ A CSS class name to set to the layer element.
 
 ### opacity
 
-- **Type**: `number `
+- **Type**: `number`
 - **Default**: `1`
 
 Opacity (0, 1).
 
 ### visible
 
-- **Type**: `boolean  `
+- **Type**: `boolean`
 - **Default**: `true`
 
 Visibility.

docs/componentsguide/layers/imagelayer/index.md

@@ -94,7 +94,7 @@ Opacity (0, 1).
 
 ### visible
 
-- **Type**: `boolean  `
+- **Type**: `boolean`
 - **Default**: `true`
 
 Visibility.

docs/componentsguide/layers/tilelayer/index.md

@@ -91,7 +91,7 @@ Opacity (0, 1).
 
 ### visible
 
-- **Type**: `boolean  `
+- **Type**: `boolean`
 - **Default**: `true`
 
 Visibility.

docs/componentsguide/layers/vectorimagelayer/index.md

@@ -89,7 +89,7 @@ Opacity (0, 1).
 
 ### visible
 
-- **Type**: `boolean  `
+- **Type**: `boolean`
 - **Default**: `true`
 
 Visibility.

docs/componentsguide/layers/vectorlayer/index.md

@@ -89,7 +89,7 @@ Opacity (0, 1).
 
 ### visible
 
-- **Type**: `boolean  `
+- **Type**: `boolean`
 - **Default**: `true`
 
 Visibility.

docs/componentsguide/layers/webgltilelayer/index.md

@@ -62,7 +62,7 @@ Opacity (0, 1).
 
 ### visible
 
-- **Type**: `boolean  `
+- **Type**: `boolean`
 - **Default**: `true`
 
 Visibility.

src/components/layers/AnimatedClusterLayer.vue

@@ -0,0 +1,82 @@
+<template lang="">
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { inject, provide, onUnmounted, onMounted, watch, computed } from "vue";
+import { Cluster } from "ol/source";
+import { easeOut } from "ol/easing";
+
+import AnimatedCluster from "ol-ext/layer/AnimatedCluster";
+import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import useBaseLayerProps from "@/composables/useBaseLayerProps";
+
+const props = defineProps({
+  ...useBaseLayerProps(),
+  animationDuration: {
+    type: Number,
+    default: 700,
+  },
+  distance: {
+    type: Number,
+    default: 20,
+  },
+  animationMethod: {
+    type: Function,
+    default: easeOut,
+  },
+  updateWhileAnimating: {
+    type: Boolean,
+    default: false,
+  },
+  updateWhileInteracting: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const map = inject("map");
+
+const { properties } = usePropsAsObjectProperties(props);
+
+const vectorLayer = computed(() => {
+  const ac = new AnimatedCluster({
+    ...properties,
+    source: new Cluster({
+      distance: properties.distance,
+      geometryFunction: (feature) => feature.getGeometry(),
+    }),
+  });
+
+  return ac;
+});
+
+const source = computed(() => vectorLayer.value.getSource());
+
+watch(properties, () => {
+  vectorLayer.value.setProperties(properties);
+  vectorLayer.value.changed();
+});
+
+onMounted(() => {
+  map.addLayer(vectorLayer.value);
+  vectorLayer.value.changed();
+  map.changed();
+});
+
+onUnmounted(() => {
+  map.removeLayer(vectorLayer.value);
+});
+
+provide("vectorLayer", source);
+provide("stylable", vectorLayer);
+
+defineExpose({
+  vectorLayer,
+  map,
+});
+</script>
+
+<style lang=""></style>

src/components/layers/OlAnimatedClusterLayer.vue

@@ -3,7 +3,7 @@ import WebGLTileLayer from "./WebGLTileLayer.vue";
 import ImageLayer from "./ImageLayer.vue";
 import VectorImageLayer from "./VectorImageLayer.vue";
 import VectorLayer from "./VectorLayer.vue";
-import AnimatedClusterLayer from "./AnimatedClusterLayer.vue";
+import OlAnimatedClusterLayer from "./OlAnimatedClusterLayer.vue";
 import WebglPointsLayer from "./WebglPointsLayer.vue";
 import HeatmapLayer from "./HeatmapLayer.vue";
 
@@ -14,12 +14,12 @@ function install(app) {
 
   install.installed = true;
 
+  app.component("ol-animated-clusterlayer", OlAnimatedClusterLayer);
   app.component(TileLayer.name, TileLayer);
   app.component(WebGLTileLayer.name, WebGLTileLayer);
   app.component(ImageLayer.name, ImageLayer);
   app.component(VectorImageLayer.name, VectorImageLayer);
   app.component(VectorLayer.name, VectorLayer);
-  app.component(AnimatedClusterLayer.name, AnimatedClusterLayer);
   app.component(WebglPointsLayer.name, WebglPointsLayer);
   app.component(HeatmapLayer.name, HeatmapLayer);
 }
@@ -28,12 +28,12 @@ export default install;
 
 export {
   install,
+  OlAnimatedClusterLayer,
   TileLayer,
   WebGLTileLayer,
   ImageLayer,
   VectorImageLayer,
   VectorLayer,
-  AnimatedClusterLayer,
   WebglPointsLayer,
   HeatmapLayer,
 };