openlayers 轨迹回放

要求：在地图上展示用户工作时，所经过的轨迹。
参考 ：https://openlayers.org/en/latest/examples/feature-move-animation.html?q=anim

在要求不是很高的时候，官网的例子已经可以满足轨迹回放的需求了，但是现在要求，轨迹回放的时候，图标运动要连贯，不能出现跳跃的现象，于是，只好修改官网的例子了。

思路：
1）任意两点间距离过长，在中间添加若干的点（注：因为轨迹上传时，任意两点间的时间间隔是1s，所以，采用等分线段的想法，来添加中间点）；
2）适当的时间间隔，本例采用0.01s作为时间间隔（若直接采用官网的例子，若时间间隔设置的不正确，照样会出现卡顿的现象，考虑到人眼的视觉停留时间为0.1-0.4s，其原因是因为视神经的反应时间间隔大概是1/24秒）

实现：
线段定比分点坐标公式：
https://baike.baidu.com/item/%E7%BA%BF%E6%AE%B5%E5%AE%9A%E6%AF%94%E5%88%86%E7%82%B9%E5%9D%90%E6%A0%87%E5%85%AC%E5%BC%8F/6773499?fr=aladdin

现假设轨迹点a,b连线如图所示，在ab中间的c点左边结果如图所示。此时已知，ab间的时间为1s，ab间添加的点的时间间隔为0.01s，于是得到

var a = [lng1,lat1];
var b = [lng2,lat2];
var c_x = lng1+0.01*scale*(lng2-lng1);
var c_y = lat1+0.01*scale*(lat2-lat1);

修改官网中的moveFeature 的函数

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 moveFeature = function(event) {
    var vectorContext = event.vectorContext;
    var frameState = event.frameState;
    if (animating) {
        var elapsedTime = frameState.time - now;//已经经过的时间
        var index = Math.floor(speed * elapsedTime / 1000);
        if (index >= routeLength) {//当时间间隔大于所有点的长度的时候，结束动作
            stopAnimation(true);
            return;
        }else{
            var scale = Math.floor(speed *elapsedTime / 10)-index*100;//线段长度的比例
            var currentPoint;
            var startpoint = routeCoords[index];
            var stoppoint = routeCoords[index+1];
            var currentx = startpoint[0]+0.01*scale*(stoppoint[0]-startpoint[0]);
            var currenty = startpoint[1]+0.01*scale*(stoppoint[1]-startpoint[1]);
            currentPoint = new ol.geom.Point([currentx,currenty]);
            var feature = new ol.Feature(currentPoint);
            vectorContext.drawFeature(feature, style);//这里的style请用自己定义的点的style替换
        }
    }
    map.render();
};
function startAnimation() {
        if (animating) {
          stopAnimation(false);
        } else {
          animating = true;
          now = new Date().getTime();
          speed = 1;
          geoMarker.setStyle(null);
          map.on('postcompose', moveFeature);
          map.render();
        }
 }

缺点：因为线等分的原理，只能保证任意两个轨迹点间匀速运动，而不能保证整条轨迹匀速运动。

轨迹匀速的方法：

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: route
});
var totaltime;
var moveFeature = function(event) {
    var vectorContext = event.vectorContext;
    var frameState = event.frameState;
    if (animating) {
        var elapsedTime = frameState.time - now;
        var currentPoint = route.getCoordinateAt(elapsedTime/totaltime);// 这里用到了LineString 对象中的getCoordinateAt的方法,来获取当前时间对应的点坐标
        var scale = parseFloat(elapsedTime)/parseFloat(totaltime);
        console.log(scale);
        if(scale>=1){
            stopAnimation(true);
            return;
        }else{
            var currentPoint;
            currentPoint = new ol.geom.Point(route.getCoordinateAt(scale));
            var feature = new ol.Feature(currentPoint);
            vectorContext.drawFeature(feature, aaastyles.geoMarker);
        }
    }
    map.render();
};
function startAnimation() {
    totaltime = formatLength(route.getCoordinates())/100*1000;//假设速度为100m/s
    if (animating) {
        stopAnimation(false);
    } else {
        animating = true;
        now = new Date().getTime();
        geoMarker.setStyle(null);
        map.on('postcompose', moveFeature);
        map.render();
    }
}

function formatLength(coordinates){
    var length = 0;
    var sourceProj = map.getView().getProjection();
    for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
        var c1 = ol.proj.transform(coordinates[i], sourceProj, geoserverConfig.srsName);
        var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, geoserverConfig.srsName);
        length += ol.sphere.getDistance(c1, c2);
    }
    var output = (Math.round(length * 100) / 100/1000);
    return output;
}