ol-animated-clusterlayer

ol-animated-clusterlayer is a layer that animates clusters on zoom change. ol-interaction-clusterselect. is a select interaction. On select cluster springs apart to reveal the features. The revealed features are themselves selectable. Revealed features are themselves a cluster with an attribute 'features' that contain the original feature.

Demo

Setup

Plugin usage

This component is part of the Layers plugin. If not installed globally, you need to import and use the plugin in your main.ts or use the explicit component import (see section below).

Import and use the Layers plugin

import { createApp } from "vue";
import App from "./App.vue";

import {
  Map,
  Layers,
  Sources,
} from "vue3-openlayers";

const app = createApp(App);
// ...
app.use(Layers); 
// ...

Explicit import

If you don't want to install a plugin, you can import the component explicitly. It's available as a child of the named export Layers.

NOTE

The following documentation refers to the plugin usage. Please make sure to adopt the component names, when you decided to use explicit component imports (e. g. <ol-map> becomes <Map.OlMap> etc.).

Usage

Plugin Usage	Explicit Import
`<ol-animated-clusterlayer>`	`<Layers.OlAnimatedClusterlayer>`

AnimatedClusterDemo.vue

vue

<template>
  <ol-map
    :loadTilesWhileAnimating="true"
    :loadTilesWhileInteracting="true"
    style="height: 400px"
  >
    <ol-view
      ref="view"
      :center="center"
      :rotation="rotation"
      :zoom="zoom"
      :projection="projection"
    />

    <ol-tile-layer>
      <ol-source-osm />
    </ol-tile-layer>

    <ol-interaction-clusterselect
      @select="featureSelected"
      :pointRadius="20"
      :featureStyle="featureStyle"
    >
      <!-- style of the marked selected from the cluster items after first click on the cluster itself -->
      <ol-style>
        <ol-style-icon :src="markerIcon" :scale="0.05"></ol-style-icon>
      </ol-style>
    </ol-interaction-clusterselect>

    <ol-animated-clusterlayer :animationDuration="500" :distance="40">
      <ol-source-vector ref="vectorsource">
        <ol-feature v-for="index in 500" :key="index">
          <ol-geom-point
            :coordinates="arrayWith500Points[index - 1]"
          ></ol-geom-point>
        </ol-feature>
      </ol-source-vector>

      <ol-style :overrideStyleFunction="overrideStyleFunction">
        <ol-style-stroke color="red" :width="2"></ol-style-stroke>
        <ol-style-fill color="rgba(255,255,255,0.1)"></ol-style-fill>

        <ol-style-circle :radius="20">
          <ol-style-stroke
            color="black"
            :width="15"
            :lineDash="[]"
            lineCap="butt"
          ></ol-style-stroke>
          <ol-style-fill color="black"></ol-style-fill>
        </ol-style-circle>

        <ol-style-text>
          <ol-style-fill color="white"></ol-style-fill>
        </ol-style-text>
      </ol-style>
    </ol-animated-clusterlayer>
  </ol-map>
</template>

<script setup>
import { ref } from "vue";
import { Style, Stroke, Circle, Fill } from "ol/style";
import { arrayWith500Points } from "./points";

console.log(arrayWith500Points);

import markerIcon from "@/assets/marker.png";

const center = ref([40, 40]);
const projection = ref("EPSG:4326");
const zoom = ref(5);
const rotation = ref(0);

// style of the "artificial" item markers and lines connected to the cluster base after first click on the cluster -->
const featureStyle = () => {
  return [
    new Style({
      stroke: new Stroke({
        color: "#ab34c4",
        width: 2,
        lineDash: [5, 5],
      }),
      image: new Circle({
        radius: 5,
        stroke: new Stroke({
          color: "#ab34c4",
          width: 1,
        }),
        fill: new Fill({
          color: "#ab34c444",
        }),
      }),
    }),
  ];
};

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());
  return style;
};

const featureSelected = (event) => {
  console.log(event);
};
</script>

Performance hints

The performance of a map with a huge amount of markers / clusters can be influenced by the way the data is passed to the ol-source-vector. In case your map doesn't render correctly, interactive elements are blocking, or you are ending up with memory leaks, it's probably worth switching from passing the features directly to requesting features from a URL. You can find more information in the performance section for ol-source-vector.

vue

<template>
  <ol-map
    :loadTilesWhileAnimating="true"
    :loadTilesWhileInteracting="true"
    style="height: 400px"
  >
    <!-- ... -->

    <ol-animated-clusterlayer :animationDuration="500" :distance="40">
      <ol-source-vector :url="url" :format="geoJson" />
    </ol-animated-clusterlayer>
  </ol-map>
</template>

<script setup>
import { /* ... */, computed, inject } from "vue";

// ...

const format = inject("ol-format");
const geoJson = new format.GeoJSON();
const url = computed(() => {
  return `http://localhost:3000/${count.value}`;
});
</script>

Properties

className

Type: string
Default: ol-layer

A CSS class name to set to the layer element.

opacity

Type: number
Default: 1

Opacity (0, 1).

visible

Type: boolean
Default: true

Visibility.

extent

Type: Array

The bounding extent for layer rendering. The layer will not be rendered outside of this extent.

zIndex

Type: number

The z-index for layer rendering. When rendering, the layers will be ordered, first by Z-index and then by position.

minResolution

Type: number

The minimum resolution (inclusive) at which this layer will be visible.

maxResolution

Type: number

The maximum resolution (exclusive) below which this layer will be visible.

minZoom

Type: number

The minimum view zoom level (exclusive) above which this layer will be visible.

maxZoom

Type: number

The maximum view zoom level (inclusive) at which this layer will be visible.

renderBuffer

Type: number
Default: 100

The buffer in pixels around the viewport extent used by the renderer when getting features from the vector source for the rendering or hit-detection. Recommended value: the size of the largest symbol, line width or label.

updateWhileAnimating

Type: Boolean
Default: false

When set to true, feature batches will be recreated during animations. This means that no vectors will be shown clipped, but the setting will have a performance impact for large amounts of vector data. When set to false, batches will be recreated when no animation is active.

updateWhileInteracting

Type: Boolean
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 to see the available events tht will be fired.

html

<ol-animated-clusterlayer @error="handleEvent" />

ol-animated-clusterlayer ​

Demo ​

Setup ​

Plugin usage ​

Explicit import ​

Usage ​

Performance hints ​

Properties ​

className ​

opacity ​

visible ​

extent ​

zIndex ​

minResolution ​

maxResolution ​

minZoom ​

maxZoom ​

renderBuffer ​

updateWhileAnimating ​

updateWhileInteracting ​

Events ​