refactor(ol-source-cluster): migrate to script setup

Author: d-koppenhagen

docs/componentsguide/sources/cluster/index.md

@@ -1,6 +1,8 @@
 # ol-source-cluster
 
-Layer source to cluster vector data. Works out of the box with point geometries. For other geometry types, or if not all geometries should be considered for clustering, a custom geometryFunction can be defined.
+Layer source to cluster vector data.
+Works out of the box with point geometries.
+For other geometry types, or if not all geometries should be considered for clustering, a custom geometryFunction can be defined.
 
 <script setup>
 import ClusterDemo from "@demos/ClusterDemo.vue"
@@ -21,7 +23,7 @@ This example shows how to do clustering on 1000 point features.
     ref="map"
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
-    style="height:800px"
+    style="height: 800px"
   >
     <ol-view
       ref="view"
@@ -38,7 +40,7 @@ This example shows how to do clustering on 1000 point features.
     <ol-vector-layer>
       <ol-source-cluster :distance="40">
         <ol-source-vector>
-          <ol-feature v-for="index in 1000" :key="index">
+          <ol-feature v-for="index in 300" :key="index">
             <ol-geom-point
               :coordinates="[
                 getRandomInRange(24, 45, 3),
@@ -65,38 +67,35 @@ This example shows how to do clustering on 1000 point features.
   </ol-map>
 </template>
 
-<script>
-import { ref, inject } from "vue";
-
-export default {
-  setup() {
-    const center = ref([34, 39.13]);
-    const projection = ref("EPSG:4326");
-    const zoom = ref(6.8);
-    const rotation = ref(0);
-
-    const overrideStyleFunction = (feature, style) => {
-      let clusteredFeatures = feature.get("features");
-      let size = clusteredFeatures.length;
-
-      style.getText().setText(size.toString());
-    };
-
-    const getRandomInRange = (from, to, fixed) => {
-      return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
-    };
-
-    return {
-      center,
-      projection,
-      zoom,
-      rotation,
-      overrideStyleFunction,
-      getRandomInRange,
-    };
-  },
+<script setup>
+import { ref } from "vue";
+
+const center = ref([34, 39.13]);
+const projection = ref("EPSG:4326");
+const zoom = ref(6.8);
+const rotation = ref(0);
+
+const overrideStyleFunction = (feature, style) => {
+  const clusteredFeatures = feature.get("features");
+  const size = clusteredFeatures.length;
+
+  style.getText().setText(size.toString());
+};
+
+const getRandomInRange = (from, to, fixed) => {
+  return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
 };
 </script>
+
+<style>
+.overlay-content {
+  background: red !important;
+  color: white;
+  box-shadow: 0 5px 10px rgb(2 2 2 / 20%);
+  padding: 10px 20px;
+  font-size: 16px;
+}
+</style>
 ```
 
 ## Properties

src/components/sources/OlSourceCluster.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { Cluster } from "ol/source";
+
+import { inject, watch, onMounted, onUnmounted, provide, computed } from "vue";
+
+import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+
+const props = defineProps({
+  attributions: {
+    type: [String, Array],
+  },
+  distance: {
+    type: Number,
+    default: 20,
+  },
+  geometryFunction: {
+    type: Function,
+    default: (feature) => feature.getGeometry(),
+  },
+  wrapX: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const layer = inject("vectorLayer");
+
+const { properties } = usePropsAsObjectProperties(props);
+
+const source = computed(() => {
+  const c = new Cluster(properties);
+  return c;
+});
+
+const applySource = () => {
+  layer.value.setSource(null);
+  layer.value.setSource(source.value);
+  layer.value.changed();
+};
+watch(properties, () => {
+  applySource();
+});
+
+watch(layer, () => {
+  applySource();
+});
+
+onMounted(() => {
+  layer.value.setSource(source.value);
+  layer.value.changed();
+});
+
+onUnmounted(() => {
+  layer.value.setSource(null);
+});
+
+provide("vectorLayer", source);
+
+defineExpose({
+  layer,
+  source,
+});
+</script>
+
+<style lang=""></style>

src/components/sources/SourceCluster.vue

@@ -1,10 +1,10 @@
+import OlSourceBingMaps from "./OlSourceBingMaps.vue";
+import OlSourceCluster from "./OlSourceCluster.vue";
 import OlSourceXYZ from "./OlSourceXYZ.vue";
 import OlSourceWMTS from "./OlSourceWMTS.vue";
 import SourceOSM from "./SourceOSM.vue";
 import SourceImageStatic from "./SourceImageStatic.vue";
 import SourceVector from "./SourceVector.vue";
-import SourceCluster from "./SourceCluster.vue";
-import SourceBingMaps from "./SourceBingMaps.vue";
 import SourceTianDiTu from "./SourceTianDiTu.vue";
 import SourceImageWMS from "./SourceImageWMS.vue";
 import SourceTileWMS from "./SourceTileWMS.vue";
@@ -21,10 +21,10 @@ function install(app) {
   app.component("ol-source-bingmaps", OlSourceBingMaps);
   app.component("ol-source-xyz", OlSourceXYZ);
   app.component("ol-source-wmts", OlSourceWMTS);
+  app.component("ol-source-cluster", OlSourceCluster);
   app.component(SourceOSM.name, SourceOSM);
   app.component(SourceImageStatic.name, SourceImageStatic);
   app.component(SourceVector.name, SourceVector);
-  app.component(SourceCluster.name, SourceCluster);
   app.component(SourceTianDiTu.name, SourceTianDiTu);
   app.component(SourceImageWMS.name, SourceImageWMS);
   app.component(SourceTileWMS.name, SourceTileWMS);
@@ -37,12 +37,12 @@ export default install;
 export {
   install,
   OlSourceBingMaps,
+  OlSourceCluster,
   OlSourceXYZ,
   OlSourceWMTS,
   SourceOSM,
   SourceImageStatic,
   SourceVector,
-  SourceCluster,
   SourceTianDiTu,
   SourceImageWMS,
   SourceTileWMS,

src/components/sources/index.js

@@ -47,36 +47,23 @@
   </ol-map>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
 
-export default {
-  setup() {
-    const center = ref([34, 39.13]);
-    const projection = ref("EPSG:4326");
-    const zoom = ref(6.8);
-    const rotation = ref(0);
+const center = ref([34, 39.13]);
+const projection = ref("EPSG:4326");
+const zoom = ref(6.8);
+const rotation = ref(0);
 
-    const overrideStyleFunction = (feature, style) => {
-      const clusteredFeatures = feature.get("features");
-      const size = clusteredFeatures.length;
+const overrideStyleFunction = (feature, style) => {
+  const clusteredFeatures = feature.get("features");
+  const size = clusteredFeatures.length;
 
-      style.getText().setText(size.toString());
-    };
-
-    const getRandomInRange = (from, to, fixed) => {
-      return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
-    };
+  style.getText().setText(size.toString());
+};
 
-    return {
-      center,
-      projection,
-      zoom,
-      rotation,
-      overrideStyleFunction,
-      getRandomInRange,
-    };
-  },
+const getRandomInRange = (from, to, fixed) => {
+  return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
 };
 </script>