openlayers之轨迹回放（附加暂停、继续播放功能）

 <div id="map"></div>  <label for="speed">      speed:&nbsp;      <input id="speed" type="range" min="10" max="999" step="10" value="60">  </label>  <button id="start-animation">Start Animation</button> <script>  var center =  [-5639523.95, -3501274.52];      var map = new ol.Map({ 
             target: document.getElementById('map'),     view: new ol.View({ 
                 center: center,         zoom: 10 ,         minZoom: 2,         maxZoom: 18,     }),     layers: [         new ol.layer.Tile({ 
          source: new ol.source.OSM(), //底图 }) ], }); //polyline 从官网拿到的json数据，最后转为[[],[],[]...] var polyline = 'hldhx@lnau`BCG_EaC??cFjAwDjF??uBlKMd@}@z@??aC^yk@z_@se@b[wFdE??wFfE}NfIoGxB_I\\gG}@eHoCyTmPqGaBaHOoD\\??yVrGotA|N??o[N_STiwAtEmHGeHcAkiA}^aMyBiHOkFNoI`CcVvM??gG^gF_@iJwC??eCcA]OoL}DwFyCaCgCcCwDcGwHsSoX??wI_EkUFmq@hBiOqBgTwS??iYse@gYq\\cp@ce@{vA}s@csJqaE}{@iRaqE{lBeRoIwd@_T{]_Ngn@{PmhEwaA{SeF_u@kQuyAw]wQeEgtAsZ}LiCarAkVwI}D??_}RcjEinPspDwSqCgs@sPua@_OkXaMeT_Nwk@ob@gV}TiYs[uTwXoNmT{Uyb@wNg]{Nqa@oDgNeJu_@_G}YsFw]kDuZyDmm@i_@uyIJe~@jCg|@nGiv@zUi_BfNqaAvIow@dEed@dCcf@r@qz@Egs@{Acu@mCum@yIey@gGig@cK_m@aSku@qRil@we@{mAeTej@}Tkz@cLgr@aHko@qOmcEaJw~C{w@kai@qBchBq@kmBS{kDnBscBnFu_Dbc@_~QHeU`IuyDrC_}@bByp@fCyoA?qMbD}{AIkeAgBk_A_A{UsDke@gFej@qH{o@qGgb@qH{`@mMgm@uQus@kL{_@yOmd@ymBgwE}x@ouBwtA__DuhEgaKuWct@gp@cnBii@mlBa_@}|Asj@qrCg^eaC}L{dAaJ_aAiOyjByH{nAuYu`GsAwXyn@ywMyOyqD{_@cfIcDe}@y@aeBJmwA`CkiAbFkhBlTgdDdPyiB`W}xDnSa}DbJyhCrXitAhT}x@bE}Z_@qW_Kwv@qKaaAiBgXvIm}A~JovAxCqW~WanB`XewBbK{_A`K}fBvAmi@xBycBeCauBoF}}@qJioAww@gjHaPopA_NurAyJku@uGmi@cDs[eRaiBkQstAsQkcByNmaCsK_uBcJgbEw@gkB_@ypEqDoqSm@eZcDwjBoGw`BoMegBaU_`Ce_@_uBqb@ytBwkFqiT_fAqfEwe@mfCka@_eC_UmlB}MmaBeWkkDeHwqAoX}~DcBsZmLcxBqOwqE_DkyAuJmrJ\\o~CfIewG|YibQxBssB?es@qGciA}RorAoVajA_nAodD{[y`AgPqp@mKwr@ms@umEaW{dAmb@umAw|@ojBwzDaaJsmBwbEgdCsrFqhAihDquAi`Fux@}_Dui@_eB_u@guCuyAuiHukA_lKszAu|OmaA{wKm}@clHs_A_rEahCssKo\\sgBsSglAqk@yvDcS_wAyTwpBmPc|BwZknFoFscB_GsaDiZmyMyLgtHgQonHqT{hKaPg}Dqq@m~Hym@c`EuiBudIabB{hF{pWifx@snAw`GkFyVqf@y~BkoAi}Lel@wtc@}`@oaXi_C}pZsi@eqGsSuqJ|Lqeb@e]kgPcaAu}SkDwzGhn@gjYh\\qlNZovJieBqja@ed@siO{[ol\\kCmjMe\\isHorCmec@uLebB}EqiBaCg}@m@qwHrT_vFps@kkI`uAszIrpHuzYxx@e{Crw@kpDhN{wBtQarDy@knFgP_yCu\\wyCwyA{kHo~@omEoYmoDaEcPiuAosDagD}rO{ 
         {AsyEihCayFilLaiUqm@_bAumFo}DgqA_uByi@swC~AkzDlhA}xEvcBa}Cxk@ql@`rAo|@~bBq{@``Bye@djDww@z_C_cAtn@ye@nfC_eC|gGahH~s@w}@``Fi~FpnAooC|u@wlEaEedRlYkrPvKerBfYs}Arg@m}AtrCkzElw@gjBbh@woBhR{gCwGkgCc[wtCuOapAcFoh@uBy[yBgr@c@iq@o@wvEv@sp@`FajBfCaq@fIipAdy@ewJlUc`ExGuaBdEmbBpBssArAuqBBg}@s@g{AkB{bBif@_bYmC}r@kDgm@sPq_BuJ_s@{X_{AsK_d@eM{d@wVgx@oWcu@??aDmOkNia@wFoSmDyMyCkPiBePwAob@XcQ|@oNdCoSfFwXhEmOnLi\\lbAulB`X_d@|k@au@bc@oc@bqC}{BhwDgcD`l@ed@??bL{G|a@eTje@oS~]cLr~Bgh@|b@}Jv}EieAlv@sPluD{z@nzA_]`|KchCtd@sPvb@wSb{@ko@f`RooQ~e[upZbuIolI|gFafFzu@iq@nMmJ|OeJn^{Qjh@yQhc@uJ~j@iGdd@kAp~BkBxO{@|QsAfYgEtYiGd]}Jpd@wRhVoNzNeK`j@ce@vgK}cJnSoSzQkVvUm^rSgc@`Uql@xIq\\vIgg@~kDyq[nIir@jNoq@xNwc@fYik@tk@su@neB}uBhqEesFjoGeyHtCoD|D}Ed|@ctAbIuOzqB_}D~NgY`\\um@v[gm@v{Cw`G`w@o{AdjAwzBh{C}`Gpp@ypAxn@}mAfz@{bBbNia@??jIab@`CuOlC}YnAcV`@_^m@aeB}@yk@YuTuBg^uCkZiGk\\yGeY}Lu_@oOsZiTe[uWi[sl@mo@soAauAsrBgzBqgAglAyd@ig@asAcyAklA}qAwHkGi{@s~@goAmsAyDeEirB_{B}IsJuEeFymAssAkdAmhAyTcVkFeEoKiH}l@kp@wg@sj@ku@ey@uh@kj@}EsFmG}Jk^_r@_f@m~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL' var route = new ol.format.Polyline({ 
          factor: 1e6, }).readGeometry(polyline, { 
          dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857', }); var routeLength = route.A.length; var routeCoords = [] var routeCoordsX = [] var routeCoordsY = [] for(var i=0;i<route.A.length;i++) { 
          if(i%2 ==0){ 
          routeCoordsX.push(route.A[i]) }else{ 
          routeCoordsY.push(route.A[i]) } } // 将[1,2,3,4,5,6...]转为[[1,2],[3,4],[5,6]...] for(var i=0;i<routeCoordsX.length;i++) { 
          routeCoords.push([routeCoordsX[i],routeCoordsY[i]]) } // 矢量元素要呈现的几何图形的特征属性LineString代表线段 var routes = new ol.geom.LineString(routeCoords); var routeLength = routeCoords.length; // var routeCoords =[ // [120.97202539443971,29.149083495140076], // [121.27202539443971,29.149083495140076], // [121.99202539443971,29.149083495140076], // [122.27202539443971,29.149083495140076], // [123.27202539443971,29.149083495140076], // [123.97202539443971,29.149083495140076], // [125.0260719060898,30.149083495140076], // [129.0260719060898,29.115327894687653] // ] // var route = new ol.geom.LineString(routeCoords); // 定义矢量元素 var routeFeature = new ol.Feature({ 
          type: 'route', geometry: routes, }); var geoMarker = new ol.Feature({ 
          type: 'geoMarker', geometry: new ol.geom.Point(routeCoords[0]), }); var startMarker = new ol.Feature({ 
          type: 'iconStart', geometry: new ol.geom.Point(routeCoords[0]), }); var endMarker = new ol.Feature({ 
          type: 'iconEnd', geometry: new ol.geom.Point(routeCoords[routeLength - 1]), }); // 设置矢量元素样式 var styles = { 
          'route': new ol.style.Style({ 
          stroke: new ol.style.Stroke({ 
          width: 6, color: [237, 212, 0, 0.8], }), }), 'iconStart': new ol.style.Style({ 
          image: new ol.style.Icon({ 
          anchor: [0.5, 0.5], src: './startSend.png', }), }), 'iconEnd': new ol.style.Style({ 
          image: new ol.style.Icon({ 
          anchor: [0.5, 0.5], src: './endAll.png', }), }), 'geoMarker': new ol.style.Style({ 
          image: new ol.style.Icon({ 
          anchor: [0.5, 0.5], //图标中心 src: './plane.png', scale: 0.6, rotation:-Math.atan2(routeCoords[0][1]-routeCoords[1][1], routeCoords[0][0]-routeCoords[1][0]), rotateWithView:true }), }), }; // 是否处于动画状态 var animating = false; // 定义的是图层类型Vector代表矢量图层源 var vectorLayer = new ol.layer.Vector({ 
          source: new ol.source.Vector({ 
          features: [routeFeature, geoMarker, startMarker, endMarker], }), style: function (feature) { 
          console.log(feature.get('type')) if (animating && feature.get('type') === 'geoMarker') { 
          return null; } return styles[feature.get('type')]; }, }); map.addLayer(vectorLayer); var speed, startTime; var speedInput = document.getElementById('speed'); var startButton = document.getElementById('start-animation'); // 动画方法 function moveFeature(event) { 
          // console.log(event) var vectorContext = event.vectorContext // var vectorContext = getVectorContext(event); var frameState = event.frameState; var carStyle,rotation; // 开始动画 if (animating) { 
          var elapsedTime = frameState.time - startTime; var index = Math.round(speed * elapsedTime/1000); //已经走了多少个点 // 点走完停止动画 if (index >= routeCoords.length) { 
          stopAnimation(true); return; } if(routeCoords[index] && routeCoords[index+1]){ 
          // console.log(route.A[index],route.A[index+1]) x=routeCoords[index][0]-routeCoords[index+1][0]; y=routeCoords[index][1]-routeCoords[index+1][1]; // 返回从原点(0,0)到(x,y)点的线段与x轴正方向之间的弧度值 rotation = Math.atan2(y,x); console.log(rotation) // 设置动画时的图标 carStyle= new ol.style.Style({ 
          image: new ol.style.Icon({ 
          src: './plane.png', rotateWithView: false, rotation: (-rotation+(Math.atan2(routeCoords[0][1]-routeCoords[1][1], routeCoords[0][0]-routeCoords[1][0])/2)), scale:0.6, anchor: [0.5, 0.5], //图标中心 }) }); // 矢量元素要呈现的几何图形的特征属性Point代表点 var currentPoint = new ol.geom.Point(routeCoords[index]); // 添加矢量元素 var feature = new ol.Feature(currentPoint); // 将特征渲染到画布中(功能，样式) vectorContext.drawFeature(feature, carStyle); } } map.render(); } function startAnimation() { 
          // console.log(animating) if (animating) { 
          stopAnimation(false); } else { 
          animating = true; startTime = new Date().getTime(); speed = speedInput.value; startButton.textContent = 'Cancel Animation'; // 隐藏geoMarker geoMarker.changed(); // just in case you pan somewhere else map.getView().setCenter(center); // 添加事件，地图渲染时触发 map.on('postcompose', moveFeature); map.render(); } } function stopAnimation(ended) { 
          animating = false; startButton.textContent = 'Start Animation'; // if animation cancelled set the marker at the beginning var coord = route.getCoordinateAt(ended ? 1 : 0); geoMarker.getGeometry().setCoordinates(coord); // remove listener map.un('postcompose', moveFeature); } startButton.addEventListener('click', startAnimation, false); </script> 

——------------------------------------------------------------------------------------------------------------------

<template>
  <div class="path">
    <div id="map" />
    <label for="speed">
      speed:&nbsp;
      <input id="speed"
             type="range"
             min="10"
             max="999"
             step="10"
             value="60">
    </label>
    <el-button id="start-animation">开始</el-button>
    <el-button id="pause-animation">暂停</el-button>
    <el-button id="continue-animation">继续</el-button>
    <el-button id="stop-animation">结束</el-button>
  </div>
</template>

<script>
import Feature from 'ol/Feature'
import map from 'ol/Map'
import Point from 'ol/geom/Point'
import Polyline from 'ol/format/Polyline'
import VectorSource from 'ol/source/Vector'
import View from 'ol/View'
import XYZ from 'ol/source/XYZ'
import LineString from 'ol/geom/LineString'
import Style from 'ol/style/Style'
import Icon from 'ol/style/Icon'
import Stroke from 'ol/style/Stroke'
import TileLayer from 'ol/layer/Tile'
import VectorLayer from 'ol/layer/Vector'
export default { 
        
  name: 'Path',
  data () { 
        
    return { 
        
      center: [-5639523.95, -3501274.52],
      map: null,
      polyline: '',
      route: null,
      routes: null,
      routeLength: 0,
      routeCoords: [],
      routeCoordsX: [],
      routeCoordsY: [],
      routeFeature: null,
      geoMarker: null,
      startMarker: null,
      endMarker: null,
      styles: { 
        },
      animating: false,
      vectorLayer: null,
      speed: undefined,
      startTime: undefined,
      speedInput: undefined,
      startButton: undefined,
      stoptime: null,
      timer: null,
      elapsedTime: 0,
      timerFlag: false,
      index: 0
    }
  },
  mounted () { 
        
    this.initMap()
    this.startButton.addEventListener('click', this.startAnimation, false)
    this.pauseButton.addEventListener('click', this.pauseAnimation, false)
    this.continueButton.addEventListener(
      'click',
      this.continueAnimation,
      false
    )
    this.stopButton.addEventListener('click', this.stopAnimation, false)
  },
  methods: { 
        
    initMap () { 
        
      const that = this
      var seamap = new TileLayer({ 
        
        source: new XYZ({ 
        
          url: 'http://112.126.96.159/Ship/Map?z={z}&y={y}&x={x}',
          projection: 'EPSG:3857'
        })
      })
      this.map = new map({ 
        
        target: 'map',
        view: new View({ 
        
          center: this.center,
          zoom: 10,
          minZoom: 2,
          maxZoom: 18
        }),
        layers: [seamap]
      })
      this.polyline =
        'hldhx@lnau`BCG_EaC??cFjAwDjF??uBlKMd@}@z@??aC^yk@z_@se@b[wFdE??wFfE}NfIoGxB_I\\gG}@eHoCyTmPqGaBaHOoD\\??yVrGotA|N??o[N_STiwAtEmHGeHcAkiA}^aMyBiHOkFNoI`CcVvM??gG^gF_@iJwC??eCcA]OoL}DwFyCaCgCcCwDcGwHsSoX??wI_EkUFmq@hBiOqBgTwS??iYse@gYq\\cp@ce@{vA}s@csJqaE}{@iRaqE{lBeRoIwd@_T{]_Ngn@{PmhEwaA{SeF_u@kQuyAw]wQeEgtAsZ}LiCarAkVwI}D??_}RcjEinPspDwSqCgs@sPua@_OkXaMeT_Nwk@ob@gV}TiYs[uTwXoNmT{Uyb@wNg]{Nqa@oDgNeJu_@_G}YsFw]kDuZyDmm@i_@uyIJe~@jCg|@nGiv@zUi_BfNqaAvIow@dEed@dCcf@r@qz@Egs@{Acu@mCum@yIey@gGig@cK_m@aSku@qRil@we@{mAeTej@}Tkz@cLgr@aHko@qOmcEaJw~C{w@kai@qBchBq@kmBS{kDnBscBnFu_Dbc@_~QHeU`IuyDrC_}@bByp@fCyoA?qMbD}{AIkeAgBk_A_A{UsDke@gFej@qH{o@qGgb@qH{`@mMgm@uQus@kL{_@yOmd@ymBgwE}x@ouBwtA__DuhEgaKuWct@gp@cnBii@mlBa_@}|Asj@qrCg^eaC}L{dAaJ_aAiOyjByH{nAuYu`GsAwXyn@ywMyOyqD{_@cfIcDe}@y@aeBJmwA`CkiAbFkhBlTgdDdPyiB`W}xDnSa}DbJyhCrXitAhT}x@bE}Z_@qW_Kwv@qKaaAiBgXvIm}A~JovAxCqW~WanB`XewBbK{_A`K}fBvAmi@xBycBeCauBoF}}@qJioAww@gjHaPopA_NurAyJku@uGmi@cDs[eRaiBkQstAsQkcByNmaCsK_uBcJgbEw@gkB_@ypEqDoqSm@eZcDwjBoGw`BoMegBaU_`Ce_@_uBqb@ytBwkFqiT_fAqfEwe@mfCka@_eC_UmlB}MmaBeWkkDeHwqAoX}~DcBsZmLcxBqOwqE_DkyAuJmrJ\\o~CfIewG|YibQxBssB?es@qGciA}RorAoVajA_nAodD{[y`AgPqp@mKwr@ms@umEaW{dAmb@umAw|@ojBwzDaaJsmBwbEgdCsrFqhAihDquAi`Fux@}_Dui@_eB_u@guCuyAuiHukA_lKszAu|OmaA{wKm}@clHs_A_rEahCssKo\\sgBsSglAqk@yvDcS_wAyTwpBmPc|BwZknFoFscB_GsaDiZmyMyLgtHgQonHqT{hKaPg}Dqq@m~Hym@c`EuiBudIabB{hF{pWifx@snAw`GkFyVqf@y~BkoAi}Lel@wtc@}`@oaXi_C}pZsi@eqGsSuqJ|Lqeb@e]kgPcaAu}SkDwzGhn@gjYh\\qlNZovJieBqja@ed@siO{[ol\\kCmjMe\\isHorCmec@uLebB}EqiBaCg}@m@qwHrT_vFps@kkI`uAszIrpHuzYxx@e{Crw@kpDhN{wBtQarDy@knFgP_yCu\\wyCwyA{kHo~@omEoYmoDaEcPiuAosDagD}rO{ 
        {AsyEihCayFilLaiUqm@_bAumFo}DgqA_uByi@swC~AkzDlhA}xEvcBa}Cxk@ql@`rAo|@~bBq{@``Bye@djDww@z_C_cAtn@ye@nfC_eC|gGahH~s@w}@``Fi~FpnAooC|u@wlEaEedRlYkrPvKerBfYs}Arg@m}AtrCkzElw@gjBbh@woBhR{gCwGkgCc[wtCuOapAcFoh@uBy[yBgr@c@iq@o@wvEv@sp@`FajBfCaq@fIipAdy@ewJlUc`ExGuaBdEmbBpBssArAuqBBg}@s@g{AkB{bBif@_bYmC}r@kDgm@sPq_BuJ_s@{X_{AsK_d@eM{d@wVgx@oWcu@??aDmOkNia@wFoSmDyMyCkPiBePwAob@XcQ|@oNdCoSfFwXhEmOnLi\\lbAulB`X_d@|k@au@bc@oc@bqC}{BhwDgcD`l@ed@??bL{G|a@eTje@oS~]cLr~Bgh@|b@}Jv}EieAlv@sPluD{z@nzA_]`|KchCtd@sPvb@wSb{@ko@f`RooQ~e[upZbuIolI|gFafFzu@iq@nMmJ|OeJn^{Qjh@yQhc@uJ~j@iGdd@kAp~BkBxO{@|QsAfYgEtYiGd]}Jpd@wRhVoNzNeK`j@ce@vgK}cJnSoSzQkVvUm^rSgc@`Uql@xIq\\vIgg@~kDyq[nIir@jNoq@xNwc@fYik@tk@su@neB}uBhqEesFjoGeyHtCoD|D}Ed|@ctAbIuOzqB_}D~NgY`\\um@v[gm@v{Cw`G`w@o{AdjAwzBh{C}`Gpp@ypAxn@}mAfz@{bBbNia@??jIab@`CuOlC}YnAcV`@_^m@aeB}@yk@YuTuBg^uCkZiGk\\yGeY}Lu_@oOsZiTe[uWi[sl@mo@soAauAsrBgzBqgAglAyd@ig@asAcyAklA}qAwHkGi{@s~@goAmsAyDeEirB_{B}IsJuEeFymAssAkdAmhAyTcVkFeEoKiH}l@kp@wg@sj@ku@ey@uh@kj@}EsFmG}Jk^_r@_f@m~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL'

      this.route = new Polyline({ 
        
        factor: 1e6
      }).readGeometry(this.polyline, { 
        
        dataProjection: 'EPSG:4326',
        featureProjection: 'EPSG:3857'
      })
      for (var i = 0; i < this.route.flatCoordinates.length; i++) { 
        
        if (i % 2 == 0) { 
        
          this.routeCoordsX.push(this.route.flatCoordinates[i])
        } else { 
        
          this.routeCoordsY.push(this.route.flatCoordinates[i])
        }
      }
      // 将[1,2,3,4,5,6...]转为[[1,2],[3,4],[5,6]...]
      for (var i = 0; i < this.routeCoordsX.length; i++) { 
        
        this.routeCoords.push([this.routeCoordsX[i], this.routeCoordsY[i]])
      }
      // 矢量元素要呈现的几何图形的特征属性LineString代表线段
      this.routes = new LineString(this.routeCoords)
      console.log(this.routes)
      this.routeLength = this.routeCoords.length
      this.routeFeature = new Feature({ 
        
        type: 'route',
        geometry: this.routes
      })
      this.geoMarker = new Feature({ 
        
        type: 'geoMarker',
        geometry: new Point(this.routeCoords[0])
      })
      this.startMarker = new Feature({ 
        
        type: 'iconStart',
        geometry: new Point(this.routeCoords[0])
      })
      this.endMarker = new Feature({ 
        
        type: 'iconEnd',
        geometry: new Point(this.routeCoords[this.routeLength - 1])
      })
      this.styles = { 
        
        route: new Style({ 
        
          stroke: new Stroke({ 
        
            width: 6,
            color: [237, 212, 0, 0.8]
          })
        }),
        iconStart: new Style({ 
        
          image: new Icon({ 
        
            anchor: [0.5, 0.5],
            src: require('../../../assets/images/startSend.png')
          })
        }),
        iconEnd: new Style({ 
        
          image: new Icon({ 
        
            anchor: [0.5, 0.5],
            src: require('../../../assets/images/endAll.png')
          })
        }),
        geoMarker: new Style({ 
        
          image: new Icon({ 
        
            anchor: [0.5, 0.5], // 图标中心
            src: require('../../../assets/images/plane.png'),
            scale: 0.6,
            rotation: -Math.atan2(
              this.routeCoords[0][1] - this.routeCoords[1][1],
              this.routeCoords[0][0] - this.routeCoords[1][0]
            ),
            rotateWithView: true
          })
        })
      }
      this.vectorLayer = new VectorLayer({ 
        
        source: new VectorSource({ 
        
          features: [
            this.routeFeature,
            this.geoMarker,
            this.startMarker,
            this.endMarker
          ]
        }),
        style: function (feature) { 
        
          if (that.animating && feature.get('type') === 'geoMarker') { 
        
            return null
          }
          return that.styles[feature.get('type')]
        }
      })
      this.map.addLayer(this.vectorLayer)
      this.speedInput = document.getElementById('speed')
      this.startButton = document.getElementById('start-animation')
      this.pauseButton = document.getElementById('pause-animation')
      this.continueButton = document.getElementById('continue-animation')
      this.stopButton = document.getElementById('stop-animation')
    },
    moveFeature (event) { 
        
      if (!this.vectorLayer.getVisible()) { 
        
        this.vectorLayer.setVisible(true)
      }
      var carStyle, rotation
      // 开始动画
      this.elapsedTime++ // elapsedTime 已过时间
      console.log(this.speed)
      this.index = Math.round((Number(this.speed) * this.elapsedTime) / 60) // 已经走了多少个点
      var x, y
      if (this.index >= this.routeCoords.length) { 
        
        clearInterval(this.timer)
        return
      }
      if (this.routeCoords[this.index] && this.routeCoords[this.index + 1]) { 
        
        x =
          this.routeCoords[this.index][0] - this.routeCoords[this.index + 1][0]
        y =
          this.routeCoords[this.index][1] - this.routeCoords[this.index + 1][1]
        // 返回从原点(0,0)到(x,y)点的线段与x轴正方向之间的弧度值
        rotation = Math.atan2(y, x)
      } else { 
        
        rotation = 0
      }
      carStyle = new Style({ 
        
        image: new Icon({ 
        
          src: require('../../../assets/images/plane.png'),
          rotateWithView: false,
          rotation:
            -rotation +
            Math.atan2(
              this.routeCoords[0][1] - this.routeCoords[1][1],
              this.routeCoords[0][0] - this.routeCoords[1][0]
            ) /
            2,
          scale: 0.6,
          anchor: [0.5, 0.5] // 图标中心
        })
      })
      var line = new Feature({ 
        
        geometry: new LineString(this.routeCoords)
      })
      var lineStyle = new Style({ 
        
        stroke: new Stroke({ 
        
          width: 6,
          color: [237, 212, 0, 0.8]
        })
      })
      line.setStyle(lineStyle)
      var currentPoint = new Point(this.routeCoords[this.index])
      // 添加矢量元素
      var feature = new Feature(currentPoint)
      this.vectorLayer.getSource().clear()
      feature.setStyle(carStyle)

      this.vectorLayer.getSource().addFeature(this.routeFeature)
      this.vectorLayer.getSource().addFeature(this.startMarker)
      this.vectorLayer.getSource().addFeature(this.endMarker)
      this.vectorLayer.getSource().addFeature(feature)
      this.map.render()
    },
    startAnimation () { 
        
      this.animating = true
      this.startTime = new Date().getTime()
      this.speed = this.speedInput.value
      // 隐藏geoMarker
      this.geoMarker.changed()
      this.map.getView().setCenter(this.center)
      // 添加事件，地图渲染时触发
      if (this.timer) { 
        
        clearInterval(this.timer)
      }
      this.timer = setInterval(() => { 
        
        this.moveFeature()
      }, 60)
      this.elapsedTime = 0
    },
    pauseAnimation () { 
        
      clearInterval(this.timer)
      this.timerFlag = true
    },
    continueAnimation () { 
        
      if (this.timerFlag) { 
        
        this.map.getView().setCenter(this.center)
        // 添加事件，地图渲染时触发
        this.timer = setInterval(() => { 
        
          this.moveFeature()
        }, 60)
      }
      this.timerFlag = false
    },
    stopAnimation (ended) { 
        
      clearInterval(this.timer)
      this.vectorLayer.getSource().clear()
      this.vectorLayer.getSource().addFeature(this.routeFeature)
      this.vectorLayer.getSource().addFeature(this.startMarker)
      this.vectorLayer.getSource().addFeature(this.endMarker)
    }
  }
}
</script>

<style lang="scss" scoped>
#map { 
        
  width: 100%;
  height: 720px;
}
</style>