http://www.gissky.net- GIS空间站

我要投稿 投稿指南 RSS订阅 网站资讯通告:
搜索: 您现在的位置: GIS空间站 >> 技术专栏 >> ArcGIS >> ArcIMS >> 正文

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

作者:姜云鹏    文章来源: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开发的需要进行简单升级)。

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/art/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的处理:

<%@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元素下一级子元素数组。也就是namexcoordycoord等。

              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技术,并不对开发方式有所限制。

javaScripts目录增加aimsDIV.js文件。用于处理div图层选择主要功能。

Tags:ArcIMS  
责任编辑:gissky
  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 中国地图