//用户轨迹回放
$(function () {
//获取轨迹点信息
var getTrackPoints = function (userID, stime, etime) {
$.ajax({
dataType: 'JSON',
url: "Track.ashx?action=timeTrack&UserID=" + userID + "&sTime=" + stime + "&eTime=" + etime,
cache: false,
success: getTrackPointsCallback,
error: getTrackPointsError
});
};
//获取用户信息
var getUserInfo = function () {
var userID = top.Robin.currentId;
$.ajax({
dataType: 'JSON',
url: "Track.ashx?UserID=" + userID,
cache: false,
success: getUserInfoCallback,
error: getUserInfoError
});
};
//获取用户信息回调
var getUserInfoCallback = function (data) {
var info = eval(data);
if (info != null && info.InspUser != null) {
$("#tbUserName").val(info.InspUser.USERNAME);
}
};
//获取用户信息出错
var getUserInfoError = function (err) {
top.Robin.Logger.Error("获取用户信息出错了！");
};
//获取轨迹点信息回调函数
var getTrackPointsCallback = function (data) {
var info = eval(data);
if (info != null && info.InspUserLocations != null && info.InspUserLocations.length > 0) {
InspUserTrack.init(top.Robin.Map.Map2DControl, info, trackFinished);
var tbodyHtml = "";
$.each(info.InspUserLocations, function (i, item) {
var type = item.COORDTYPE == "0" ? "常规定位" : "RFID打卡";
var backColor = i % 2 == 0 ? "#FFF" : "#EEE";
tbodyHtml += '<tr data-locatID=' + i + ' style="background-color:' + backColor + '">'
+ ' <td align="center">' + i + '</td>'
+ ' <td>' + info.InspUser.USERNAME + '</td>'
+ ' <td align="center">' + type + '</td>'
+ ' <td>' + Robin.Utils.Date2String(item.LOCATETIME) + '</td>'
+ ' <td>' + item.POINTX + '</td>'
+ ' <td>' + item.POINTY + '</td>'
+ ' </tr>';
});
$("#tableTrackInfo>tbody").html(tbodyHtml);
$("#tableTrackInfo>tbody>tr").hover(function () {
$(this).find("td").css({ "background": "#ccc" });
}, function () {
$(this).find("td").css({ "background": "" });
});
$("#tableTrackInfo>tbody>tr").click(function () {
var locatID = $(this).attr("data-locatID");
InspUserTrack.location(locatID);
});
} else {
var stime = $("#tbStime").val();
var etime = $("#tbEtime").val();
top.Robin.Utils.Tip.Confirm("<div class='notyContent'>[ " + info.InspUser.USERNAME + " ] - [ " + stime + " 至 " + etime + " ]!</br></br>该时间段内没有历史轨迹!</div>");
}
};
//轨迹回放播放完成
var trackFinished = function () {
};
//获取轨迹点信息出错
var getTrackPointsError = function (err) {
top.Robin.Logger.Error("获取用户轨迹点信息出错了！");
};
//绑定时间选择控件
$("#btnQuery").click(function () {
$("#tableTrackInfo>tbody").empty();
InspUserTrack.distroy();
var userID = top.Robin.currentId;
var stime = $("#tbStime").val();
var etime = $("#tbEtime").val();
getTrackPoints(userID, stime, etime);
});
getUserInfo();
$("#btnInfohidden").click(function () {
var iframe = $('#iframeTrack', parent.document);
if (iframe != null && iframe.length > 0) {
var display = $("#divTrackbody").css("display");
if (display == "none") {
$(iframe[0]).height(341);
$("#divTrackbody").slideDown();
} else {
$("#divTrackbody").slideUp(function () {
$(iframe[0]).height(81);
});
}
}
});
$("#btnClose").click(function () {
InspUserTrack.distroy();
var iframeTrack = $("#iframeTrack", window.top.document);
if (iframeTrack != null && iframeTrack.length > 0) {
iframeTrack.remove();
}
});
var nowDate = new Date();
var nowDateStr = Robin.Utils.Date2DateString(nowDate);
nowDateStr = "2015-12-18";
$("#tbStime").val(nowDateStr + " 08:00:00");
$("#tbEtime").val(nowDateStr + " 17:00:00");
$("#btnLeftHidden").click(function () {
trackShowOrHidden();
});
trackShowOrHidden();
});
function trackShowOrHidden() {
var iframe = $('#iframeTrack', parent.document);
if (iframe != null && iframe.length > 0) {
var width = $(".track_main").width();
if (width == 700) {
$(".track_main").animate({ width: 20 }, function () {
$(iframe[0]).width(20);
});
} else {
$(iframe[0]).width(700);
$(".track_main").animate({ width: 700 });
}
}
}
InspUserTrack = {
//局部变量
_trackParam: {
//地图控件
mainMap: null,
//用户轨迹对象
userLocation: null,
//用户轨迹回放临时图层
trackLayer: "巡检员轨迹回放临时图层",
//巡检员头像临时图层
userLabelLayer: "巡检员头像临时图层",
//轨迹线路样式
trackLineSymbol: function () {
var sls = new esri.symbol.SimpleLineSymbol();
sls.style = esri.symbol.SimpleLineSymbol.STYLE_DOT;
sls.color = new dojo.Color("red");
sls.width = 2;
return sls;
},
//两点之间移动时间间隔
duration: 2000,
//开始位置
startIndex: 0,
//当前选择的节点
selectedIndex: 0,
//最后一个点
lastPoint: null,
//时间控件
timer: null,
//轨迹回放结束回调函数
trackFinishCallback: null,
//起始点
$btnFirst: null,
//上一点
$btnProview: null,
//播放
$btnPlay: null,
//停止
$btnStop: null,
//下一点
$btnNext: null,
//最后一点
$btnLast: null,
},
//初始化
init: function (map, userLocation, callback) {
//先暂停轮询
top.Robin.Portal.Page.InspPolling.stopDraw2Map = true;
top.Robin.Portal.Page.InspPolling.drawLabel2Map();
var _trackParam = InspUserTrack._trackParam;
_trackParam.mainMap = map;
_trackParam.userLocation = userLocation;
_trackParam.trackFinishCallback = callback;
_trackParam.$btnFirst = $("#btnFirst");
_trackParam.$btnProview = $("#btnProview");
_trackParam.$btnPlay = $("#btnPlay");
_trackParam.$btnStop = $("#btnStop");
_trackParam.$btnNext = $("#btnNext");
_trackParam.$btnLast = $("#btnLast");
_trackParam.$selTrackSpeed = $("#selTrackSpeed");
_trackParam.$btnPlay.val("开始");
_trackParam.$btnStop.attr('disabled', true);
//播放按钮点击
_trackParam.$btnPlay.click(function () {
if (_trackParam.$btnPlay.val() == "开始") {
InspUserTrack.start();
} else if (_trackParam.$btnPlay.val() == "播放") {
InspUserTrack.trackContinue();
} else {
InspUserTrack.pause();
}
});
_trackParam.$btnFirst.click(function () {
InspUserTrack.locationFirst();
});
_trackParam.$btnProview.click(function () {
InspUserTrack.locationPreview();
});
_trackParam.$btnNext.click(function () {
InspUserTrack.locationNext();
});
_trackParam.$btnLast.click(function () {
InspUserTrack.locationLast();
});
_trackParam.$btnStop.click(function () {
InspUserTrack.stop();
});
_trackParam.$selTrackSpeed.change(function () {
InspUserTrack._setDuration();
});
InspUserTrack.draw();
},
//隐藏点列表
_infoHidden: function () {
var iframe = $('#iframeTrack', parent.document);
if (iframe != null && iframe.length > 0) {
var display = $("#divTrackbody").css("display");
if (display == "block") {
$("#divTrackbody").slideUp(function () {
$(iframe[0]).height(81);
});
}
}
},
//绘制轨迹到地图上
draw: function () {
var _trackParam = InspUserTrack._trackParam;
if (_trackParam.mainMap != null && _trackParam.userLocation != null && _trackParam.userLocation.InspUserLocations != null) {
var tempLayer = top.Robin.Map.GetGraphicLayer(_trackParam.mainMap, _trackParam.trackLayer);
var labelLayer = top.Robin.Map.GetGraphicLayer(_trackParam.mainMap, _trackParam.userLabelLayer);
labelLayer.clear();
tempLayer.clear();
var shape = top.Robin.Map.GetPolyline();
var path = [];
$.each(_trackParam.userLocation.InspUserLocations, function (i, item) {
var point = top.Robin.Map.GetPoint(item.POINTX, item.POINTY);
//0-普通坐标；1-RFID坐标
if (item.COORDTYPE == "1") {
var tempPoint = top.Robin.Map.GetGraphic(point, top.Robin.Map.Symbol.customMarkSymbol(4, new dojo.Color("green")));
tempLayer.add(tempPoint);
}
path.push(point);
});
shape.addPath(path);
var graphic = top.Robin.Map.GetGraphic(shape, _trackParam.trackLineSymbol());
tempLayer.add(graphic);
top.Robin.Map.Fly2Geometry(_trackParam.mainMap, graphic.geometry);
}
},
//开始回放
start: function () {
//InspUserTrack.draw();
var _trackParam = InspUserTrack._trackParam;
_trackParam.$btnStop.attr('disabled', false);
_trackParam.$btnFirst.attr('disabled', true);
_trackParam.$btnProview.attr('disabled', true);
_trackParam.$btnNext.attr('disabled', true);
_trackParam.$btnLast.attr('disabled', true);
_trackParam.$btnPlay.val("暂停");
InspUserTrack._infoHidden();
if (_trackParam.mainMap != null && _trackParam.userLocation != null && _trackParam.userLocation.InspUserLocations != null) {
clearInterval(_trackParam.timer);
_trackParam.lastPoint = null;
_trackParam.startIndex = 0;
InspUserTrack._movePoint();
_trackParam.timer = setInterval(function () {
InspUserTrack._movePoint();
}, _trackParam.duration);
}
},
//停止
stop: function () {
var _trackParam = InspUserTrack._trackParam;
if (_trackParam.trackFinishCallback != null) {
_trackParam.trackFinishCallback();
}
clearInterval(_trackParam.timer);
_trackParam.lastPoint = null;
_trackParam.startIndex = 0;
InspUserTrack.draw();
_trackParam.$btnPlay.val("开始");
_trackParam.$btnStop.attr('disabled', true);
_trackParam.$btnPlay.attr('disabled', false);
_trackParam.$btnFirst.attr('disabled', false);
_trackParam.$btnProview.attr('disabled', false);
_trackParam.$btnNext.attr('disabled', false);
_trackParam.$btnLast.attr('disabled', false);
},
//暂停
pause: function () {
var _trackParam = InspUserTrack._trackParam;
_trackParam.$btnPlay.val("播放");
_trackParam.$btnStop.attr('disabled', false);
_trackParam.$btnFirst.attr('disabled', false);
_trackParam.$btnProview.attr('disabled', false);
_trackParam.$btnNext.attr('disabled', false);
_trackParam.$btnLast.attr('disabled', false);
clearInterval(_trackParam.timer);
},
//定位
location: function (index) {
InspUserTrack._trackParam.selectedIndex = index;
if (InspUserTrack._trackParam.userLocation != null
&& InspUserTrack._trackParam.userLocation.InspUserLocations != null
&& InspUserTrack._trackParam.userLocation.InspUserLocations.length > 0) {
var locat = InspUserTrack._trackParam.userLocation.InspUserLocations[InspUserTrack._trackParam.selectedIndex];
var point = top.Robin.Map.GetPoint(locat.POINTX, locat.POINTY);
var tempLayer = top.Robin.Map.GetGraphicLayer(top.Robin.Map.Map2DControl, InspUserTrack._trackParam.trackLayer);
tempLayer.clear();
var labelGraphic = top.Robin.Map.GetGraphic(point, top.Robin.Portal.Page.Config.userLabelSymbol());
var phoneGraphic = top.Robin.Map.GetGraphic(point, top.Robin.Portal.Page.Config.userPhoneSymbol());
var txtGraphic = top.Robin.Map.GetGraphic(
point, top.Robin.Portal.Page.Config.userNameSymbol(
Robin.Utils.Date2TimeString(locat.LOCATETIME)));
var tempPoint = top.Robin.Map.GetGraphic(point, top.Robin.Map.Symbol.customMarkSymbol(6, new dojo.Color("green")));
tempLayer.add(labelGraphic);
tempLayer.add(phoneGraphic);
tempLayer.add(txtGraphic);
tempLayer.add(tempPoint);
top.Robin.Map.Fly2Geometry(top.Robin.Map.Map2DControl, point);
}
},
//下一点
locationNext: function () {
if (InspUserTrack._trackParam.userLocation != null
&& InspUserTrack._trackParam.userLocation.InspUserLocations != null
&& InspUserTrack._trackParam.userLocation.InspUserLocations.length > 0) {
if (InspUserTrack._trackParam.userLocation.InspUserLocations.length == InspUserTrack._trackParam.selectedIndex) {
InspUserTrack._trackParam.selectedIndex = 0;
} else {
InspUserTrack._trackParam.selectedIndex++;
}
InspUserTrack.location(InspUserTrack._trackParam.selectedIndex);
}
},
//前一点
locationPreview: function () {
if (InspUserTrack._trackParam.userLocation != null
&& InspUserTrack._trackParam.userLocation.InspUserLocations != null
&& InspUserTrack._trackParam.userLocation.InspUserLocations.length > 0) {
InspUserTrack._trackParam.selectedIndex--;
if (InspUserTrack._trackParam.selectedIndex == 0) {
InspUserTrack._trackParam.selectedIndex = InspUserTrack._trackParam.userLocation.InspUserLocations.length;
}
InspUserTrack.location(InspUserTrack._trackParam.selectedIndex);
}
},
//起点
locationFirst: function () {
InspUserTrack.location(0);
},
//终点
locationLast: function () {
if (InspUserTrack._trackParam.userLocation != null
&& InspUserTrack._trackParam.userLocation.InspUserLocations != null
&& InspUserTrack._trackParam.userLocation.InspUserLocations.length > 0) {
InspUserTrack.location(InspUserTrack._trackParam.userLocation.InspUserLocations.length - 1);
}
},
//销毁
distroy: function () {
var _trackParam = InspUserTrack._trackParam;
if (_trackParam.mainMap != null) {
var tempLayer = top.Robin.Map.GetGraphicLayer(_trackParam.mainMap, _trackParam.trackLayer);
var labelLayer = top.Robin.Map.GetGraphicLayer(_trackParam.mainMap, _trackParam.userLabelLayer);
tempLayer.clear(); _trackParam.mainMap.removeLayer(tempLayer);
labelLayer.clear(); _trackParam.mainMap.removeLayer(labelLayer);
}
clearInterval(_trackParam.timer);
_trackParam.trackFinishCallback = null;
top.Robin.Portal.Page.InspPolling.stopDraw2Map = false;
top.Robin.Portal.Page.InspPolling.drawLabel2Map();
},
//继续
trackContinue: function () {
var _trackParam = InspUserTrack._trackParam;
_trackParam.$btnPlay.val("暂停");
_trackParam.$btnStop.attr('disabled', false);
_trackParam.$btnFirst.attr('disabled', true);
_trackParam.$btnProview.attr('disabled', true);
_trackParam.$btnNext.attr('disabled', true);
_trackParam.$btnLast.attr('disabled', true);
clearInterval(_trackParam.timer);
InspUserTrack._movePoint();
_trackParam.timer = setInterval(function () {
InspUserTrack._movePoint();
}, _trackParam.duration);
},
//获取两点之间时间间隔
_setDuration: function () {
var _trackParam = InspUserTrack._trackParam;
var speed = $("#selTrackSpeed").val();
switch (speed) {
case "慢":
_trackParam.duration = 2000;
break;
case "中":
_trackParam.duration = 1000;
break;
case "快":
_trackParam.duration = 500;
break;
default:
_trackParam.duration = 1000;
break;
}
InspUserTrack.trackContinue();
},
//获取点坐标
_getIndexPoint: function (index) {
var _trackParam = InspUserTrack._trackParam;
return top.Robin.Map.GetPoint(_trackParam.userLocation.InspUserLocations[index].POINTX,
_trackParam.userLocation.InspUserLocations[index].POINTY);
},
//移动点
_movePoint: function () {
var _trackParam = InspUserTrack._trackParam;
var tempLayer = top.Robin.Map.GetGraphicLayer(_trackParam.mainMap, _trackParam.trackLayer);
var labelLayer = top.Robin.Map.GetGraphicLayer(_trackParam.mainMap, _trackParam.userLabelLayer);
if (_trackParam.userLocation.InspUserLocations.length > _trackParam.startIndex) {
if (_trackParam.startIndex == 0) {
_trackParam.lastPoint = InspUserTrack._getIndexPoint(_trackParam.startIndex);
var labelGraphic = top.Robin.Map.GetGraphic(_trackParam.lastPoint, top.Robin.Portal.Page.Config.userLabelSymbol());
var phoneGraphic = top.Robin.Map.GetGraphic(_trackParam.lastPoint, top.Robin.Portal.Page.Config.userPhoneSymbol());
var txtGraphic = top.Robin.Map.GetGraphic(
_trackParam.lastPoint, top.Robin.Portal.Page.Config.userNameSymbol(
Robin.Utils.Date2TimeString(_trackParam.userLocation.InspUserLocations[_trackParam.startIndex].LOCATETIME)));
labelLayer.add(labelGraphic);
labelLayer.add(phoneGraphic);
labelLayer.add(txtGraphic);
} else {
var point = InspUserTrack._getIndexPoint(_trackParam.startIndex);
if (!_trackParam.mainMap.extent.contains(point))
_trackParam.mainMap.centerAt(point);
$.each(labelLayer.graphics, function (i, item) {
if (item.symbol.type == "textsymbol") {
item.symbol.text = Robin.Utils.Date2TimeString(_trackParam.userLocation.InspUserLocations[_trackParam.startIndex].LOCATETIME);
}
});
InspUserTrack._moveNext(_trackParam.lastPoint, point);
_trackParam.lastPoint = point;
}
_trackParam.startIndex++;
} else {
InspUserTrack.stop();
}
},
//匀速移动点
_moveNext: function (point1, point2) {
var moveNextTimer = null;
var createTime = function () {
return (+new Date);
}
var startTime = createTime();
var _trackParam = InspUserTrack._trackParam;
var labelLayer = top.Robin.Map.GetGraphicLayer(_trackParam.mainMap, _trackParam.userLabelLayer);
var tempLayer = top.Robin.Map.GetGraphicLayer(_trackParam.mainMap, _trackParam.trackLayer);
var thisLastPoint = point1;
function tick() {
var remaining = Math.max(0, startTime + _trackParam.duration - createTime());
var temp = remaining / _trackParam.duration || 0;
var percent = 1 - temp;
var leftPos = (point2.x - point1.x) * percent + point1.x;
var topPos = (point2.y - point1.y) * percent + point1.y;
var newPoint = top.Robin.Map.GetPoint(leftPos, topPos);
$.each(labelLayer.graphics, function (i, item) {
item.setGeometry(newPoint);
});
var path = [];
path.push(thisLastPoint); path.push(newPoint);
var shape = top.Robin.Map.GetPolyline();
shape.addPath(path);
var graphic = top.Robin.Map.GetGraphicByGeometry(shape);
tempLayer.add(graphic);
thisLastPoint = newPoint;
if (percent == 1) {
clearInterval(moveNextTimer);
}
}
moveNextTimer = setInterval(tick, 13);
}
};
johnliu
远离世上乱纷纷，清静凡心不染尘。 闲看山前腾紫气，静观天外涌祥云。 花间酌酒邀明月，柳下吟诗论古今。 坐卧随心天地近，悠然细品玉堂春。
目 录CONTENT
之前项目上写的轨迹回放-留存
温馨提示：
本文最后更新于 2024-05-30，若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系我们删除。
版权归属：
冰灬夏
许可协议：
本文使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权
评论区