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