SuperMap.IS AjaxScript之实现研究及基本控件使用

      园子里不见国内GIS的一些软件开发经验介绍，刚好在写关于SuperMap AjaxScript的一些开发，就将一些心得体验记录下来，当以后的参考。也希望能给刚接触的人以一些提示。^_^。

 

1、 技术研究

SuperMap IS .NET AjaxScripts是一套基于ASP .NET Ajax脚本库，通过Ajax技术封装的客户端脚本开发控件（可以和AGS 9.3出的Javascript Api做做比较，^_^）通过XMLHttpRequest对象进行异步通信来向服务器发送请求，实现无刷新的地图显示和操作。我们在web.config中可以查看到一些配置信息。

 

 1
 2
 3<httpHandlers>
 4
 5                     <add verb="*" path="ImageHandler.ashx" type="SuperMap.IS.Web.ImageHandler, SuperMap.IS.WebLib, Version=5.3.0.0, Culture=neutral, PublicKeyToken=753ce5cde00ec9b6"/>
 6
 7                     <add verb="*" path="common.ashx" type="SuperMap.IS.Ajax.CommonHandler, SuperMap.IS.AjaxLib, Version=5.3.0.0, Culture=neutral, PublicKeyToken=753ce5cde00ec9b6"/>
 8
 9                     <add verb="*" path="path.ashx" type="SuperMap.IS.Ajax.PathHandler, SuperMap.IS.AjaxLib, Version=5.3.0.0, Culture=neutral, PublicKeyToken=753ce5cde00ec9b6"/>

                     <add verb="*" path="map.ashx" type="SuperMap.IS.Ajax.MapHandler, SuperMap.IS.AjaxLib, Version=5.3.0.0, Culture=neutral, PublicKeyToken=753ce5cde00ec9b6"/>

                     <add verb="*" path="edit.ashx" type="SuperMap.IS.Ajax.EditHandler, SuperMap.IS.AjaxLib, Version=5.3.0.0, Culture=neutral, PublicKeyToken=753ce5cde00ec9b6"/>

                     <add verb="*" path="query.ashx" type="SuperMap.IS.Ajax.QueryHandler, SuperMap.IS.AjaxLib, Version=5.3.0.0, Culture=neutral, PublicKeyToken=753ce5cde00ec9b6"/>

              </httpHandlers>

 

这些便是程序中处理各种服务请求的handler,在Bin文件夹中的SuperMap.IS.AjaxLib这个程序集中。我们可以通过发送一个服务请求来详细看到其工作的机制。做个点选的功能函数，点击，监视可获取其发送的请求如下： http://localhost:13386/SuperMapAjaxTest/query.ashx?map=changchun&method=QueryByPoint&point={"x": 4110.897189336289, "y": -5563.251397196728}&tolerance=200&queryParam={"customParams": "", "expectCount": 20, "hasGeometry": true, "highlight": {"forceUseDefaultStyles": false, "highlightQueryArea": true, "highlightResult": true, "lineStyle": null, "pointStyle": null, "queryAreaStyle": null, "regionStyle": null, "textStyle": null}, "queryAllLayer": false, "queryLayers": [{"groupClause": "", "layerId": 0, "layerName": "school@changchun", "returnFields": ["smid", "name"], "sortClause": "", "whereClause": ""}], "networkType": 0, "returnFields": null, "startRecord": 0, "whereClause": "", "returnCenterAndBounds": true, "returnShape": false}&trackingLayerIndex=-1&userID=""&jsonp=supermap_callbacks[12281294209726434]§ionCount=1§ionIndex=0&jsonpUserID=1228129420972&t=1228129420972

通过query.ashx这个handler来获取传入的各项参数（json格式），如方法名称,点坐标，查询参数,查询图层等，然后就可以通过地理服务器处理返回如下的信息。

