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: "请求过程中发生错误，已中断查询...
", 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;>

效果图：