基于Aax技术的Web专题图层的关键技术研究

基于Ajax技术的Web专题图层的关键技术研究蔡春源(1) 巢俊杰(2) 杨慧(3)1 南京师范大学地理科学学院 江苏南京 210046 cagehouhou2 南京师范大学地理科学学院 江苏南京 210046 nestle7773 南京师范大学地理科学学院 江苏南京 210046 whinee摘要：Web2.0带来的网络技术革新开始影响着传统的WebGIS开发模式。本文针对传统的专题电子地图开发过程所存在的弊端，利用Ajax的开发模式，结合关系/对象映射、结构性数据建模以及面向对象的设计模式等理念，设计了包括专题图层库表结构、专题图持久层、专题图表现的数据模型以及系统的通信结构和专题图功能任务的配置框架在内的系统体系。同时，研究并比较了系统内各模块中所采用的关键技术。通过应用实例证明，本文所提出的方案在实际应用中提升了系统效率、增强了用户体验，具有良好的应用效果。关键字： Ajax 专题图层 关键技术Abstract：This paper aims at the shortcoming of traditional developing pattern in E-map, and propose a represent method of theme layer based on Ajax. With building the theme layer data table and designing the consistent layer, we build the object model in the server directly based on the DTD of VML and SVG. At the same time, we use XML to configure tasks, and build communication framework aiming at theme layer by the “factory pattern”. This solution promotes the system efficiency and improves the users experiences.Key words: Ajax, theme layer, key technique引言20世纪90年代以来，随着互联网技术的空前发展，人们对基于Web环境下的地图浏览的需求也日益明显，通过浏览器进行周边位置查询以及专题信息的检索已深入到人们的日常生活中。然而，仅仅通过文字表达查询结果已经很难满足应用需要，因此，图文一体化的呈现方式已经成为应用领域的新需求。一种全新的地理信息运用：WebGIS(基于Internet的地理信息系统)开始引起国内外专家的重视。传统的网络电子地图的开发中，通常采用的B/S结构，其存在诸多弊端：一方面，频繁的海量数据的传输，使得地图呈现的速度十分缓慢；另一方面，不断的屏幕刷新也带来了视觉体验的下降；另外，地图数据在表现过程中的几何增长造成的网络负担过重，这些都制约着电子地图在Web环境下的使用。一种将应用转嫁给客户端，而使服务器专注于地理信息的计算处理的开发方式，随着新的Web开发方式的出现而越来越得到人们的关注。Applet作为Java在浏览器中的解决方式，很好地完成了将应用任务由服务器向浏览器转移的任务。在国内外的很多WebGIS应用网站上也常常能够看到这样的解决方式。但浏览器之间的竞争阻碍了它的发展。而近两年来出现的Ajax技术由于在Google Map上成功，逐渐成为了解决WebGIS应用的一种常用的方式。Google随后推出的GeoTools也在一定程度上促进了Ajax开发方式在WebGIS中的应用。因此，本文在介绍Ajax技术，及其与传统Web交互方式比较的基础之上，提出了基于Ajax技术的专题图层的关键技术研究，设计了专题图层数据表、持久层、数据模型以及通信结构和配置框架，并构建某电子地图网站专题地图，为网络电子地图中的专题图层的应用提供新思路。1. Ajax技术概述1.1 Ajax概念Ajax（Asynchronous JavaScript & XML），是一种可给Web应用带来全新体检的多种成熟技术的综合体。它的主体部分包含DHTML（Dynamic HTML）与远程脚本（remote scripting）等一系列已在Web开发中广泛使用的技术，这保证了它在技术上的可行性。Ajax在HTTP原有的“请求/响应”模式下，带来了全新的用户体验、异步交互的传输方式、DHTML + XML +XMLHTTPRequest综合运用的开发模式。Ajax技术的实现结构如图1所示。图1 Ajax的实现结构图1中,当用户发出一个客户端行为时，通过XMLHTTPRequest对象，与服务器端异步交互；服务器端根据客户端行为，完成相应数据的处理，实时地将结果数据回传给客户端；客户端得到数据后利用CSS、DOM等技术完成数据的呈现。Web服务器在Ajax中承担了数据存取、计算并标记化为XML的工作。而Web浏览器端从当初单纯的显示功能转变到将结构化数据结合JavaScript、CSS、DOM等技术完成“表现更新”的功能上来。在服务器与浏览器两端之间承担异步传输任务的载体是被称作XMLHTTPRequest的对象。1.2 Ajax与传统Web交互方式的比较在传统的Web应用的生命周期中，用户和应用会话的所有状态都保留在Web服务器上。呈现给用户的是一系列页面，每次页面的切换都不可避免的要刷新整个页面。使得用户长时间的等待新页面的加载（如图2所示）。图2 传统的Web交互模式而在Ajax应用的生命周期中，用户登录后，服务器将客户端应用交付给浏览器。这种应用方式可以独立地处理多样性的用户交互，当用户处理交互需要更新数据时，则将以后台的方式向服务器发出请求，而不打断用户的操作流程。因此带来了应用上的连续性（如图3所示）。Ajax的模式使得传输的数据量大大减少，闪动的页面刷新不存在了，客户端与服务器的交互时间也大大地缩短了。图3 Ajax的交互模式1.3 Ajax技术在电子地图中的应用优势传统的地图开发模式，通常采用B/S体系架构，因此在每次浏览电子地图的操作中，都要完成和服务器的交互，刷新整个地图页面。然而，地图数据的海量性与地理数据计算的复杂性使得网络延时在网络地图的运用中表现的尤其严重。画面的闪动与图像重新绘制的视觉效果也削弱了电子地图在Web环境下的运用效果。在Ajax“服务器交互的是数据不是内容”的思想指导下，电子地图成为了浏览器中的应用，当有新的数据需要表现时，通过后台从服务器上获取数据，结合已表现的地图元素共同显示。地图页面加载过程不复存在，取而代之的是根据客户需求对相应数据的实时加载显示。每次需要处理和传输的数据量大大减少。这在专题图层的显示操作中表现为：底层地图图片不再随着用户的每一次操作而重绘，而是通过不同的图层作为一个数据集合在后台与服务器交互的方式来完成显示更新的需求。采用Ajax技术开发电子地图与传统的开发模式相比，具有以下几个优点：1 任务在服务端与客户端的分离：客户端通过JavaScript, CSS, DOM等技术专注于地图的表示逻辑；服务端专注于地图信息的获取、计算、维护以及结构化处理；2 良好的用户体验：地图内容的更新不再需要整个页面的刷新，B/S模式下的Web电子地图应用通常有的屏幕闪动消失了；3 削弱网络延时的影响：在Ajax的开发模式下，通过网络交互的数据更加精炼，所需要传输的地图数据相应减少，这使得交互的速度有了明显的提升。原本的网络延时的现象表现得不再明显；4 无需插件的支持：Ajax所采用的是基于标准化以及被广泛支持的成熟技术，在使用时，客户无须再下载浏览器插件或小程序。2. 基于Ajax的专题图层的表示方法随着Google推出的GeoTools等一系列电子地图开发工具以及“地图切片技术”在网络电子地图网站中的引入，传统的专题图层不再能够与基础图层在服务器端共同绘制后作为一组数据传输到客户端。2.1 设计流程专题图层数据表的建立 根据Ajax的需要为专题信息点建立专题图层数据表； 持久层的设计 根据专题图层的数据表，设计持久层；利用关系/对象映射（ORM）的概念以及能够完成持久化的第三方工具完成专题图层库表到专题图层对象的映射。数据模型的设计 Ajax对于结构化数据的要求以及浏览器中用来绘制矢量图型的VML、SVG等数据的结构性要求促使本文决定在服务端，直接根据VML,SVG的文档结构图（DTD）的要求去建立对象模型。结构化的VML数据通过异步传输，直接在客户端加以呈现。通信结构与任务配置框架的设计 针对专题信息标注点、注记、信息提示框（Tip）显示的不同要求，将交互功能加以区分，同时，为了系统任务的可扩展性，引入以XML文件配置任务，辅助以“工厂模式”的方法构建针对专题图层的Ajax的通信框架。整体的设计流程图如下：图4 设计流程图如图4所示，首先将专题图层的功能从整个电子地图应用系统中分离；然后，根据专题图层的功能特征完成数据库表的设计；以专题图层的库表结构为基础设计持久层，并且完成相应的表现要素库的设计，最后搭建通信框架并建立任务配置框架。2.2 功能模块设计专题图层数据表的设计考虑到地理数据的海量性特征以及与已有数据的兼容性问题，本文决定采用关系型数据库作为数据的存贮介质。 为了使专题信息的模块更具独立性与可维护性，考虑为其建立一张新表：SUBJECT_INFO表，同时通过一个记录地图信息身份的“信息点编号（SUBJECT_ID）”作为与其它系统表的关联外键。在库表字段的设计时，将专题信息按照显示内容划分标志点、注记、信息提示说明。以原始信息点的坐标作为基准坐标，设置标志点、注记在横轴与纵轴上的坐标偏移量字段。同时为标志点的显示图片设置图片资源URL的字段，以及与注记字体信息的相关字段。整体的表设计如下：SUBJECT_INFO表字段名称字段描述字段类型ID信息IDVarcharSUBJECT_ID信息点编号VarcharSUBJECT_NAME信息点标注名称VarcharSUBJECT_X信息点X坐标FLOATSUBJECT_Y信息点Y坐标FLOATSIGN_MIN_VIEW符号比例尺最小值INTEGERSIGN_MAN_VIEW符号比例尺最小值INTEGERNOTE_MIN_VIEW注记比例尺最小值INTEGERNOTE_MAN_VIEW注记比例尺最大值INTEGERSIGN_X符号位置X偏移FLOATSIGN_Y符号位置Y偏移FLOATNOTE_X注记位置X偏移FLOATNOTE_Y注记位置Y偏移FLOATFONT字体VARCHARFONT_SIZE字号VARCHARFONTCOLOR前景色VARCHARBGCOLOR背景色VARCHARIS_BLOD粗体INTEGERIS_ITALIC斜体INTEGERSIGN_IMG_URL符号图片的URLVARCHARWIN_URL弹出窗口地址VARCHARID字段为信息点的惟一标识字段，信息点编号字段满足于系统中原有信息记录的关联。信息点坐标以及符号、注记坐标偏移量决定了在图上的现实位置。考虑到在不同比例尺条件下信息显示的选择，为各个信息点设置比例尺范围，决定在该范围内是否显示标志点，以及标志注记。字体设置字段参考主流的字处理软件的基本设置。同时为各标注点的信息提示框设置保存信息来源的字段WIN_URL。持久层设计所谓持久层，是在系统的逻辑层面上，专注于实现数据持久化的相对独立的领域（Domain）。它担负着将数据的使用者与数据实体相关联的任务。ORM（Object/Relational Mapping）是在当前计算机体系中，面临着面向对象编程与关系型数据库的情况，在二者之间建立的一个对应关系的映射。其将结构化的关系型数据库表与系统中的业务逻辑对象建立映射关系，从而隐藏了繁琐的数据读取、修改、插入、删除等本身与业务逻辑无关的操作。在专题图层应用系统中，本文建立SUBJECT_INFO数据表与专题图对象（TsubjectInfo）的对应关系。将储存专题信息的关系型库表转变为可编码的对象。该对象以类似JavaBeans对象的方式呈现，对象的属性对应着SUBJECT_INFO表中的字段。使用这样的方式，将专题地图信息对应成对象的方式有以下的优点：1. 简化了专题信息的数据维护工作；2. 将结构化的抽象概念转变为对象性的直观概念，专题信息成为了更加易于理解的对象；3. 基础的专题信息与专题对象相对独立，可以根据专题信息功能变化的需要，便捷的修改映射关系，而不影响在库表中的数据；4. 对应产生的对象可以通过编程语言的特性完成例如专题信息对象的属性控制、对象的自我复制等操作；5. 映射成对象的专题对象可以通过网络等多种媒介完成在不同平台之间的对象共享。最后，为持久层建立所需的工具函数集合。 数据模型的设计考虑到将使用“矢量图标识语言”（VML） 或者“可伸缩矢量图形”(SVG)在浏览器中完成专题图层的绘制，本文将参考这类标识语言定义的文档结构图（DTD）来建立数据模型。根据专题地图的呈现需要以及VML本身的结构化特性决定采用VML，这样不仅满足了Ajax专注于内容的更新的开发模式以及使用XML作为内容载体的要求，同时XML本身固有的结构化特征也使得它在转化为可编程对象时非常方便。首先，根据VML的要素结构作对象的划分。为每个XML（VML）要素建立一个JavaBeans对象，同时将该要素中的属性定义成JavaBeans的属性。将VML的所有要素对应设计出具有父子层级结构的JavaBeans体系，之后为每个要素类提供XML文档片断与对象之间的转换函数。最终，为表现数据的逻辑组织提供了一个可供选择的完整VML要素库。考虑以下几个因素，设计专题图的表现数据结构：1. 完整的VML要素库有利于不同形态特征的专题信息的表示；2. 结构化的VML要素可以任意加以组合，满足专题信息表示变化的要求；3. VML的结构化特征适合形成一个具有聚集关系的要素集合。下面以VML的“圆边矩形元素要素对象”（RoundRectObject）的建立为例，做数据模型建立的进一步说明。首先建立所有的要素的抽象父类: VMLObject，它定义了一个标识性的id属性，以及一个要求所有子类实现的CreateElement抽象方法。该方法返回VML要素的XML的Element对象。同时为所有子类提供了一个XML对象到文本的默认实现方法asText()。以下为VMLObject的UML图：图5 VMLObject UML图通过研究“圆边矩形元素”(RoundRect)，发现它需要一个文本元素（Text）和一个阴影元素（Shadow）。考虑到这两个元素的通用性，决定让它们也作为VML要素库中的对象，实现VMLObject接口。根据两个要素所应该包含的属性建立两个对象:文本元素对象（TextObject）和阴影元素对象(ShadowObject）。之后根据RoundRect一些特有属性加上对文本元素对象（TextObject）和阴影元素对象（ShadowObject）两个对象的聚合，设计出圆边矩形元素对象（RoundRectObject），如下(UML图)。图6 RoundRectObject UML图按照上述方法为整个VML的要素建立要素对象库，从而完成对整个数据模型的设计。Ajax通信结构与任务配置框架的设计Ajax提出了通过JavaScript调用XMLHTTPRequest对象完成与服务端的交互过程，但是它本身并不具有框架性的结构来建立管理这样的交互方式。专题信息图层的客户操作多种多样，不同的操作需要服务器做出相应不同的处理。为客户的基本操作配置命令/功能对应表来管理不同的操作过程，有利于明确专题图层操作的结构，也易于扩展可能出现的新的操作方式。这里，本文采用在服务端建立唯一的交互接口，在该接口中通过传输来的任务命令文本选择合适的模块去处理任务。而命令文本与完成相应功能的模块预先定义在服务端的配置文件中，在系统启动初期一次加载，形成一个命令/功能模块对应的系统全局集合。当系统运行过程中，不同的命令由客户端传输过来，在“命令/功能模块”集合中选择合适的模块完成任务，并且返回需要的数据。客户端建立JavaScript对象 管理XMLHTTPRequest对象的建立、使用与销毁。服务端的任务配置模块 本文通过XML文件来配置客户端命令与功能模块的对应关系。利用Map数据结构去构建命令/功能对应的集合对象，在系统运行周期中保存整个“命令与功能模块”的对应关系。命令集合是用户对于专题图层的常用操作的集合。服务端的任务功能模块 本文将一个个功能模块看作一个个“工厂”，同时建立一个定义了泛型功能的抽象工厂，不同的功能在不同的工厂中实现。而对于返回对象，由于所有的返回对象都具有XML的结构的共性，所以也相应建立抽象的接口，具体的返回“产品”实现该接口而获得。服务端的通讯模块 这里使用唯一的入口Servlet来处理所有的客户端命令，它利用反射机制，调用各个具体“工厂”，完成任务返回对应的“产品”。通过上述功能的设计，完成一个适合扩展的Ajax通信结构，以及针对专题图层任务变化的任务配置框架的建立。系统需要建立新的专题图层功能时，可以通过添加新的工厂实现与返回对象实现，并在配置文件中加以注册来完成，这符合软件设计的“开/闭原则”，满足了专题地图操作可扩展性的要求。3. 应用实例分析结合上述的设计思路，本文构建了某电子地图网站，支持专题信息的显示、管理等功能。其中底层地图由服务器端按照不同的比例尺进行静态图片的管理。而专题图层的加载按照上述体系结构完成，同时为各个专题用户添加个人专题信息的管理功能。整体的系统结构如下图：图7 系统体系结构图上图中，当客户端接收了用户的地图操作动作后，动态的生成一个XMLHTTPRequest对象，将命令通过该对象传输给Web服务端的唯一入口Servlet；该Servlet通过查询预先加载的命令/功能配置集合后，选择合适的功能实现工厂完成任务；工厂通过持久层，获得专题地图对象，同时在VML元素库中选择适合用于地图表现的元素组合形成相应的产品；最后通过Ajax工具函数将生产出的专题地图产品转换成适合于Ajax传输的XML片段，并且通过XMLHTTPRequest对象回传给客户端；最终客户端在VML显示平台上完成专题图信息的表现。当用户打开页面时，利用Ajax技术将不同比例尺的静态地图图片加载到客户端，并且在浏览器中做图片的缓存，减少底层地图图片的重复传输问题。以后基础地图信息的浏览功能可以完全在客户端的浏览器中实现。图8 专题图层的动态加载演示图当用户针对某一专题信息图层做检索操作时，利用Ajax异步的动态加载该图层，避免整个图像的重新绘制。用户需要哪个图层就异步交互得到哪个图层，做到用什么取什么，用多少取多少。4. 结束语随着Web2.0的到来，各式各样新的Web开发模式层出不穷。电子地图的开发模式也在随着Web的开发模式而不断地变化。本文没有从整个电子地图的开发入手，只是从现在常见的“地图切片”技术的角度上，提出了专题图层显示的一个解决方式。本文介绍的Ajax的通讯机制中所搭建的框架不仅仅适用于这样的项目，地图切片本身也可以通过这样的方式来处理。对于专题信息的编辑功能也能在这一框架下得到扩展。可以预见，在Ajax技术的带动下，传统的Web电子地图的开发方式必将发生重大的变化。而在这样的开发框架下如何完成复杂的地理要素分析，使得它不仅适合于简单地图浏览功能，同样能够用于Web条件下的专业的地学分析将是这一主题今后研究的重点。同时，通过地理要素的形态外观，实现在电子地图中的模式识别也有可能成为基于Ajax的网络电子地图新的功能需求点。5. 参考文献1 Dave Crane, Eric Pascarello, Darren James. Ajax in action. 人民邮电出版社2 Ryan Asleson, Nathaniel T. Schutta. Foundations of Ajax. 人民邮电出版社3 阎宏 Java与模式. 电子工业出版社4 Alan Shalloway, James R. Trott. Design Patterns Explained.中国电力出版社5 GOF95 E. Gamma, R. Helm, R. Johnson, and J. Vlissides. Design Patterns Elements of Reusable Object-Oriented Software. Addison-Wesley, 19956 郭庆胜, 周巨锁. 选择专题地图表示方法的推理研究. 测绘信息与工程2004年2期7 廖小韵. 专题地图表示方法的研究. 测绘通报8 Craig Larman. Applying UML and Patterns: An Introduction to Object-Oriented Analysis and Design and Iterative Development (3rd Edition). Prentice Hall PTR9 Nicholas C. Zakas. Professional JavaScript For Web Developers. Wrox10 夏昕, 曹晓刚, 唐勇 深入浅出Hibernate 电子工业出版社更多测绘论文请登录测绘网论文频道查询：http:/ 更多测绘论文请登录测绘网论文频道查询：http:/ 客服热线：010-52775185