openlayer 轨迹动画（方式二）使用postrender

监听图层渲染后的事件postrender，在回调中渲染新的点，这样又会触发渲染后事件，依此循环完成动画，在动画渲染方法中做停止判断，以下为示例：

class TrackPlay{
    constructor(map){
        this.map = map
        this.animating = false//是否结束
        this.speed = 1//默认速度
        this.now//当前时间
    }

    getStyle(){
        var style = new ol.style.Style({
            fill: new ol.style.Fill({//填充样式
              color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new ol.style.Stroke({//边框样式
              color: '#ffcc33',
              width: 2,
              lineCap:'square'
            }),
            image: new ol.style.Circle({//点样式使用一个圆
              radius: 7,
              fill: new ol.style.Fill({
                color: '#ffcc33'
              })
            })
          });
        return style;
    }
    //添加轨迹线和起始点
    addLineWithPoints(coordinates){
        this.routeLength = coordinates.length
        this.routeCoords = coordinates
        var geom = new ol.geom.LineString(coordinates);
        //创建轨迹Feature
        var feature = new ol.Feature({
            geometry:geom
        })
        //创建矢量图层
        const vectorLayer = new ol.layer.Vector()
        //添加轨迹
        vectorLayer.getSource().addFeature(feature)
        //设置样式
        vectorLayer.setStyle(this.getStyle())
        this.map.addLayer(vectorLayer)
        
        //添加起点
        var startFeature = new ol.Feature({
            geometry:new ol.geom.Point(coordinates[0])
        })
        startFeature.setStyle(new ol.style.Style({
            text:new ol.style.Text({
                font:'15px sans-serif',
                text:'起点',
                offsetY:-10
            })
        }))
        vectorLayer.getSource().addFeature(startFeature)
        //添加终点
        var endFeature = new ol.Feature({
            geometry:new ol.geom.Point(coordinates[coordinates.length - 1])
        })
        endFeature.setStyle(new ol.style.Style({
            text:new ol.style.Text({
                font:'15px sans-serif',
                text:'终点',
                offsetY:-10
            })
        }))
        vectorLayer.getSource().addFeature(endFeature)

        //添加小车，这里使用一个圆点代替
        var carFeature = new ol.Feature({
            geometry:new ol.geom.Point(coordinates[0])
        })
        this.geoMarker = carFeature
        vectorLayer.getSource().addFeature(carFeature)
        this.vectorLayer = vectorLayer
    }

    //设置速度
    setSpeed(speed){
        this.speed = speed
    }

    //开始播放
    play(){
        if (this.animating) {
            this._stopAnimation(false);
          } else {
            //删除开始添加的点
            this.vectorLayer.getSource().removeFeature(this.geoMarker)
            this.animating = true//设置为已经开始动画
            this.now = new Date().getTime()//获取当前时间
            var self = this
            //监听图层渲染后的事件
            this.vectorLayer.on('postrender', function(event){
                self._moveFeature(event)
            });
          }
    }

    //停止
    stop(){
        this._stopAnimation(true);
    }

    //移动要素
    _moveFeature(event){
        //获取渲染图层的画布
        var vectorContext = ol.render.getVectorContext(event);
        //获取当前渲染帧状态的对象
        var frameState = event.frameState;

        if (this.animating) {
            //渲染时的时间减去开始播放轨迹的时间
            var elapsedTime = frameState.time - this.now;
            var index = Math.round(this.speed * elapsedTime / 1000);
            console.log(index)
            if (index >= this.routeLength) {
                this._stopAnimation(true);
                return;
            }

            //取出坐标点重新绘制
            var currentPoint = new ol.geom.Point(this.routeCoords[index]);
            var feature = new ol.Feature(currentPoint);
            vectorContext.drawFeature(feature,this.getStyle());
        }
        this.map.render();
    }

    _stopAnimation(ended){
        this.animating = false;
        var coord = ended ? this.routeCoords[this.routeLength - 1] : this.routeCoords[0];
        var geometry = this.geoMarker.getGeometry();
        geometry.setCoordinates(coord);
        this.vectorLayer.getSource().addFeature(this.geoMarker)
        this.vectorLayer.un('postrender', this._moveFeature);
    }
}