宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取

我是程序猿

注册

 

发新话题 回复该主题

之前项目上写的轨迹回放-留存 [复制链接]

1#
  1. //用户轨迹回放
  2. $(function () {

  3.     //获取轨迹点信息
  4.     var getTrackPoints = function (userID, stime, etime) {
  5.         $.ajax({
  6.             dataType: 'JSON',
  7.             url: "Track.ashx?action=timeTrack&UserID=" + userID + "&sTime=" + stime + "&eTime=" + etime,
  8.             cache: false,
  9.             success: getTrackPointsCallback,
  10.             error: getTrackPointsError
  11.         });
  12.     };

  13.     //获取用户信息
  14.     var getUserInfo = function () {
  15.         var userID = top.Robin.currentId;
  16.         $.ajax({
  17.             dataType: 'JSON',
  18.             url: "Track.ashx?UserID=" + userID,
  19.             cache: false,
  20.             success: getUserInfoCallback,
  21.             error: getUserInfoError
  22.         });
  23.     };

  24.     //获取用户信息回调
  25.     var getUserInfoCallback = function (data) {
  26.         var info = eval(data);
  27.         if (info != null && info.InspUser != null) {
  28.             $("#tbUserName").val(info.InspUser.USERNAME);
  29.         }
  30.     };

  31.     //获取用户信息出错
  32.     var getUserInfoError = function (err) {
  33.         top.Robin.Logger.Error("获取用户信息出错了!");
  34.     };

  35.     //获取轨迹点信息回调函数
  36.     var getTrackPointsCallback = function (data) {
  37.         var info = eval(data);
  38.         if (info != null && info.InspUserLocations != null && info.InspUserLocations.length > 0) {
  39.             InspUserTrack.init(top.Robin.Map.Map2DControl, info, trackFinished);
  40.             var tbodyHtml = "";
  41.             $.each(info.InspUserLocations, function (i, item) {

  42.                 var type = item.COORDTYPE == "0" ? "常规定位" : "RFID打卡";
  43.                 var backColor = i % 2 == 0 ? "#FFF" : "#EEE";
  44.                 tbodyHtml += '<tr data-locatID=' + i + ' style="background-color:' + backColor + '">'
  45.                         + '     <td align="center">' + i + '</td>'
  46.                         + '     <td>' + info.InspUser.USERNAME + '</td>'
  47.                         + '     <td align="center">' + type + '</td>'
  48.                         + '     <td>' + Robin.Utils.Date2String(item.LOCATETIME) + '</td>'
  49.                         + '     <td>' + item.POINTX + '</td>'
  50.                         + '     <td>' + item.POINTY + '</td>'
  51.                         + ' </tr>';
  52.             });
  53.             $("#tableTrackInfo>tbody").html(tbodyHtml);
  54.             $("#tableTrackInfo>tbody>tr").hover(function () {
  55.                 $(this).find("td").css({ "background": "#ccc" });
  56.             }, function () {
  57.                 $(this).find("td").css({ "background": "" });
  58.             });
  59.             $("#tableTrackInfo>tbody>tr").click(function () {
  60.                 var locatID = $(this).attr("data-locatID");
  61.                 InspUserTrack.location(locatID);
  62.             });
  63.         } else {
  64.             var stime = $("#tbStime").val();
  65.             var etime = $("#tbEtime").val();
  66.             top.Robin.Utils.Tip.Confirm("<div class='notyContent'>[ " + info.InspUser.USERNAME + " ] - [ " + stime + " 至 " + etime + " ]!</br></br>该时间段内没有历史轨迹!</div>");
  67.         }
  68.     };



  69.     //轨迹回放播放完成
  70.     var trackFinished = function () {
  71.     };

  72.     //获取轨迹点信息出错
  73.     var getTrackPointsError = function (err) {
  74.         top.Robin.Logger.Error("获取用户轨迹点信息出错了!");
  75.     };

  76.     //绑定时间选择控件
  77.     $("#btnQuery").click(function () {
  78.         $("#tableTrackInfo>tbody").empty();
  79.         InspUserTrack.distroy();
  80.         var userID = top.Robin.currentId;
  81.         var stime = $("#tbStime").val();
  82.         var etime = $("#tbEtime").val();
  83.         getTrackPoints(userID, stime, etime);
  84.     });

  85.     getUserInfo();


  86.     $("#btnInfohidden").click(function () {
  87.         var iframe = $('#iframeTrack', parent.document);
  88.         if (iframe != null && iframe.length > 0) {
  89.             var display = $("#divTrackbody").css("display");
  90.             if (display == "none") {
  91.                 $(iframe[0]).height(341);
  92.                 $("#divTrackbody").slideDown();
  93.             } else {
  94.                 $("#divTrackbody").slideUp(function () {
  95.                     $(iframe[0]).height(81);
  96.                 });
  97.             }
  98.         }
  99.     });

  100.     $("#btnClose").click(function () {
  101.         InspUserTrack.distroy();
  102.         var iframeTrack = $("#iframeTrack", window.top.document);
  103.         if (iframeTrack != null && iframeTrack.length > 0) {
  104.             iframeTrack.remove();
  105.         }
  106.     });

  107.     var nowDate = new Date();
  108.     var nowDateStr = Robin.Utils.Date2DateString(nowDate);


  109.     nowDateStr = "2015-12-18";
  110.     $("#tbStime").val(nowDateStr + " 08:00:00");
  111.     $("#tbEtime").val(nowDateStr + " 17:00:00");

  112.     $("#btnLeftHidden").click(function () {
  113.         trackShowOrHidden();
  114.     });

  115.     trackShowOrHidden();

  116. });

  117. function trackShowOrHidden() {
  118.     var iframe = $('#iframeTrack', parent.document);
  119.     if (iframe != null && iframe.length > 0) {


  120.         var width = $(".track_main").width();
  121.         if (width == 700) {
  122.             $(".track_main").animate({ width: 20 }, function () {
  123.                 $(iframe[0]).width(20);
  124.             });
  125.         } else {
  126.             $(iframe[0]).width(700);
  127.             $(".track_main").animate({ width: 700 });
  128.         }
  129.     }
  130. }

  131. InspUserTrack = {

  132.     //局部变量
  133.     _trackParam: {
  134.         //地图控件
  135.         mainMap: null,
  136.         //用户轨迹对象
  137.         userLocation: null,
  138.         //用户轨迹回放临时图层
  139.         trackLayer: "巡检员轨迹回放临时图层",
  140.         //巡检员头像临时图层
  141.         userLabelLayer: "巡检员头像临时图层",
  142.         //轨迹线路样式
  143.         trackLineSymbol: function () {
  144.             var sls = new esri.symbol.SimpleLineSymbol();
  145.             sls.style = esri.symbol.SimpleLineSymbol.STYLE_DOT;
  146.             sls.color = new dojo.Color("red");
  147.             sls.width = 2;
  148.             return sls;
  149.         },
  150.         //两点之间移动时间间隔
  151.         duration: 2000,
  152.         //开始位置
  153.         startIndex: 0,
  154.         //当前选择的节点
  155.         selectedIndex: 0,
  156.         //最后一个点
  157.         lastPoint: null,
  158.         //时间控件
  159.         timer: null,
  160.         //轨迹回放结束回调函数
  161.         trackFinishCallback: null,
  162.         //起始点
  163.         $btnFirst: null,
  164.         //上一点
  165.         $btnProview: null,
  166.         //播放
  167.         $btnPlay: null,
  168.         //停止
  169.         $btnStop: null,
  170.         //下一点
  171.         $btnNext: null,
  172.         //最后一点
  173.         $btnLast: null,
  174.     },

  175.     //初始化
  176.     init: function (map, userLocation, callback) {
  177.         //先暂停轮询
  178.         top.Robin.Portal.Page.InspPolling.stopDraw2Map = true;
  179.         top.Robin.Portal.Page.InspPolling.drawLabel2Map();

  180.         var _trackParam = InspUserTrack._trackParam;
  181.         _trackParam.mainMap = map;
  182.         _trackParam.userLocation = userLocation;
  183.         _trackParam.trackFinishCallback = callback;

  184.         _trackParam.$btnFirst = $("#btnFirst");
  185.         _trackParam.$btnProview = $("#btnProview");
  186.         _trackParam.$btnPlay = $("#btnPlay");
  187.         _trackParam.$btnStop = $("#btnStop");
  188.         _trackParam.$btnNext = $("#btnNext");
  189.         _trackParam.$btnLast = $("#btnLast");
  190.         _trackParam.$selTrackSpeed = $("#selTrackSpeed");

  191.         _trackParam.$btnPlay.val("开始");
  192.         _trackParam.$btnStop.attr('disabled', true);

  193.         //播放按钮点击
  194.         _trackParam.$btnPlay.click(function () {
  195.             if (_trackParam.$btnPlay.val() == "开始") {
  196.                 InspUserTrack.start();
  197.             } else if (_trackParam.$btnPlay.val() == "播放") {
  198.                 InspUserTrack.trackContinue();
  199.             } else {
  200.                 InspUserTrack.pause();
  201.             }
  202.         });

  203.         _trackParam.$btnFirst.click(function () {
  204.             InspUserTrack.locationFirst();
  205.         });

  206.         _trackParam.$btnProview.click(function () {
  207.             InspUserTrack.locationPreview();
  208.         });

  209.         _trackParam.$btnNext.click(function () {
  210.             InspUserTrack.locationNext();
  211.         });

  212.         _trackParam.$btnLast.click(function () {
  213.             InspUserTrack.locationLast();
  214.         });

  215.         _trackParam.$btnStop.click(function () {
  216.             InspUserTrack.stop();
  217.         });

  218.         _trackParam.$selTrackSpeed.change(function () {
  219.             InspUserTrack._setDuration();
  220.         });

  221.         InspUserTrack.draw();
  222.     },

  223.     //隐藏点列表
  224.     _infoHidden: function () {
  225.         var iframe = $('#iframeTrack', parent.document);
  226.         if (iframe != null && iframe.length > 0) {
  227.             var display = $("#divTrackbody").css("display");
  228.             if (display == "block") {
  229.                 $("#divTrackbody").slideUp(function () {
  230.                     $(iframe[0]).height(81);
  231.                 });
  232.             }
  233.         }
  234.     },

  235.     //绘制轨迹到地图上
  236.     draw: function () {
  237.         var _trackParam = InspUserTrack._trackParam;
  238.         if (_trackParam.mainMap != null && _trackParam.userLocation != null && _trackParam.userLocation.InspUserLocations != null) {
  239.             var tempLayer = top.Robin.Map.GetGraphicLayer(_trackParam.mainMap, _trackParam.trackLayer);
  240.             var labelLayer = top.Robin.Map.GetGraphicLayer(_trackParam.mainMap, _trackParam.userLabelLayer);
  241.             labelLayer.clear();
  242.             tempLayer.clear();
  243.             var shape = top.Robin.Map.GetPolyline();
  244.             var path = [];
  245.             $.each(_trackParam.userLocation.InspUserLocations, function (i, item) {
  246.                 var point = top.Robin.Map.GetPoint(item.POINTX, item.POINTY);
  247.                 //0-普通坐标;1-RFID坐标
  248.                 if (item.COORDTYPE == "1") {
  249.                     var tempPoint = top.Robin.Map.GetGraphic(point, top.Robin.Map.Symbol.customMarkSymbol(4, new dojo.Color("green")));
  250.                     tempLayer.add(tempPoint);
  251.                 }
  252.                 path.push(point);
  253.             });
  254.             shape.addPath(path);
  255.             var graphic = top.Robin.Map.GetGraphic(shape, _trackParam.trackLineSymbol());
  256.             tempLayer.add(graphic);
  257.             top.Robin.Map.Fly2Geometry(_trackParam.mainMap, graphic.geometry);
  258.         }
  259.     },

  260.     //开始回放
  261.     start: function () {
  262.         //InspUserTrack.draw();
  263.         var _trackParam = InspUserTrack._trackParam;
  264.         _trackParam.$btnStop.attr('disabled', false);

  265.         _trackParam.$btnFirst.attr('disabled', true);
  266.         _trackParam.$btnProview.attr('disabled', true);
  267.         _trackParam.$btnNext.attr('disabled', true);
  268.         _trackParam.$btnLast.attr('disabled', true);

  269.         _trackParam.$btnPlay.val("暂停");
  270.         InspUserTrack._infoHidden();
  271.         if (_trackParam.mainMap != null && _trackParam.userLocation != null && _trackParam.userLocation.InspUserLocations != null) {
  272.             clearInterval(_trackParam.timer);
  273.             _trackParam.lastPoint = null;
  274.             _trackParam.startIndex = 0;
  275.             InspUserTrack._movePoint();
  276.             _trackParam.timer = setInterval(function () {
  277.                 InspUserTrack._movePoint();
  278.             }, _trackParam.duration);
  279.         }
  280.     },

  281.     //停止
  282.     stop: function () {
  283.         var _trackParam = InspUserTrack._trackParam;

  284.         if (_trackParam.trackFinishCallback != null) {
  285.             _trackParam.trackFinishCallback();
  286.         }

  287.         clearInterval(_trackParam.timer);
  288.         _trackParam.lastPoint = null;
  289.         _trackParam.startIndex = 0;
  290.         InspUserTrack.draw();

  291.         _trackParam.$btnPlay.val("开始");

  292.         _trackParam.$btnStop.attr('disabled', true);
  293.         _trackParam.$btnPlay.attr('disabled', false);
  294.         _trackParam.$btnFirst.attr('disabled', false);
  295.         _trackParam.$btnProview.attr('disabled', false);
  296.         _trackParam.$btnNext.attr('disabled', false);
  297.         _trackParam.$btnLast.attr('disabled', false);
  298.     },

  299.     //暂停
  300.     pause: function () {
  301.         var _trackParam = InspUserTrack._trackParam;
  302.         _trackParam.$btnPlay.val("播放");
  303.         _trackParam.$btnStop.attr('disabled', false);
  304.         _trackParam.$btnFirst.attr('disabled', false);
  305.         _trackParam.$btnProview.attr('disabled', false);
  306.         _trackParam.$btnNext.attr('disabled', false);
  307.         _trackParam.$btnLast.attr('disabled', false);
  308.         clearInterval(_trackParam.timer);
  309.     },

  310.     //定位
  311.     location: function (index) {
  312.         InspUserTrack._trackParam.selectedIndex = index;
  313.         if (InspUserTrack._trackParam.userLocation != null
  314.             && InspUserTrack._trackParam.userLocation.InspUserLocations != null
  315.             && InspUserTrack._trackParam.userLocation.InspUserLocations.length > 0) {
  316.             var locat = InspUserTrack._trackParam.userLocation.InspUserLocations[InspUserTrack._trackParam.selectedIndex];
  317.             var point = top.Robin.Map.GetPoint(locat.POINTX, locat.POINTY);
  318.             var tempLayer = top.Robin.Map.GetGraphicLayer(top.Robin.Map.Map2DControl, InspUserTrack._trackParam.trackLayer);
  319.             tempLayer.clear();
  320.             var labelGraphic = top.Robin.Map.GetGraphic(point, top.Robin.Portal.Page.Config.userLabelSymbol());
  321.             var phoneGraphic = top.Robin.Map.GetGraphic(point, top.Robin.Portal.Page.Config.userPhoneSymbol());
  322.             var txtGraphic = top.Robin.Map.GetGraphic(
  323.                 point, top.Robin.Portal.Page.Config.userNameSymbol(
  324.                 Robin.Utils.Date2TimeString(locat.LOCATETIME)));
  325.             var tempPoint = top.Robin.Map.GetGraphic(point, top.Robin.Map.Symbol.customMarkSymbol(6, new dojo.Color("green")));

  326.             tempLayer.add(labelGraphic);
  327.             tempLayer.add(phoneGraphic);
  328.             tempLayer.add(txtGraphic);
  329.             tempLayer.add(tempPoint);
  330.             top.Robin.Map.Fly2Geometry(top.Robin.Map.Map2DControl, point);
  331.         }
  332.     },

  333.     //下一点
  334.     locationNext: function () {
  335.         if (InspUserTrack._trackParam.userLocation != null
  336.             && InspUserTrack._trackParam.userLocation.InspUserLocations != null
  337.             && InspUserTrack._trackParam.userLocation.InspUserLocations.length > 0) {
  338.             if (InspUserTrack._trackParam.userLocation.InspUserLocations.length == InspUserTrack._trackParam.selectedIndex) {
  339.                 InspUserTrack._trackParam.selectedIndex = 0;
  340.             } else {
  341.                 InspUserTrack._trackParam.selectedIndex++;
  342.             }
  343.             InspUserTrack.location(InspUserTrack._trackParam.selectedIndex);
  344.         }
  345.     },

  346.     //前一点
  347.     locationPreview: function () {
  348.         if (InspUserTrack._trackParam.userLocation != null
  349.                 && InspUserTrack._trackParam.userLocation.InspUserLocations != null
  350.                 && InspUserTrack._trackParam.userLocation.InspUserLocations.length > 0) {
  351.             InspUserTrack._trackParam.selectedIndex--;
  352.             if (InspUserTrack._trackParam.selectedIndex == 0) {
  353.                 InspUserTrack._trackParam.selectedIndex = InspUserTrack._trackParam.userLocation.InspUserLocations.length;
  354.             }
  355.             InspUserTrack.location(InspUserTrack._trackParam.selectedIndex);
  356.         }
  357.     },
  358.     //起点
  359.     locationFirst: function () {
  360.         InspUserTrack.location(0);
  361.     },
  362.     //终点
  363.     locationLast: function () {
  364.         if (InspUserTrack._trackParam.userLocation != null
  365.                     && InspUserTrack._trackParam.userLocation.InspUserLocations != null
  366.                     && InspUserTrack._trackParam.userLocation.InspUserLocations.length > 0) {
  367.             InspUserTrack.location(InspUserTrack._trackParam.userLocation.InspUserLocations.length - 1);
  368.         }
  369.     },

  370.     //销毁
  371.     distroy: function () {
  372.         var _trackParam = InspUserTrack._trackParam;
  373.         if (_trackParam.mainMap != null) {
  374.             var tempLayer = top.Robin.Map.GetGraphicLayer(_trackParam.mainMap, _trackParam.trackLayer);
  375.             var labelLayer = top.Robin.Map.GetGraphicLayer(_trackParam.mainMap, _trackParam.userLabelLayer);
  376.             tempLayer.clear(); _trackParam.mainMap.removeLayer(tempLayer);
  377.             labelLayer.clear(); _trackParam.mainMap.removeLayer(labelLayer);
  378.         }
  379.         clearInterval(_trackParam.timer);
  380.         _trackParam.trackFinishCallback = null;
  381.         top.Robin.Portal.Page.InspPolling.stopDraw2Map = false;
  382.         top.Robin.Portal.Page.InspPolling.drawLabel2Map();
  383.     },

  384.     //继续
  385.     trackContinue: function () {
  386.         var _trackParam = InspUserTrack._trackParam;
  387.         _trackParam.$btnPlay.val("暂停");
  388.         _trackParam.$btnStop.attr('disabled', false);
  389.         _trackParam.$btnFirst.attr('disabled', true);
  390.         _trackParam.$btnProview.attr('disabled', true);
  391.         _trackParam.$btnNext.attr('disabled', true);
  392.         _trackParam.$btnLast.attr('disabled', true);
  393.         clearInterval(_trackParam.timer);
  394.         InspUserTrack._movePoint();
  395.         _trackParam.timer = setInterval(function () {
  396.             InspUserTrack._movePoint();
  397.         }, _trackParam.duration);
  398.     },

  399.     //获取两点之间时间间隔
  400.     _setDuration: function () {
  401.         var _trackParam = InspUserTrack._trackParam;
  402.         var speed = $("#selTrackSpeed").val();
  403.         switch (speed) {
  404.             case "慢":
  405.                 _trackParam.duration = 2000;
  406.                 break;
  407.             case "中":
  408.                 _trackParam.duration = 1000;
  409.                 break;
  410.             case "快":
  411.                 _trackParam.duration = 500;
  412.                 break;
  413.             default:
  414.                 _trackParam.duration = 1000;
  415.                 break;
  416.         }
  417.         InspUserTrack.trackContinue();
  418.     },

  419.     //获取点坐标
  420.     _getIndexPoint: function (index) {
  421.         var _trackParam = InspUserTrack._trackParam;
  422.         return top.Robin.Map.GetPoint(_trackParam.userLocation.InspUserLocations[index].POINTX,
  423.             _trackParam.userLocation.InspUserLocations[index].POINTY);
  424.     },

  425.     //移动点
  426.     _movePoint: function () {
  427.         var _trackParam = InspUserTrack._trackParam;
  428.         var tempLayer = top.Robin.Map.GetGraphicLayer(_trackParam.mainMap, _trackParam.trackLayer);
  429.         var labelLayer = top.Robin.Map.GetGraphicLayer(_trackParam.mainMap, _trackParam.userLabelLayer);

  430.         if (_trackParam.userLocation.InspUserLocations.length > _trackParam.startIndex) {
  431.             if (_trackParam.startIndex == 0) {
  432.                 _trackParam.lastPoint = InspUserTrack._getIndexPoint(_trackParam.startIndex);


  433.                 var labelGraphic = top.Robin.Map.GetGraphic(_trackParam.lastPoint, top.Robin.Portal.Page.Config.userLabelSymbol());
  434.                 var phoneGraphic = top.Robin.Map.GetGraphic(_trackParam.lastPoint, top.Robin.Portal.Page.Config.userPhoneSymbol());
  435.                 var txtGraphic = top.Robin.Map.GetGraphic(
  436.                     _trackParam.lastPoint, top.Robin.Portal.Page.Config.userNameSymbol(
  437.                     Robin.Utils.Date2TimeString(_trackParam.userLocation.InspUserLocations[_trackParam.startIndex].LOCATETIME)));

  438.                 labelLayer.add(labelGraphic);
  439.                 labelLayer.add(phoneGraphic);
  440.                 labelLayer.add(txtGraphic);

  441.             } else {
  442.                 var point = InspUserTrack._getIndexPoint(_trackParam.startIndex);

  443.                 if (!_trackParam.mainMap.extent.contains(point))
  444.                     _trackParam.mainMap.centerAt(point);

  445.                 $.each(labelLayer.graphics, function (i, item) {
  446.                     if (item.symbol.type == "textsymbol") {
  447.                         item.symbol.text = Robin.Utils.Date2TimeString(_trackParam.userLocation.InspUserLocations[_trackParam.startIndex].LOCATETIME);
  448.                     }
  449.                 });

  450.                 InspUserTrack._moveNext(_trackParam.lastPoint, point);
  451.                 _trackParam.lastPoint = point;
  452.             }
  453.             _trackParam.startIndex++;
  454.         } else {
  455.             InspUserTrack.stop();
  456.         }
  457.     },

  458.     //匀速移动点
  459.     _moveNext: function (point1, point2) {

  460.         var moveNextTimer = null;

  461.         var createTime = function () {
  462.             return (+new Date);
  463.         }

  464.         var startTime = createTime();

  465.         var _trackParam = InspUserTrack._trackParam;

  466.         var labelLayer = top.Robin.Map.GetGraphicLayer(_trackParam.mainMap, _trackParam.userLabelLayer);
  467.         var tempLayer = top.Robin.Map.GetGraphicLayer(_trackParam.mainMap, _trackParam.trackLayer);
  468.         var thisLastPoint = point1;

  469.         function tick() {

  470.             var remaining = Math.max(0, startTime + _trackParam.duration - createTime());

  471.             var temp = remaining / _trackParam.duration || 0;
  472.             var percent = 1 - temp;

  473.             var leftPos = (point2.x - point1.x) * percent + point1.x;
  474.             var topPos = (point2.y - point1.y) * percent + point1.y;

  475.             var newPoint = top.Robin.Map.GetPoint(leftPos, topPos);

  476.             $.each(labelLayer.graphics, function (i, item) {
  477.                 item.setGeometry(newPoint);
  478.             });

  479.             var path = [];
  480.             path.push(thisLastPoint); path.push(newPoint);
  481.             var shape = top.Robin.Map.GetPolyline();
  482.             shape.addPath(path);
  483.             var graphic = top.Robin.Map.GetGraphicByGeometry(shape);
  484.             tempLayer.add(graphic);
  485.             thisLastPoint = newPoint;

  486.             if (percent == 1) {
  487.                 clearInterval(moveNextTimer);
  488.             }
  489.         }

  490.         moveNextTimer = setInterval(tick, 13);

  491.     }



  492. };
复制代码
分享 转发
TOP
发新话题 回复该主题