openlayers 实现点在线上运动的两种思路

前言

本人第一次接触openlayers 也是第一次写博客， 写的不好 见谅。希望能够帮助到您！

---

提示：以下是本篇文章正文内容，下面案例可供参考

openlayers 实现点在线上运动的两种思路

1.openlayers 官网示例

这里是官网示例
很好理解 这里就不做解释了。。。
核心部分：

api: getCoordinateAt()
官方解释 :  Return the coordinate at the provided fraction along the linestring. The fraction is a number between 0 and 1, where 0 is the start of the linestring and 1 is the end.
翻译: 返回沿线串提供的分数处的坐标。 分数是介于 0 和 1 之间的数字，其中 0 是线串的开始，1 是结束。

总结下：利用layer的postrender方法 触发时改变原点的位置，再渲染该图层 再次触发postrender方法 重复以上操作~~~

2.定时器 setTimeout — 我最终采用的方案

代码如下（示例）：

// 我们的产品设计为六个小圆点在线上（客户需求）
circleAnimation(f) {
   
      // 线 圆点样式
      const styles = {
   
        'route': new Style({
   
          stroke: new Stroke({
   
            width: 6,
            color: 'transparent',
          }),
        }),
        'geoMarker': new Style({
   
          image: new CircleStyle({
   
            radius: 3,
            fill: new Fill({
    color: 'rgb(255, 255, 255)' }),
            stroke: new Stroke({
   
              color