openlayers 3如何實現(xiàn)車輛軌跡回放

<div id="menu">
   <label for="speed" >
    運動速度:&nbsp;
    <input id="speed" type="range" min="1" max="20" step="1" value="10" />
   </label>
   <button id="start-animation">
    開始運動
   </button>
  </div>
<!-- 注：此代碼僅為上面速度條和按鈕--

startMove:function () {
    var vm=this;
    var map=vm.map;
    vm.clearOverlayers("beijing_sq");

    //中間站
    var stops=[
     [12909554.6597,4933234.84552], //14
     [12909824.6852,4931594.7854], //43
     [12910026.8837,4930523.89946], //63
     [12910870.563,4929357.26511]  //85
    ];

    var stopMakers = new Array();

    for(var i=0;i<4;i++){
     var s = new ol.Feature({
      type: 'stop',
      geometry: new ol.geom.Point(stops[i])
     });
     stopMakers.push(s);
    }


    var Coordinates=vm.path;

    //將離散點構(gòu)建成一條折線
    var route = new ol.geom.LineString(Coordinates);
    //獲取直線的坐標(biāo)
    var routeCoords = route.getCoordinates();
    var routeLength = routeCoords.length;

    var routeFeature = new ol.Feature({
     type: 'route',
     geometry: route
    });
    var geoMarker = new ol.Feature({
     type: 'geoMarker',
     geometry: new ol.geom.Point(routeCoords[0])
    });
    var startMarker = new ol.Feature({
     type: 'icon',
     geometry: new ol.geom.Point(routeCoords[0])
    });
    var endMarker = new ol.Feature({
     type: 'icon',
     geometry: new ol.geom.Point(routeCoords[routeLength - 1])
    });

    var styles = {
     'route': new ol.style.Style({
      stroke: new ol.style.Stroke({
       width: 6,
       color: '#F2C841'
      }),
      fill:new ol.style.Fill({
       color:"#F6E3A3"
      })
     }),
     /*'icon': new ol.style.Style({
      image: new ol.style.Icon({
       anchor: [0.5, 1],
       src: require()
      })
     }),*/
     'geoMarker': new ol.style.Style({
       /*image: new ol.style.Circle({
        radius: 7,
        snapToPixel: false,
        fill: new ol.style.Fill({ color: 'black' }),
        stroke: new ol.style.Stroke({
         color: 'white',
         width: 2
        })
       })*/
       image: new ol.style.Icon({
        src: require('../../assets/map/left_red_car.png'),
        rotateWithView: false,
        rotation: -Math.atan2(routeCoords[0][1]-routeCoords[1][1], routeCoords[0][0]-routeCoords[1][0]),
        scale:0.3,
       })
      }),
     'stop':new ol.style.Style({
      image:new ol.style.Circle({
       radius:10,
       snapToPixel:false,
       fill:new ol.style.Fill({ color:'red'}),
       stroke:new ol.style.Stroke({
        color:'white',
        width:2
       })
      })
     })
    };

    var animating = false;
    var speed, now;
    var speedInput = document.getElementById('speed');
    var startButton = document.getElementById('start-animation');

    var vectorLayer = new ol.layer.Vector({
     id:'carLayer',
     source: new ol.source.Vector({
      features: [routeFeature, geoMarker, startMarker, endMarker,stopMakers[0],stopMakers[1],stopMakers[2],stopMakers[3]]
     }),
     style: function (feature) {
      //如果動畫是激活的就隱藏geoMarker
      if (animating && feature.get('type') === 'geoMarker') {
       return null;
      }
      return styles[feature.get('type')];
     }
    });

    //var center = ol.proj.fromLonLat([115.981,40.451]);

    map.addLayer(vectorLayer);

    // 要素移動
    var moveFeature = function (event) {
     var vectorContext = event.vectorContext; //HTML5 Canvas context，ol.render.canvas.Immediate的對象
     var frameState = event.frameState;  //freme 的狀態(tài)
     if (animating) {
      var elapsedTime = frameState.time - now; //elapsedTime 已過時間
      //通過增加速度，來獲得lineString坐標(biāo)
      var index = Math.round(speed * elapsedTime / 1000); //已經(jīng)走了多少個點

      //console.log("#########",routeCoords[index]);

      if (index >= routeLength) {
       stopAnimation(true);
       return;
      }

      //fixme ---------------
      if( index < 14){
       flashFeature(0);
      }
      if( index == 14){
       changeStyle(0, 1);
      }

      if(index > 14 && index <43){
       flashFeature(1);
      }
      if(index == 43){
       changeStyle(1, 2);
      }


      if(index > 43 && index <63){
       flashFeature(2);
      }
      if(index == 63){
       changeStyle(2, 3);
      }

      if(index > 63 && index <85){
       flashFeature(3);
      }
      if(index == 85){
       changeStyle(3, 3);
      }
      //fixme--------------------

      var dx,dy,rotation,carStyle;
      if(routeCoords[index] && routeCoords[index+1]){
       dx=routeCoords[index][0]-routeCoords[index+1][0];
       dy=routeCoords[index][1]-routeCoords[index+1][1];
       rotation = Math.atan2(dy,dx);
       //console.log("***********",rotation);

       carStyle= new ol.style.Style({
        image: new ol.style.Icon({
         src: require('../../assets/map/left_red_car.png'),
         rotateWithView: false,
         rotation: -rotation,
         scale:0.3,
        })
       });
       var currentPoint = new ol.geom.Point(routeCoords[index]); //當(dāng)前點
       var feature = new ol.Feature(currentPoint);
       //Render a feature into the canvas.
       // Note that any zIndex on the provided style will be ignored - features are rendered immediately in the order that this method is called.
       // If you need zIndex support, you should be using an ol.layer.Vector instead
       vectorContext.drawFeature(feature, carStyle);
      }
     }
     //繼續(xù)動畫效果
     map.render();
    };

    function changeStyle(previous,next) {
     //console.log(stopMakers[previous]);
     stopMakers[previous].setStyle(new ol.style.Style({
      image: new ol.style.Circle({
       radius: 10,
       snapToPixel: false,
       fill: new ol.style.Fill({color: 'green'}),
       stroke: new ol.style.Stroke({
        color: 'white',
        width: 2
       })
      })
     }));
    }

    var colors=['red','green'];
    var colorIndex=0;
    function flashFeature(index) {
     var color;
     colorIndex++;
     colorIndex=colorIndex % 30;

     if(colorIndex < 15){
      color=colors[0];
     }else {
      color = colors[1];
     }
     stopMakers[index].setStyle(new ol.style.Style({
      image: new ol.style.Circle({
       radius: 10,
       snapToPixel: false,
       fill: new ol.style.Fill({
        color: color
       }),
       stroke: new ol.style.Stroke({
        color: 'white',
        width: 2
       })
      })
     }));
    }

    function startAnimation() {
     if (animating) {
      stopAnimation(false);
     } else {
      animating = true;
      now = new Date().getTime();   /** 開始時的時間*/
      speed = speedInput.value;
      startButton.textContent = '結(jié)束運動';
      //隱藏geoMarker
      geoMarker.setStyle(null);
      //設(shè)置顯示范圍
      //map.getView().setCenter(center);
      map.on('postcompose', moveFeature); /** postcompose事件-- 地圖渲染時都會觸發(fā) */
      map.render();
     }
    }

    /**
     * @param {boolean}結(jié)束動畫
     */
    function stopAnimation(ended) {
     animating = false;
     startButton.textContent = '開始運動';

     //如果動畫取消就開始動畫
     var coord = ended &#63; routeCoords[routeLength - 1] : routeCoords[0];
     /** @type {ol.geom.Point} */
     (geoMarker.getGeometry()).setCoordinates(coord);
     //移除監(jiān)聽
     map.un('postcompose', moveFeature); /** 解除postcompose 事件 */
    }

    startButton.addEventListener('click', startAnimation, false);
}