×
您的位置: 首页 > 编程笔记

应用Ajax技术在ArcIMS中实现动态查询

AR 时间:2010-12-26  查看:341   收藏
摘要:在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开发的需要进行简单升级)。 ArcGIS 9.2平台推出之后,对于开发人员来讲,ArcIMS 9.2发生了比较大的变化。在保持原有HTML/JavaScriptsServlet Connector)、ASPActiveX Connector)、ColdFusionColdFusion Connector)、Java/JSPJava Connector)的基础上,新增了Java ADF.Net ADF,使得使用Java.Net技术的开发人员更加快捷方便的进行ArcIMS的开发。而ArcIMS的体系结构、站点管理方式和之前利用ArcIMS开发出来的站点也可以顺利地运行在ArcIMS9.2中(使用ArcIMS 9.09.1版本的.Net link开发的需要进行简单升级)。

1 ArcIMS安装程序中的ServletActiveXColdFusion连接器

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 ADFWeb Application Developer Framework ----Web应用程序开发者框架,封装程度更高更完善,而且与目前主流的WebGIS开发技术----Ajax技术密切结合起来。
AjaxAsynchronous JavaScript + XML)不是一种单一的技术。实际上,它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含: l 基于XHTMLCSS标准的表示; 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 ADFJava ADF中已经集成了这些技术,这里我们不做详细介绍,我们就以简单的动态查询为例,来介绍一下如何在传统的HTML/JavaScriptDHTML)站点中完成动态查询。
查询功能示例:
目的:通过查询其它业务数据库(Access)的信息,获取结果的坐标,将其绘制在ArcIMS底图上,并且当鼠标移动到该点上时,返回该点的详细描述信息。 平台: ArcIMS 4.04.0.19.09.19.2均可 开发技术:HTMLJavaScriptCSSASP *本次实例主要在ArcIMS Designer生成的HTML Viewer站点基础上进行修改。 篇幅有限,这里只给出核心代码,具体步骤代码请在培训中心网站下载: 下载地址:http://training.esrichina-bj.cn/upload/note/imsajax.rar 示例站点的使用方法: 解压缩imsajax.rar站点文件夹,文件夹中showdetail.asp文件为查询数据库详细信息处理程序(test.mdb) 。使用时需修改数据源的ado路径。 使用designer建立一个默认站点,最好为世界地图或中国地图,因为默认坐标为中国几个城市坐标。 修改ArcIMSparam.js文件中的imsURLvarimsOVURL值,修改为自建服务名称。

工作流程图: 具体定制步骤如下: 1, 添加查询按钮,实现弹出式查询窗口。(toolbar.htm 343-347 2, mapframe.htm实现div查询对话框。
效果如图:


3 javaScripts目录增加aimsDIV.js文件。用于处理div图层选择主要功能。
4MapFrame.htm文件添加aimsDIV.js引用。 Mapframe.htm中第60

5aimsClick.js 中的clickfunction() 控制选择对话框的可见性。683-704 6,实现div search对话框查询。代码:mapframe.htm221-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的处理: 指定返回的mime类型为xml 查询过程代码省略 --%> 输出xml格式。 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 var citylist =cities.item(i).childNodes; //city元素下一级子元素数组。也就是namexcoordycoord等。 for(var j=0;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技术,并不对开发方式有所限制。 javaScripts目录增加aimsDIV.js文件。用于处理div图层选择主要功能。

 

0% (0)
0% (0)