1

I need to be able to illustrate water flowing from one point to another.

I have been trying to design a line similar to the progress bar from Bootstrap (https://getbootstrap.com/docs/4.3/components/progress/#animated-stripes) without luck. I have researched for quite a while and not able to find a way or extension which were able to solve my problem.

I am therefore asking an OpenLayers export for help.

SOK
  • 515
  • 6
  • 21
  • What´s about this solution? https://stackoverflow.com/questions/55587144/how-to-draw-linestring-from-consecutive-points-of-array-in-openlayers –  Jun 07 '19 at 15:04

1 Answers1

2

You can do this by setting the line styles up in the following manner:

  1. Draw a solid stroke/line
  2. Draw a dashed stroke/line over the top with a smaller width
  3. On a timer, increment the lineDashOffset of the dashed line, which will give an animation effect

Example here: https://stackblitz.com/edit/ol-line-animation

wlf
  • 3,086
  • 1
  • 19
  • 29