supermap_callbacks[12281294209726434]( '{"currentCount":1,"customResponse":"","recordsets":[{"layerId":13,"layerName":"School@changchun","records":[{"bounds":{"leftBottom":{"x":4055.537136,"y":-5588.455825},"rightTop":{"x":4055.537136,"y":-5588.455825}},"center":{"x":4055.537136,"y":-5588.455825},"fieldValues":["132","吉林工学院"],"shape":null}],"returnFields":["smid","name"]}],"totalCount":1,"trackingLayerIndex":0,"userID":"dfa5a57f-3be6-40ea-a568-12fbf8b37fba"}' );

即调用个回调函数来处理返回的信息，如返回图层、字段，记录集等信息，然后再再通过异步显示结果图片和相关信息。

 

2、 编程实现

     下面就试试写个地图显示页面来。学习javascript主要学习了李战的那本书，所以在写的过程中也使用了他的那个原型模型。下面来实现地图的基本配置及常用控件的使用。先贴代码，hoho!

 

 1
 2
 3///<summary>地图基本设置及其控件设置(基类object扩展了个MapControl1的对象)</summary>
 4
 5HJMap = Class(object,
 6
 7{
 8
 9    scaleBarControl: null,

    MapName: "changchun",

    MapHandler: "http://localhost/SuperMapAjaxTest/",

    MapFormat: "gif",

    MapContainer: "map",

    MapScale: null,

    ZoomLevel: 5,

    ScaleBarControlContainer: "scaleBarControl",

    ShowScaleBarControl: false,

    Create: function(mapName, mapHandler, mapFormat, mapContainer, mapScale, zoomLevel) {

    ///<summary>配置地图参数</summary>

    ///<param name="mapName">地图名称</param>

    ///<param name="mapHandler">地图Handler(Url地址)</param>

    ///<param name="mapFormat">地图格式(gif,png)</param>

    ///<param name="mapContainer">放置地图容器</param>

    ///<param name="mapScale">地图比例尺范围设置</param>

    ///<param name="mapScale">缩放级别数</param> 

        this.MapFormat = mapFormat;

        this.MapHandler = mapHandler;

        this.MapName = mapName;

        this.MapContainer = $(mapContainer);

        this.MapScale = mapScale;

        this.ZoomLevel = zoomLevel;

    },

    CreateMap: function() {

    ///<summary>创建地图</summary>

    ///<return>MapControl</return>

        var param = new Object();

        param.mapName = this.MapName;

        param.mapHandler = this.MapHandler;

        param.imageFormat = this.MapFormat;

        param.fixedView = false;

        param.mapScales = this.MapScale;

        param.zoomLevel = this.ZoomLevel;

        object.MapControl1 = new SuperMap.IS.MapControl(this.MapContainer, param);

        if (this.ShowScaleBarControl == true) {

            var scaleBarParam = new Object();//控件很多属性可以通过查询找到

            scaleBarParam.ordinal = true;

            this.scaleBarControl = new SuperMap.IS.ScaleBarControl($(this.ScaleBarControlContainer), object.MapControl1, scaleBarParam);

        }

        object.MapControl1.Init();       

        return object.MapControl1;

    }

});

 

   

     在使用控件时需要注意变量名要和页面的id一致，要不会出现些问题。这样就完成了个简单的地图配置的类，现在我们就可以在页面中进行页面调用来显示地图了。还是贴代码，^_^。

 1function OnLoad() {
 2
 3            mapUtils = New(HJMap, ["changchun", "http://localhost:13386/SuperMapAjaxTest/", "gif", "map", [1 / 100000, 1 / 80000, 1 / 50000, 1 / 10000, 1 / 8000, 1 / 2000], 6]);
 4
 5            mapUtils.ShowScaleBarControl = true;
 6
 7            mapControl = mapUtils.CreateMap();//生成地图
 8
 9}

        

    在New方法中写上对应的初始化参数，如地图名，maphandler（告诉哪里去获取像query.ashx等handler）,图片格式，图片的放置容器，比例尺范围等，另可设置对应的常规控件的是否显示等，然后调用CreateMap()我们就完成了简单的地图基本配置和常规控件的使用了。