Arcgis API for JavaScript在地圖上實現手機定位資訊的追蹤顯示
阿新 • • 發佈:2019-02-20
/* 定義全域性變數 */ var ulm_Int = null;//儲存手機定位資訊輪詢setInterval的id var isFirstQuery = null;//定義一個變數儲存是否是第一次查詢 var ulm_Layer = null;//手機定位資訊圖層變數 var ulm_queryResult = null;//儲存手機定位資訊查詢結果的變數 var firstQueryPrompt = null;//儲存第一次查詢提示框物件的變數 var utd_pointDict = {};//儲存地圖上存在的最新的更新資料的點的使用者名稱稱及graphics下標 key: username value: graphics下標 /* 啟動獲取手機的定位資訊的定時輪詢 */ function startUlMsgPolling(eventid){ //判斷手機定位資訊查詢按鈕的文字值 var bValue = $("#ulm_btn").html()=="開啟手機定位資訊查詢功能"; //清除之前的圖層 if(map.getLayer("ulm_layer")){ map.removeLayer(map.getLayer("ulm_layer")); } if(bValue){ //1: 代表第一次查詢 0: 代表不是第一次查詢 isFirstQuery = true; //彈出正在查詢的提示框 firstQueryPrompt = $.messager.alert({title: "提示", msg: "正在查詢中...", icon: "ok"}); //初始查詢 queryUserLocationMsg(eventid); //設定定時器,暫時設成1分鐘查詢一次 ulm_Int = setInterval(queryUserLocationMsg(eventid), 60*1000); //改變手機定位資訊查詢按鈕的文字值 $("#ulm_btn").html("關閉手機定位資訊查詢功能"); }else{ //結束手機資訊輪詢 endUlMsgPolling(); //改變手機定位資訊查詢按鈕的文字值 $("#ulm_btn").html("開啟手機定位資訊查詢功能"); } } /* 查詢手機定位資訊 */ function queryUserLocationMsg(eventid){ //定義錯誤提示視窗變數 var errorPrompt = null; //Ajax進行非同步請求 查詢資料庫 var url = "queryUserLocationMsg/";//請求地址 var params = {"eventid": eventid, "isFirstQuery": isFirstQuery};//請求引數 $.ajax({ url: url, type: "post", timeout: 30*1000, data: params, dataType: "json", success: function(res){ if(isFirstQuery === true && firstQueryPrompt !== null){ //關閉正在查詢的提示框 firstQueryPrompt.window('close'); } //對結果進行判斷 var bLen = res.length > 0; if(bLen){ ulm_queryResult = res; showLocationPoint(); }else if(!bLen && isFirstQuery){ $.messager.confirm({ title: "提示", msg: "抱歉,沒有可供顯示的定位資訊。繼續等待可能會有新的定位資料返回... 選擇“確認”按鈕繼續監控定位資訊;選擇“取消”按鈕結束查詢。", fn: function(r){ if(!r){ //結束手機資訊輪詢 endUlMsgPolling(); //改變手機定位資訊查詢按鈕的文字值 $("#ulm_btn").html("開啟手機定位資訊查詢功能"); } } }); } }, error: function(e){ if(isFirstQuery === true && firstQueryPrompt !== null){ //關閉正在查詢的提示框 firstQueryPrompt.window('close'); } //關閉前一個錯誤提示框 if(errorPrompt !== null){ errorPrompt.window("close"); } //發生錯誤,中斷手機定位資訊輪詢 endUlMsgPolling(); //改變手機定位資訊查詢按鈕的文字值 $("#ulm_btn").html("開啟手機定位資訊查詢功能"); errorPrompt = $.messager.alert({title: "提示", msg: "請求過程中發生錯誤,已中斷查詢...\n", icon: "error"}); isFirstQuery = false; } }); } /* 在地圖上顯示點的函式 */ function showLocationPoint(){ //判斷是否是第一次查詢 if(isFirstQuery){ //新建圖層 ulm_layer = new esri.layers.GraphicsLayer({id: "ulm_layer"}); //新增圖層 map.addLayer(ulm_layer); //進行迴圈繪製 for(var i=0; i" + "郵箱:${eamil}
" + "位置:${position}
" + "手機:${telephone}
" + "經度:${longitude}
" + "緯度:${latitude}
" + "更新時間:${updatetime}"//彈窗內容 ); //5.建立新的graphic var newGraphic = new esri.graphic(newPoint, newSymbol, tAttributes, newTemplate); //返回graphic物件 return newGraphic; } /* 繪製直線的函式 */ function drawPolyLine(cur_x, cur_y, next_x, next_y, color){ //1.建立新的geometry var newPlJson = {"paths":[[[cur_x,cur_y], [next_x,next_y]]],"spatialReference": map.spatialReference}; var newPolyLine = new esri.geometry.Polyline(newPlJson); //2.建立新的symbol var newSymbol = new esri.symbols.SimpleLineSymbol( esri.symbols.SimpleLineSymbol.STYLE_DASH,//繪製的直線的樣式,選擇虛線 new esri.Color(color),//繪製的直線的顏色 3//繪製的直線的寬度,即線的粗細 ); //3.建立新的graphic var newGraphic = new esri.graphic(newPolyLine, newSymbol); //返回graphic物件 return newGraphic; } /* 清除定時器 ,關閉輪詢 */ function endUlMsgPolling(){ // console.log(ulm_Int); clearInterval(ulm_Int); }