应用Ajax技术在ArcIMS中实现动态查询
在ArcGIS 9.2平台推出之后,对于开发人员来讲,ArcIMS 9.2发生了比较大的变化。在保持原有HTML/JavaScripts(Servlet Connector)、ASP(ActiveX Connector)、ColdFusion(ColdFusion Connector)、Java/JSP(Java Connector)的基础上,新增了Java ADF和...
- 作者:姜云鹏来源:ESRI中国|2008年10月23日
在ARCGIS 9.2平台推出之后,对于开发人员来讲,ArcIMS 9.2发生了比较大的变化。在保持原有HTML/JavaScripts(Servlet Connector)、ASP(ActiveX Connector)、ColdFusion(ColdFusion Connector)、Java/JSP(Java Connector)的基础上,新增了Java ADF和.Net ADF,使得使用Java和.Net技术的开发人员更加快捷方便的进行ArcIMS的开发。而ArcIMS的体系结构、站点管理方式和之前利用ArcIMS开发出来的站点也可以顺利地运行在ArcIMS9.2中(使用ArcIMS 9.0、9.1版本的.Net link开发的需要进行简单升级)。
图1 ArcIMS安装程序中的Servlet、ActiveX、ColdFusion连接器
图2 ArcIMS Java ADF安装程序中的Java连接器和Java ADF框架
图3 ArcIMS .Net ADF中的ADF框架
而无论哪种开发方式,ArcIMS最终还是通过ArcXML 与空间服务器(Spatial Server)进行交互。而我们所使用的不同开发方式,只是对ArcXML组织的方式不同。而开发使用不同开发语言时所用到的连接器,也是对ArcXML的不同形式的封装。只不过在ArcIMS 9.2中,针对Java和.NET两大主流WEB开发技术,ESRI提供了响应的Web ADF(Web Application Developer Framework )----Web应用程序开发者框架,封装程度更高更完善,而且与目前主流的WebGIS开发技术----Ajax技术密切结合起来。
Ajax(Asynchronous JavaScript + XML)不是一种单一的技术。实际上,它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含:
l 基于XHTML和CSS标准的表示;
l 使用Document Object Model进行动态显示和交互;
l 使用XMLHttpRequest与服务器进行异步通信;
l 使用JavaScript绑定一切。
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。可以说,在WebGIS应用中,Ajax的前景非常广阔。主要在于,WebGIS中涉及到大量的用户操作,比如地图缩放、平移等浏览操作,属性查询及显示操作等等。如果用传统的模式,这些操作都会刷新整个地图,对空间服务器压力很大,而且处理起来也非常复杂。利用Ajax技术,可以很好地解决这些问题。比如地图切片(瓦片堆叠)技术,比如Google Map。用户已经获取的信息不再刷新,可以有效地降低服务器端压力,并且增强客户端使用感受。ArcIMS 9.2 .NET ADF和Java ADF中已经集成了这些技术,这里我们不做详细介绍,我们就以简单的动态查询为例,来介绍一下如何在传统的HTML/JavaScript(DHTML)站点中完成动态查询。
查询功能示例:
目的:通过查询其它业务数据库(Access)的信息,获取结果的坐标,将其绘制在ArcIMS底图上,并且当鼠标移动到该点上时,返回该点的详细描述信息。
平台: ArcIMS 4.0,4.0.1,9.0,9.1,9.2均可
开发技术:HTML,JavaScript,CSS,ASP
*本次实例主要在ArcIMS Designer生成的HTML Viewer站点基础上进行修改。
篇幅有限,这里只给出核心代码,具体步骤代码请在培训中心网站下载:
下载地址:http://training.esrichina-bj.cn/upload/art/imsajax.rar
示例站点的使用方法:
解压缩imsajax.rar站点文件夹,文件夹中showdetail.asp文件为查询数据库详细信息处理程序(test.mdb) 。使用时需修改数据源的ado路径。
使用designer建立一个默认站点,最好为世界地图或中国地图,因为默认坐标为中国几个城市坐标。
修改ArcIMSparam.js文件中的imsURLvar和imsOVURL值,修改为自建服务名称。
工作流程图:
具体定制步骤如下:
1, 添加查询按钮,实现弹出式查询窗口。(toolbar.htm 343-347)
2, 在mapframe.htm实现div查询对话框。
效果如图:
5,aimsClick.js 中的clickfunction() 控制选择对话框的可见性。683-704行 6,实现div search对话框查询。代码:mapframe.htm中221-225 7,点击查询按钮,请求发送 searchPoint函数。 229-273行 8,点信息返回处理:ProcessPRequest。 278 - 320。 9,点详细信息返回处理(鼠标移动到目标点): 效果如图: 核心代码说明: 查询城市点,信息返回及显示处理均采用ajax实现。图中显示点及详细信息均由div层绘制。首先,发送请求代码如下: function searchPoint(){ //--------查询点信息的请求发送。 xml_mode = true; var field; //查询城市名 field = document.getElementById("txtField").value; if (field != ""){ send_Prequest(field); //调用send_Prequest函数发送请求 }else{ alert("请输入查询城市名!"); } } function send_Prequest(field) { //初始化、指定处理函数、发送请求的函数 if(window.XMLHttpRequest) { //Mozilla 浏览器 http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { //设置MIME类型 http_request.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE浏览器 try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { // 异常,创建对象实例失败 window.alert("不能创建XMLHttpRequest对象实例."); return false; } var url = "search.asp"; //请求URL url+="&cityname="+field; //通过cityname进行查询 http_request.onreadystatechange = processPRequest; //此处指定了查询点信息返回结果的处理函数 http_request.open("post", url, true); // 确定发送请求的方式和URL以及是否同步执行下段代码 http_request.send(null); } Search.asp的处理: <%@language="vbscript" codepage="936" %> <%Response.charset="utf-8" %> <%Response.ContentType="text/xml"%> //指定返回的mime类型为xml <% -- 查询过程代码省略 --%> ‘输出xml格式。 <?xml version="1.0" encoding="utf-8"?> <%do while Not rs.eof%><item><city><name> <%=rs("name")%></name><xcoord> <%=rs("x_coor")%></xcoord><ycoord> <%=rs("y_coor")%></ycoord></city></item> <% rs.movenext loop %> 处理返回查询结果点信息 function processPRequest() { if (http_request.readyState == 4) { // 判断对象状态 if (http_request.status == 200) { // 信息已经成功返回,开始处理信息 var xmldom = http_request.responseXML; //使用XML方式解析。优点就是不必用JavaScript通过字符判断。方便很多。 var cities=xmldom.documentElement.childNodes; //city element 获取城市根节点。察看详细信息可通过请求URL测试。 //例如:http://actc-think42/website/modified_new_v2/search.asp?cityname=beijing //服务器输出的当然也是xml格式了。 for(var i=0;i<cities.length;i++){ var citylist =cities.item(i).childNodes; //city元素下一级子元素数组。也就是name,xcoord,ycoord等。 for(var j=0;j<citylist.length;j++){ //查询结果坐标数组赋值 var city=citylist.item(j); if(city.tagName=="name"){ NmArray[i]=city.text; } if(city.tagName=="xcoord"){ XArray[i]=city.text; } if(city.tagName=="ycoord"){ YArray[i]=city.text; } }//end for j } //end for i //根据解析结果创建查询出来的点层。代码略 } else { //页面不正常 alert("您所请求的页面有异常。"); } } } 通过使用Ajax,在处理类似动态查询时,效果是非常方便快捷的, 如果使用ArcIMS的动态图层来添加动态点,进而查询详细信息,对空间服务器的压力就比较大,处理速度也比较慢,使用ArcXML的处理过程也是非常复杂的。类似的应用案例还比如:车辆动态运行状态的监控、事故点的Web展示等等。而且,因为Ajax作为通用Web技术,并不对开发方式有所限制。
3, javaScripts目录增加aimsDIV.js文件。用于处理div图层选择主要功能。
4,MapFrame.htm文件添加aimsDIV.js引用。 Mapframe.htm中第60行总结:
下一篇:ArcIMS轻松入门教程