vue3-openlayers

Appearance

ol-animation-fade ​

Fade animation for feature

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
ts
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 UsageExplicit Import
<ol-animation-fade><Animations.OlAnimationFade>
vue
<template>
  <ol-map
    :loadTilesWhileAnimating="true"
    :loadTilesWhileInteracting="true"
    style="height: 400px"
  >
    <ol-view
      ref="view"
      :center="center"
      :zoom="zoom"
      :projection="projection"
    />

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

    <ol-vector-layer
      :updateWhileAnimating="true"
      :updateWhileInteracting="true"
    >
      <ol-source-vector ref="vectorsource">
        <ol-animation-fade :duration="4000">
          <ol-feature v-for="index in 20" :key="index">
            <ol-geom-point
              :coordinates="arrayWith500Points[index - 1]"
            ></ol-geom-point>

            <ol-style>
              <ol-style-icon :src="starIcon" :scale="0.1"></ol-style-icon>
            </ol-style>
          </ol-feature>
        </ol-animation-fade>
      </ol-source-vector>
    </ol-vector-layer>
  </ol-map>
</template>

<script setup>
import { ref } from "vue";
import starIcon from "@/assets/star.png";
import { arrayWith500Points } from "./points";

const center = ref([40, 40]);
const projection = ref("EPSG:4326");
const zoom = ref(6);
</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

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

easing ​

  • Type: function
  • Default: 0

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