利用Web ADF JavaScript Library实现GPS终端的实时位置显示（初级篇）

本文涉及的内容包括：JSON, JQuery, Hashtable，请自行先了解相关技术

ArcGIS Server Web ADF内部包含了一套JavaScript Library，我们称它为Web ADF JavaScript Library。通过它可以直接与Web ADF控件进行交互。如果没有记错的话，9.2以上版本，JavaScript Library是嵌入在Web ADF控件中的。目前我还没找到官方完整的API Reference，但有部分知识点来自http://help.arcgis.com/en/sdk/10.0/serveradf_net/conceptualhelp/index.html#//00020000010v000000 。

 

要实现GPS终端的实时显示，考虑到数据的时效性和频繁度，首先我们可能要创建一个订阅客户端从数据分发服务订阅指定终端的GPS数据，订阅不是本文的主题，暂且略过。我们约定数据最终以JSON的形式保存在IIS服务器，然后通过AJAX定时取回数据。

 

JSON的数据格式如下：

 

{

"gpsinfo":[

{"id":"0","lon":"123.5725","lat":"21.0772","speed":"34","direction":"20"},

{"id":"1","lon":"123.5918","lat":"21.1219","speed":"55","direction":"11"},

{"id":"2","lon":"123.624","lat":"21.0708","speed":"66","direction":"2"},

{"id":"3","lon":"123.6256","lat":"21.0565","speed":"77","direction":"234"},

{"id":"4","lon":"123.5683","lat":"21.1169","speed":"80","direction":"45"},

{"id":"5","lon":"123.6439","lat":"21.0989","speed":"99","direction":"64"}]

}

1、创建GPSTerminalInfo类型来保存数据

JSON数据包括终端ID，经度，纬度，速度，方向等信息；为了更好地组织这些信息，在脚本中创建类型GPSTerminalInfo，具体代码如下所示：

function GPSTerminalInfo(id, longitude, latitude, speed, direction) {

    this.id = id;

    this.lon = longitude;

    this.lat = latitude;

    this.speed = speed;

    this.direction = 0;

}

 

2、新增 graphicFeatureGroup 到地图控件

//创建对应的MAPTIPS对象和相关的事件
var mapTips = $create(ESRI.ADF.UI.MapTips, {"id": "polygonGraphicsMapTips", "animate": false});

_graphicFeatureGroup = $create(ESRI.ADF.Graphics.GraphicFeatureGroup,
{
    "id": "_graphicFeatureGroup", "symbol": null, "highlightSymbol": null, "mapTips": mapTips
}
, {
    "mouseOver": onMouseOverGraphics, "mouseOut": onMouseOutGraphics
}
);
// 新增 graphicFeatureGroup 到地图控件
_mapCtl.addGraphic(_graphicFeatureGroup);

 

3、定时取回车辆位置信息

function RetrievesRealtimePosition() {

    if (_mapCtl != null)

        _spatialReference = _mapCtl.get_spatialReference();

 

    var gpsinfoUrl = _realtimeDataUri + "?" + Math.random();

    $.ajax({

        type: 'GET',

        url: gpsinfoUrl,

        dataType: 'json',

        async: false,

        success: function (dt) {

            //data = $.parseJSON(dt.gpsinfo);

            //console.log(dt.gpsinfo);

 

            for (var i = 0; i < dt.gpsinfo.length; i++) {

                var info = new GPSTerminalInfo(dt.gpsinfo[i].id, dt.gpsinfo[i].lon, dt.gpsinfo[i].lat, dt.gpsinfo[i].speed,dt.gpsinfo[i].direction);

                var carPoint = new ESRI.ADF.Geometries.Point(info.lon, info.lat, _spatialReference);

                var screenPoint = _mapCtl.toScreenPoint(carPoint);

                UpdateTerminalPosition(info); //更新终端位置

            }

        }

    });

    _mapCtl.refreshGraphics(true);

    setTimeout(RetrievesRealtimePosition, 5000); // 循环调用，时间间隔为5秒钟

}

 

4、保存并更新终端位置信息

function UpdateTerminalPosition(Gpsinfo) {

    var carPoint = new ESRI.ADF.Geometries.Point(Gpsinfo.lon, Gpsinfo.lat,_spatialReference);

    if (_hashGraphics.containsKey(Gpsinfo.id)) {

        trackPoint = _hashGraphics.get(Gpsinfo.id);

        trackPoint.set_geometry(carPoint);
    }

    else {

        var carMarkerSymbol = new ESRI.ADF.Graphics.MarkerSymbol(_vehicleDefaultUri, 22, 21, "pointer");       // 创建非选中状态时的符合显示

        trackPoint = $create(ESRI.ADF.Graphics.GraphicFeature, {

            "geometry": carPoint,       // 创建GraphicFeature,然后将其添加到GraphicsFeatureGroup

            "symbol": carMarkerSymbol

        });

        trackPoint.set_id('vehicle' + Gpsinfo.id);

        _hashGraphics.put(Gpsinfo.id, trackPoint);

        _graphicFeatureGroup.add(trackPoint);

    }
}

 

有兴趣可以自己再重新敲一遍代码，其实也没有多少内容。但我做完时发现可以承载的终端数量太少了，当超过1000个终端时，浏览器会提示“执行脚本将导致缓慢”的提示。5秒钟请求一下数据，而且数据大小不超过100K，再用 trackPoint.set_geometry(carPoint)重新设定一下位置，这样的访问速度和流量也算正常吧？希望有懂的朋友不吝赐教！另外如果你不想敲代码可以通过链接下载：

http://download.csdn.net/detail/chocolateboy/6307457