几年前用高德地图做过手机版的轨迹回放，准备用Openlayers来实现一个web版的轨迹回放，轨迹回放的原理相对比较简单，首先将车辆的轨迹添加在地图上，然后再添加一个轨迹点，设置一个速度，让轨迹点在线上移动。实现方式如下所示：

添加轨迹

由于没有数据，在地图上随便找了一些点用于测试。

//添加轨迹线和起始点
    addLineWithPoints(coordinates){
        var geom = new ol.geom.LineString(coordinates);
        //创建轨迹Feature
        var feature = new ol.Feature({
            geometry:geom
        })
        //创建矢量图层
        var vectorLayer = LayerUtil.vectorLayer()
        //添加轨迹
        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])
        })
        vectorLayer.getSource().addFeature(carFeature)
    }

添加的后效果如下所示：

轨迹.png

轨迹回放

添加好轨迹后，就要实现轨迹回放了，直接看代码吧，代码中有注释看起来也方便，所有的代码都在下边：

class TrackPlayback{
    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
        })
        //创建矢量图层
        var vectorLayer = LayerUtil.vectorLayer()
        //添加轨迹
        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);
    }
}

个人博客