要求：在地图上展示用户工作时，所经过的轨迹。
参考 ：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/sif (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;
}