ol-animation-slide
Slide 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
import { createApp } from "vue";
import App from "./App.vue";
import {
Map,
Layers,
Sources,
Animations,
} from "vue3-openlayers";
const app = createApp(App);
// ...
app.use(Animations);
// ...
2
3
4
5
6
7
8
9
10
11
12
13
14
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-slide> | <Animations.OlAnimationSlide> |
<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-slide :duration="2000">
<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-slide>
</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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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
speed
- Type:
Number
speed of the animation, if 0 the duration parameter will be used instead, default 0