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

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

 

1、 技术研究

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

 

Code
 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"/>
10
11                     <add verb="*" path="map.ashx" type="SuperMap.IS.Ajax.MapHandler, SuperMap.IS.AjaxLib, Version=5.3.0.0, Culture=neutral, PublicKeyToken=753ce5cde00ec9b6"/>
12
13                     <add verb="*" path="edit.ashx" type="SuperMap.IS.Ajax.EditHandler, SuperMap.IS.AjaxLib, Version=5.3.0.0, Culture=neutral, PublicKeyToken=753ce5cde00ec9b6"/>
14
15                     <add verb="*" path="query.ashx" type="SuperMap.IS.Ajax.QueryHandler, SuperMap.IS.AjaxLib, Version=5.3.0.0, Culture=neutral, PublicKeyToken=753ce5cde00ec9b6"/>
16
17              </httpHandlers>
18

 

这些便是程序中处理各种服务请求的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!

 

Code
 1
 2
 3///<summary>地图基本设置及其控件设置(基类object扩展了个MapControl1的对象)</summary>
 4
 5HJMap = Class(object,
 6
 7{
 8
 9    scaleBarControl: null,
10
11    MapName: "changchun",
12
13    MapHandler: "http://localhost/SuperMapAjaxTest/",
14
15    MapFormat: "gif",
16
17    MapContainer: "map",
18
19    MapScale: null,
20
21    ZoomLevel: 5,
22
23    ScaleBarControlContainer: "scaleBarControl",
24
25    ShowScaleBarControl: false,
26
27    Create: function(mapName, mapHandler, mapFormat, mapContainer, mapScale, zoomLevel) {
28
29    ///<summary>配置地图参数</summary>
30
31    ///<param name="mapName">地图名称</param>
32
33    ///<param name="mapHandler">地图Handler(Url地址)</param>
34
35    ///<param name="mapFormat">地图格式(gif,png)</param>
36
37    ///<param name="mapContainer">放置地图容器</param>
38
39    ///<param name="mapScale">地图比例尺范围设置</param>
40
41    ///<param name="mapScale">缩放级别数</param> 
42
43        this.MapFormat = mapFormat;
44
45        this.MapHandler = mapHandler;
46
47        this.MapName = mapName;
48
49        this.MapContainer = $(mapContainer);
50
51        this.MapScale = mapScale;
52
53        this.ZoomLevel = zoomLevel;
54
55    },
56
57    CreateMap: function() {
58
59    ///<summary>创建地图</summary>
60
61    ///<return>MapControl</return>
62
63        var param = new Object();
64
65        param.mapName = this.MapName;
66
67        param.mapHandler = this.MapHandler;
68
69        param.imageFormat = this.MapFormat;
70
71        param.fixedView = false;
72
73        param.mapScales = this.MapScale;
74
75        param.zoomLevel = this.ZoomLevel;
76
77        object.MapControl1 = new SuperMap.IS.MapControl(this.MapContainer, param);
78
79        if (this.ShowScaleBarControl == true) {
80
81            var scaleBarParam = new Object();//控件很多属性可以通过查询找到
82
83            scaleBarParam.ordinal = true;
84
85            this.scaleBarControl = new SuperMap.IS.ScaleBarControl($(this.ScaleBarControlContainer), object.MapControl1, scaleBarParam);
86
87        }
88
89        object.MapControl1.Init();       
90
91        return object.MapControl1;
92
93    }
94
95});
96
97 
98

   

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

Code
 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}
10

        

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

       

转载于:https://www.cnblogs.com/hjcook/archive/2008/12/01/1345177.html