/* 定义全局变量 */
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.创建新的graphicvar newGraphic = new esri.graphic(newPoint, newSymbol, tAttributes, newTemplate);//返回graphic对象return newGraphic;}
/* 绘制直线的函数 */
function drawPolyLine(cur_x, cur_y, next_x, next_y, color){//1.创建新的geometryvar newPlJson = {"paths":[[[cur_x,cur_y], [next_x,next_y]]],"spatialReference": map.spatialReference};var newPolyLine = new esri.geometry.Polyline(newPlJson);//2.创建新的symbolvar newSymbol = new esri.symbols.SimpleLineSymbol(esri.symbols.SimpleLineSymbol.STYLE_DASH,//绘制的直线的样式,选择虚线new esri.Color(color),//绘制的直线的颜色3//绘制的直线的宽度,即线的粗细
    );//3.创建新的graphicvar newGraphic = new esri.graphic(newPolyLine, newSymbol);//返回graphic对象return newGraphic;
}
/* 清除定时器 ,关闭轮询  */
function endUlMsgPolling(){
//    console.log(ulm_Int);
    clearInterval(ulm_Int);
}</ulm_queryresult.length;>

效果图:

转载于:https://www.cnblogs.com/leebokeyuan/p/8351221.html

Arcgis API for JavaScript在地图上实现手机定位信息的追踪显示相关推荐

  1. arcgis api for javascript从地图如何读取要素

    arcgis api for javascript如何读取要素,通过ajax请求得到的. 比如: https://gis118.arcgisonline.cn/arcgis/sharing/rest/ ...

  2. Arcgis api for Javascript + arcgisServer + arcSDE笔记(1)

    最近要搞的项目要用Arcgis api for Javascript做地图模块,自己开始学相关的技术.这是之前整理的笔记,现在传到博客上,也作为学习的记录 0 环境搭建 Arcgis软件统一使用10. ...

  3. ArcGIS API for JavaScript根据两个点坐标在地图上画线

    ArcGIS API for JavaScript根据两个点坐标在地图上画线 比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new ...

  4. 地图小部件—ArcGIS API for JavaScript

    电子地图和传统的纸质地图最大的区别就是交互的程度不一样,而交互性很大程度上由地图的小部件所控制.传统的纸制地图主要有三个基本的部件(要素):比例尺.指北针.图例,而电子地图有更多的交互性小部件选择,在 ...

  5. 在移动设备中创建ArcGIS API for JavaScript地图应用程序

    本教程将演示如何通过响应式移动专用布局窗口小部件创建移动友好的webapp 1.支持的设备 这个模板支持安卓和IOS横向和纵向姿态,它使用Dojo Mobile框架并包含Dojo标题窗口等小部件. 2 ...

  6. ArcGIS API for JavaScript——地图展示

    ArcGIS API for JavaScript 能够实现的最基本功能就是地图展示,包括地图缩放.平移.定位.实时显示坐标.展示地图要素(指北针.比例尺.图例).切换地图等.本文将详细介绍地图展示的 ...

  7. ArcGis API for JavaScript学习——加载地图

    ArcGis API for JavaScript开发笔记--加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...

  8. 基于ArcGIS API for JavaScript加载百度各种类型切片地图

    文章目录 应用场景 需求分析 效果图 实现代码 原理解读 应用场景 部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...

  9. ArcGIS API for javascript创建二维度地图

    1.引用arcgis api for javascript <link rel="stylesheet" href="https://js.arcgis.com/4 ...

最新文章

  1. 关系型数据库设计要领(值得收藏)
  2. Android 分享机顶盒项目的封装类《GridView》
  3. matlab 电磁兼容仿真软件,EMC Studio免费版
  4. 格子大法与换入换出分析
  5. 融合、协同系统的边缘云原生架构演进和实践
  6. GatewayWorker Not Support On Windows.
  7. tkinter 菜单添加事件_Tasker的最新测试劫持了Android 11的电源菜单
  8. Python List sort()方法
  9. qt创建图形项,添加自定义窗口
  10. 石头剪子布(信息学奥赛一本通-T1132)
  11. C++ deque
  12. 1 使用WPE工具分析游戏网络封包
  13. vue视频教程大全下载
  14. AIX环境安装DB2 数据库
  15. 摩托罗拉linux软件下载,摩托罗拉手机软件驱动下载
  16. python opencv将图片转为灰度图
  17. 大宗商品交易挂接银行的几个问题?
  18. 计算机系统基础实验 pa1
  19. b站爬虫,用于查询主播舰队用户等级构成
  20. latex怎样让题号顶格_latex proof顶格

热门文章

  1. Access和Access VBA学习总结
  2. 【知识总结】回文自动机(Palindrome_Automaton)
  3. js 手机号加密 中间星号表示
  4. python.day01笔记
  5. TensorFlow-Bitcoin-Robot:Tensorflow 比特币交易机器人
  6. 基于简单工厂模式的计算器程序
  7. pureMVC介绍及学习
  8. Oracle_11g_R2安装手册(图文教程)
  9. silverlight turntable
  10. GARFIELD@02-17-2005