1. 程式人生 > >Arcgis API for JavaScript在地圖上實現手機定位資訊的追蹤顯示

Arcgis API for JavaScript在地圖上實現手機定位資訊的追蹤顯示

/* 定義全域性變數 */
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); }