Vue + Openlayers 自定义轨迹动画

<template>
  <div class="map-warp">
    <h3>
      <a
        href="https://openlayers.org/en/latest/examples/feature-move-animation.html?q=polyline"
        target="_bank"
      >OpenlayersTrack</a>

      <!--js 轨迹回放 https://blog.csdn.net/Himire/article/details/80296738 -->
    </h3>
    <div class="progress-bar">
      <div class="bar-box">
        <div class="bar" :style="{width:progress+'%'}">
          <span>{
   {
   progress}}%</span>
        </div>
      </div>
    </div>
    <div id="map" class="map"></div>
    <el-row :gutter="20">
      <el-col :span="5">
        <label for="speed">
          运动速度:&nbsp;
          <input id="speed" type="range" step="10" value="5" />
        </label>
      </el-col>
      <el-col :span="5">
        <button @click="handlerPlay">{
   {
   textContent}}</button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import "ol/ol.css";
import Feature from "ol/Feature";
import Map from "ol/Map";
import View from "ol/View";
import Polyline from "ol/format/Polyline";
import {
    Projection } from "ol/proj";
import {
    Point, LineString } from "ol/geom";
import {
    Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import XYZ from "ol/source/XYZ";
import VectorSource from "ol/source/Vector";
import {
   
  Circle as CircleStyle,
  Fill,
  Icon,
  Stroke,
  Style,
  Text
} from "ol/style";
import {
    getVectorContext } from "ol/render";

export default {
   
  data() {
   
    return {
   
      map: null,
      progress: 0, // 进度
      animating: false, // 动画是否开始
      speed: null, // 速度
      now: null, // 当前时间
      textContent: "开始",
      routeCoords: null, // 数组点集合
      routeLength: null, // 数组长度
      route: null, // 线
      routeFeature: null, // 画线
      geoMarker: null, // 标记
      startMarker: null, // 开始标记
      endMarker: null, // 结束标记
      styles: {
   
        route: new Style({
   
          // 线的样式
          stroke: new Stroke({
   
            width: 6,
            color: [237, 212, 0, 0.8]
          })
        }),
        icon