Skip to content

Commit

Permalink
feat(ol-animated-clusterlayer): emit all Cluster events
Browse files Browse the repository at this point in the history
  • Loading branch information
d-koppenhagen committed Sep 20, 2023
1 parent dbc7a71 commit 0867d4b
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 7 deletions.
9 changes: 9 additions & 0 deletions docs/componentsguide/layers/animatedclusterlayer/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
<ol-animated-clusterlayer @error="handleEvent" />
```
25 changes: 18 additions & 7 deletions src/components/layers/OlAnimatedClusterLayer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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<
Expand Down Expand Up @@ -45,18 +51,23 @@ const layerGroup = inject<LayerGroup | null>("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, () => {
Expand Down

0 comments on commit 0867d4b

Please # to comment.