diff --git a/docs/componentsguide/layers/animatedclusterlayer/index.md b/docs/componentsguide/layers/animatedclusterlayer/index.md index 2dacaa93..223020f6 100644 --- a/docs/componentsguide/layers/animatedclusterlayer/index.md +++ b/docs/componentsguide/layers/animatedclusterlayer/index.md @@ -135,3 +135,12 @@ When set to true, feature batches will be recreated during animations. This mean - **Default**: `false` When set to true, feature batches will be recreated during interactions. See also updateWhileAnimating. + +## Events + +You have access to all Events from the underlying `Cluster` source. +Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_Cluster-Cluster.html) to see the available events tht will be fired. + +```html + +``` diff --git a/src/components/layers/OlAnimatedClusterLayer.vue b/src/components/layers/OlAnimatedClusterLayer.vue index 93a55c63..aaa4e756 100644 --- a/src/components/layers/OlAnimatedClusterLayer.vue +++ b/src/components/layers/OlAnimatedClusterLayer.vue @@ -17,6 +17,12 @@ import { } from "@/components/layers/LayersCommonProps"; import type { Point } from "ol/geom"; import type LayerGroup from "ol/layer/Group"; +import { FEATURE_EVENTS, useOpenLayersEvents } from "@/composables/useOpenLayersEvents"; + +// prevent warnings caused by event pass-through via useOpenLayersEvents composable +defineOptions({ + inheritAttrs: false, +}); const props = withDefaults( defineProps< @@ -45,18 +51,23 @@ const layerGroup = inject("layerGroup", null); const { properties } = usePropsAsObjectProperties(props); +const clusterSource = computed(() => { + return new Cluster({ + distance: properties.distance, + geometryFunction: (feature) => feature.getGeometry() as Point, + }); +}); + const vectorLayer = computed(() => { - const ac = new AnimatedCluster({ + return new AnimatedCluster({ ...properties, - source: new Cluster({ - distance: properties.distance, - geometryFunction: (feature) => feature.getGeometry() as Point, - }), + source: clusterSource.value, }); - - return ac; }); + +useOpenLayersEvents(clusterSource, FEATURE_EVENTS); + const source = computed(() => vectorLayer.value.getSource()); watch(properties, () => {