Как я могу нарисовать анимированную линию, которая иллюстрирует поток между двумя точками через OpenLayers?

Question

Мне нужно показать, как вода течет из одной точки в другую.

Я пытался создать линию, похожую на индикатор выполнения из Bootstrap (https://getbootstrap.com/docs/4.3/components/progress/#animated-stripes) без удачи. Я довольно долго исследовал и не смог найти способ или расширение, которые могли бы решить мою проблему. проблема.

Поэтому я прошу экспорт OpenLayers о помощи.

Answer 1

Вы можете сделать это, настроив стили линий следующим образом:

1. Нарисуйте сплошной штрих / линия
2. Нарисуйте штриховой штрих / линию поверх верхней с меньшей шириной
3. В таймере увеличьте значение lineDashOffset пунктирной линии, что даст эффект анимации

Пример здесь: https://stackblitz.com/edit/ol-line-animation