很早以前我就对GPS的实时显示感兴趣,一般物流或其他需要实施监控的企业采用的跟踪系统都是C/S的,后来我在一个Demo上看到过基于B/S的 例子,主要是基于AGS JSAPI开发而成的。我也曾专门问过相关的人,证实了我对该技术实现流程的猜测,即客户端定期访问一个指定的WebService来获取GPS信号,然 后将其在地图上显示。
GPS信号模拟软件我没有找到,所以我就自己写了一个随机坐标生成服务,它能够提供一个指定范围内的坐标点:
GPSPoint 类代码:
public class GPSPoint
{
private int x;
private int y;
public GPSPoint()
{
}
public int X
{
get { return x; }
set { x = value; }
}
public int Y
{
get { return y; }
set { y = value; }
}
public string createJSON()
{
StringBuilder JsonString = new StringBuilder();
JsonString.Append("{");
JsonString.Append("/"GPSPoint/":[ ");
JsonString.Append("/"" + x.ToString() + "/"," + "/"" + y.ToString() + "/"");
JsonString.Append("]}");
return JsonString.ToString();
}
}
该WebService方法:
[WebMethod]
public string CreateGPSInfo()
{
Random ram=new Random();
int x=ram.Next(586742, 621223);
int y = ram.Next(89212, 117049);
GPSPoint pt=new GPSPoint();
pt.X = x;
pt.Y = y;
return pt.createJSON();
}
.NET20的WebService一个比较讨厌的地方是无 法以JSON格式将数据返回给客户端,因此我还写了一个ashx的文件,专门返回JSON格式的数据:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
GPS gps = new GPS();
context.Response.Write(gps.CreateGPSInfo());
}
在客户端该如何 定时请求GPS服务并显示呢?这其实也并不复杂。
我们继续来讲一讲如何在B/S架构的WebGIS上实现GPS实时信号的显示,在上一篇中,我通过一个web服务,能够产生一个随机的坐标点。而接 下来,肯定是要能够定时触发一个访问该服务的请求才行。JS中本来有setTimeOut和setInterval两个函数,为了便于管理,我使用了 Ext的定时器完成。
下面是发送请求的函数:
var gpsTask = function(){
Ext.Ajax.request({
url:'http://nbjbt/cad2gis_service/getgpspoint.ashx',
method:'post',
headers:{'Content-Type':'application/json;charset=utf-8'},
success:function(response, options){},
failure:function(response, options){}
});
}
如何发送以及停止 发送呢,也很简单,下面的startGPSTask函数能够每隔5秒运行一次gpsTask函数,而stopGPSTask函数则会停止该触发 (Ext.TaskMgr.stop方法却不能停止触发某个具体的函数执行,不知道为什么?!):
function startGPSTask(){
Ext.TaskMgr.start({
run: gpsTask,
interval: 5000
});
}
function stopGPSTask(){
Ext.TaskMgr.stopAll();
}
道理很明显了,剩下的显示,便是通过Graphic对象在某个动态图形层中的位置 变化而不断改变地图的当前中心点,这个处理过程自然是在success的处理函数中完成的。具体的操作过程也并不复杂,即记录前后两个点,生成一条 path,然后添加到polyline中,清空图形层,再将新的polyline赋给graphic,然后将graphic添加到图形层中去,在此过程中 不断改变地图的中心位置,这样就形成了动态变化的效果。具体代码摸索有些复杂,但并不困难。
下面是实现的例子的图片: