ol-animation-path

Animate along a path

• Demo
• Setup
  • Plugin usage
  • Explicit import
• Usage
• Properties
  • duration
  • revers
  • repeat
  • easing
  • hiddenStyle
  • fade
  • rotate
  • speed
  • path

Demo

Setup

Plugin usage

This component is part of the Animations 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 Animations plugin

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

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

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

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 Animations.

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-animation-path>	<Animations.OlAnimationPath>

FlowLineDemo.vue

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

    <ol-tile-layer title="OSM">
      <ol-source-osm />
    </ol-tile-layer>

    <ol-vector-layer>
      <ol-source-vector>
        <ol-feature ref="animationPath">
          <ol-geom-line-string :coordinates="path"></ol-geom-line-string>
          <ol-style-flowline
            color="red"
            color2="yellow"
            :width="10"
            :width2="10"
            :arrow="1"
          />
        </ol-feature>
        <ol-animation-path
          v-if="animationPath"
          :path="animationPath?.feature"
          :duration="4000"
          :repeat="10"
        >
          <ol-feature>
            <ol-geom-point :coordinates="path[0]"></ol-geom-point>
            <ol-style>
              <ol-style-circle :radius="10">
                <ol-style-fill color="blue"></ol-style-fill>
                <ol-style-stroke color="blue" :width="2"></ol-style-stroke>
              </ol-style-circle>
            </ol-style>
          </ol-feature>
        </ol-animation-path>
      </ol-source-vector>
    </ol-vector-layer>
  </ol-map>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type AnimationPath from "ol-ext/featureanimation/Path";

const center = ref([29, 44.5]);
const projection = ref("EPSG:4326");
const zoom = ref(6);
const animationPath = ref<{ feature: AnimationPath } | null>(null);

const path = ref([
  [25.6064453125, 44.73302734375001],
  [27.759765625, 44.75500000000001],
  [28.287109375, 43.32677734375001],
  [30.55029296875, 46.40294921875001],
  [31.69287109375, 43.04113281250001],
]);
</script>

Properties

duration

• Type: Number
• Default: 1000

duration of the animation in ms, default 1000

revers

• Type: Boolean
• Default: false

revers the animation direction

repeat

• Type: Number
• Default: 0

number of time to repeat the animation, default 0

easing

• Type: function
• Default: 0

an easing function for the animation, default ol.easing.linear

hiddenStyle

• Type: ol.style.Style

a style to display the feature when playing the animation to be used to make the feature selectable when playing animation , default the feature will be hidden when playing (and not selectable)

fade

• Type: function
• Default: none

an easing function used to fade in the feature, default none

rotate

• Type: Boolean
• Default: true

speed

• Type: Number

speed of the feature if 0 the duration parameter will be used instead, default 0

path

• Type: Number[]

The path the animation applies to.