/* 定義全局變量 */ 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<ulm_queryresult.length; i++){="" 獲取地圖的graphics="" var="" ulm_graphics="map.getLayer("ulm_layer").graphics;" 將要繪制的點的顏色及邊框顏色="" pcolor="null;" bcolor="null;" 找到最新的位置信息點="" if(i="=" ulm_queryresult.length="" -="" 1="" ||="" ulm_queryresult[i].username="" !="ulm_queryResult[i+1].username){" 首先將最新點加到utd_pointdict當中去="" if(!ulm_graphics){="" utd_pointdict[ulm_queryresult[i].username]="i;" }else{="" }="" 給點的顏色及邊框顏色變量賦值="" 255,="" 0];="" 0,="" 新建一個graphic="" lographic="drawPointAndTemplate(ulm_queryResult[i]," pcolor,="" bcolor)="" 將graphic添加到相應的圖層="" ulm_layer.add(lographic);="" 滿足判斷條件則繪制軌跡線="" &&="" ulm_queryresult[i+1].username){="" 獲取直線兩個端點的經緯度="" cur_x="parseFloat(ulm_queryResult[i].longitude)," cur_y="parseFloat(ulm_queryResult[i].latitude);" next_x="parseFloat(ulm_queryResult[i+1].longitude)," next_y="parseFloat(ulm_queryResult[i+1].latitude);" 定義直線的顏色="" color="JSON.parse(ulm_queryResult[i].color);" track_graphic="drawPolyLine(cur_x," cur_y,="" next_x,="" next_y,="" color);="" ulm_layer.add(track_graphic);="" 將判斷是否是第一次查詢的標志改成false="" isfirstquery="false;" console.log("this="" is="" pollingrun!");="" for(var="" i="0;" i<ulm_queryresult.length;="" 判斷地圖上是否已經存在該用戶的位置信息軌跡="" if(!!utd_pointdict[ulm_queryresult[i].username]){="" 包含ulm_queryresult[i]="" key="" （意為地圖上已存在該用戶的點）="" 修改地圖上存在的最后畫的點的邊框顏色="" gra_index="utd_pointDict[ulm_queryResult[i].username];" 定義一個新的顏色的邊框="" newsymbol="new" esri.symbol.simplelinesymbol(="" esri.symbol.simplelinesymbol.style_solid,="" 邊框為實線="" new="" esri.color([255,="" 0]),="" 邊框的顏色為紅色="" 實線的寬度="" );="" 點的邊框樣式="" ulm_graphics[gra_index].symbol.setoutline(newsymbol);="" 重繪graphic="" ulm_graphics[gra_index].draw();="" 改變最后一個點為當前點，因為先畫的軌跡線，占一個index="" +="" 1;="" 獲取繪制直線的起始端點="" ulm_attr="ulm_graphics[gra_index].attributes;" 獲取直線起始端點的經緯度="" 獲取直線終止端點的經緯度="" 不包含ulm_queryresult[i]="" 改變最后一個點為當前點="" *="" 繪制點和彈窗的函數="" function="" drawpointandtemplate(positionmsg,="" bcolor){="" 防止出現字符串，將經緯度先解析成浮點類型="" x="parseFloat(positionMsg.longitude)," y="parseFloat(positionMsg.latitude);" 1.創建新的geometry="" newpoint="new" esri.geometry.point(x,="" y,="" map.spatialreference);="" 2.創建新的symbol="" esri.symbols.simplemarkersymbol(="" esri.symbols.simplemarkersymbol.style_circle,="" 繪制的點的形狀，選擇圓型="" 20,="" 繪制的點的大小="" 繪制的點的邊框為實線="" esri.color(bcolor),="" 繪制的點的邊框顏色="" 3="" 繪制的點的邊框實線的寬度，即線的粗細="" ),="" 繪制的點的邊框="" esri.color(pcolor)="" 繪制的點的顏色="" 3.定義彈窗的屬性="" tattributes="{" "username":="" positionmsg.username,="" "email":="" positionmsg.email,="" "position":="" positionmsg.position,="" "telephone":="" positionmsg.telephone,="" "longitude":="" positionmsg.longitude,="" "latitude":="" positionmsg.latitude,="" "updatetime":="" positionmsg.updatetime="" };="" 4.創建新的template="" newtemplate="new" esri.infotemplate(="" "用戶定位信息",="" 彈窗標題="" "用戶名稱：${username}<br="">" + "郵箱：${eamil}<br>" + "位置：${position}<br>" + "手機：${telephone}<br>" + "經度：${longitude}<br>" + "緯度：${latitude}<br>" + "更新時間：${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); }</ulm_queryresult.length;>
效果圖：
