园子里不见国内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()我们就完成了简单的地图基本配置和常规控件的使用了。