这几天在做和百度地图API有关的工作,为了使轨迹可视化更美观一点,想做成可以回放的效果。基本的效果是:屏幕旁边有个时间戳,时间在增加,轨迹就不断的更新出来。并且可以控制速度。
主要借鉴了这篇博客:http://blog.youkuaiyun.com/liusaint1992/article/details/50082781
并在此基础上控制了播放速度,并把初始时间改为第一个轨迹点的时间。
数据是汽车轨迹数据,在数据库中储存,格式为:id,time,lon(经度),lat(纬度)。
先介绍下几个主要用到的函数:
1.function loadTrackByTime() //button点击后的调用函数
2.function setZoon() //设置视图的函数,就是随着点的增加,百度API的Zoom会根据点来改变
3.function addMaerker() //为每个点设置标签啦
4.function addLine() //画线函数
5.function trackTime() //计时函数(在回放轨迹时旁边会有个时间一直在变,当到达了那个时间,就画一个点)
6.funtion getDate() //获取日期的辅助函数
7.function dateDiff() //算时间差的函数
/**
* Created by qhsun on 17-3-27.
*/
//轨迹回放功能
//一些变量
var donePoints=[]; //已经画过的点
var bPoints=[]; //API自动更改Zoom
var timerArr=[]; //时间
var interval;
var velocity; //速度变量
function loadTrackByTime()
{
if(document.getElementById("velocity").value=="")
{
velocity=1;
}
else
{
velocity = parseInt(document.getElementById("velocity").value);
} //这个if_else主要是默认为1而设置
map.clearOverlays(); //清除之前百度地图上的覆盖物
for(var t=0;t<timerArr.length;t++)
{
clearTimeout(timeArr[t]);
}; //清除时间
timerArr=[];
clearInterval(interval);
bPoints.length=0;
donePoints.length=0;
var driver_id = document.getElementById("driver_id").value;
var dateBegin = document.getElementById("start_time").value;
var dateEnd = document.getElementById("end_time").value; //上面都是获取值啦
$.post("hello", {
'driver_id': driver_id, 'start_time': dateBegin, 'end_time': dateEnd},