基于Ajax的城市公众服务系统实现

郑 莉，罗跃军

(1.武汉大学测绘学院，湖北武汉430079;2.光庭导航数据(武汉)有限公司，湖北武汉430073)

基于Ajax的城市公众服务系统实现

郑 莉1，罗跃军2

(1.武汉大学测绘学院，湖北武汉430079;2.光庭导航数据(武汉)有限公司，湖北武汉430073)

为提高公共服务平台空间信息资源共享的服务效率和能力，针对当前应用广泛的瓦片式地图服务模式，探讨基于Ajax的瓦片式地图服务研究，开发对应的瓦片式切图工具，为空间信息资源共享提供数据保障。试验结果表明，该系统具有很高的瓦片切图效率，对提高传统WebGIS的响应速度具有较高的应用价值。

瓦片地图;切割;合成;Ajax;公众服务系统

一、引 言

随着城市建设的快速发展，城市中的各类信息资源也越来越多，各种信息资源与空间地理位置的联系也越来越紧密，如何将城市中各行各业，种类繁多的信息资源与空间信息进行分类与整合，从而依托地理空间位置信息实现对信息资源的共享服务［1-2］，这已经成为城市信息化建设中急需解决的问题。建设地理信息公众服务平台，利用当前互联网环境，整合相关信息资源，面向公众提供地理信息服务，不仅可以降低地理信息应用的成本门槛，满足公众对地理信息资源使用的需求，而且可以更好地利用测绘成果为社会服务。传统的WebGIS服务模式可以达到地理空间信息资源共享的目标，它可以实时请求地图服务器传输地图，但该模式消耗资源(如网络负载、服务器负载等)相对比较大，因此，不能满足多用户、高并发的地理空间信息资源共享服务效率的要求。瓦片式地图服务模式首先把空间信息数据按照特定的瓦片式切图算法生成规矩的瓦片式地图存储于硬盘目录下，然后以链接图片的方式在浏览器中还原地图［3］。该服务模式响应速度要快于传统WebGIS服务模式，而且对地图服务器的负载也相对小一些。本文就是针对当前应用广泛的瓦片式地图服务模式，探讨基于Ajax的瓦片式地图服务研究，开发对应的瓦片式切图工具，为空间信息资源共享提供数据保障。

二、瓦片地图服务的体系结构

瓦片式地图可分为两种：一种是客户端瓦片技术，即在客户端将本来只需一次请求即可获得的地图图片分解为多次请求，由客户端将这多次请求获得的地图图片组合起来，形成一幅完整的地图，但它对WebGIS服务器和网络的荷载要求非常大;另一种是服务器端的瓦片技术，即预先在服务器上切割出金字塔结构的地图图片，让客户端来访问，这种方式不涉及WebGIS服务器的解析和地图生成过程，而是一个存储的图像加载，因此速度比客户端瓦片技术和非瓦片式GIS快［4］。本研究是基于服务器端的瓦片技术，系统采用B/S架构进行设计开发，GIS数据处理平台采用MapInfo 8.5，后台数据库使用Oracle、MySQL6以及自定义数据库。系统采用的开发工具是 Microsoft Visual Studio.NET 2008、php5，以及Flex3等。平台服务器环境为Red Linux Advance Server 5或者Windows Server 2003。应用平台系统是自主开发的JavaScript地图组件、ArcGIS Server 9.3以及Flash地图组件等。瓦片地图服务采用多层体系结构设计，系统由用户层、瓦片地图服务中间件和数据层构成，以增加应用系统的可伸缩性和灵活性。

三、瓦片切图工具设计

1.瓦片地图预先生成

本系统运用Ajax技术，客户端与服务器可以进行异步多线程数据交互，在地图服务中以分块传输地图。将浏览器地图容器分割成尺寸相等(一般为256像素×256像素大小)的若干正方形地图方块，并根据客户的操作，先从缓存中搜索相应的地图数据，如果缓存中没有对应的地图数据，Ajax引擎会根据一定的算法计算出需要新加载的瓦片，以异步多线程方式向服务器发出请求。在用户操作时候，使用JavaScript和DHTML立即更新地图信息，并向服务器发出异步请求，以执行更新或查询缓存与数据库。当请求返回时，就可以使用JavaScript和CSS来相应地更新页面，而不是刷新整个页面。地图分块技术极大地改进了客户端和服务器端的交互效率，减轻了服务器负载和网络传输负担。

地图缓存模块用于存储地图数据，提高系统的效率，降低反应时间。当用户访问地图的某一区域时候，系统将会读取该区域临近区域的数据，储存在缓存中，方便用户查询。而用户查询的时候，系统会先从缓存中读取，如果不能命中，系统会向数据库查询模块发送请求，查询地图数据。当用户在操作地图的同时，系统会自动从后台的服务器中读取数据，存储到缓存中，此时用户还根本没有意识到浏览器正在与服务器通信。而用户访问其他区域的时候，访问就会变得非常流畅［5］。本系统采取LRU(least recently used)算法来动态置换缓存中的内容。LRU算法原理局部性原理是：在前面一系列操作中使用频繁的区域很可能在后面的操作中频繁使用。反过来说，已经很久没有使用的区域很可能在未来较长的一段时间内不会被用到，所以在每次调换时，找到最近最少使用的那个区域并调出内存。

2.地图切割与合成

地图瓦片可由矢量地图或栅格地图切割而成。地图切割程序根据投影类型、地理坐标、缩放级别、地图瓦片像素大小等参数生成栅格形式的地图瓦片，并用缩放级别、x坐标和y坐标等标识为图片命名。图1为图片裁切具体流程，先将图片加载进来，在裁切时，需要明确产生Cells数组的大小以及影像对象，并告知影像中每个图片的大小，则图片会自动初切割成等尺寸的画面(Tile);然后将处理后的图片写入到目录中。网站在使用这些图片时，会根据图片裁切原理，通过工具组合还原成需要的图片，并显示在网站的页面中。不过当影像数据很大时，需要考虑建立文件索引，但这会引起性能下降。建议将裁切工具作为单独工具，而不进行实时切片。

地图的合成由Ajax引擎在客户端完成。Ajax引擎首先分析浏览器地图容器中的当前缩放级别、地理坐标和容器大小等参数，计算出需要哪些地图瓦片;然后异步并发地向服务器发出请求，当地图瓦片返回后，将其放到浏览器地图容器中的正确位置上。各相邻地图瓦片均无缝隙，所有瓦片合成后在用户眼里是一整块地图，图2为图片合成具体流程。

图1 图片裁切流程

图2 图片组合显示流程

四、地图搜索技术优化

1.地图搜索

所谓地图搜索，就是用户在地图搜索引擎界面下，输入想要查找地点的关键字，便可在地图窗口中定位整个城市范围内想要查找的街道、建筑物等地理位置，并获得相关地图信息［6］。城市公众服务系统拥有精准而充实的地理信息库，最新的兴趣点(POI)信息，拥有高性能的搜索技术，在为用户提供精准搜索的同时，具有优良的搜索反应速度。

地图搜索(如图3所示)实现具体流程如下：①在Web浏览器的地图搜索界面下，用户选择“区县列表”中的区县(默认为城市)，并且输入欲搜索的街道、商业建筑等兴趣点的关键字，点击搜索按钮;②客户端通过JavaScript脚本，获得用户想要搜索信息的“区县”、“关键字”等搜索条件，建立与服务器端的连接，向服务器端发送请求(以“Get”方式向服务器发送请求);③Web服务器接收客户端的请求，分析搜索条件，确定用户激发的搜索类别，继而确定具体的搜索引擎;④建立与数据库服务器的连接，根据不同的搜索引擎，在数据库服务器上搜索满足要求的信息;⑤Web服务器向客户端返回搜索结果(以XML文件返回结果);⑥在Web浏览器的地图搜索界面下输出搜索结果列表(POI名称、地址、详细信息链接)，如果搜索的是街道，则在地图显示窗口中画出街道中心线;如果搜索的是兴趣点，则在地图显示窗口中以字母或数字标出搜索到的兴趣点地理位置。

图3 地图搜索流程

地图搜索模块中采用了Ajax技术，目的是增强地图搜索界面的互动性，使地图搜索程序可以像桌面应用程序中常见的动态用户界面和漂亮的控件一样，并减少客户端从服务器端请求少量信息，而不是整个网页，增加页面的数据更新但同时减少页面的刷新和刷新等待，减轻空间服务器的同时改善用户体验。客户端是借助于Ajax技术，利用JavaS-cript语言，实现与服务器端的异步数据请求，保证用户无需等待服务器端的响应而继续进行其他操作。

2.周边搜索

周边搜索顾名思义就是在哪里找什么，也就是查询或搜索以某一位置为中心的周边感兴趣的信息。输入地理信息名(指搜索中心地址、地标建筑物、POI名称或是行政区划名称)，以及中心位置周围的生活信息关键词，如餐馆、KTV、银行、药店等，点击搜索按钮后，即可获得中心位置周围POI列表。还可设置搜索半径，即用户进行周边搜索的时候，可根据自己的需要更改搜索半径的大小。

周边搜索具体实现流程如下：①在Web浏览器的周边搜索界面下，用户首先在中心位置栏中输入中心地址、地标建筑物名称或行政区划等地理信息名称，并同时周围信息栏中输入信息点关键词，然后点击搜索按钮;②客户端通过JavaScript脚本，获得用户想要搜索信息的“地理信息名称”、“周围信息的关键词”等搜索条件，建立与服务器端的连接，向服务器端发送请求(以“Get”方式向服务器发送请求);③Web服务器接收客户端的请求，分析地理信息名称，如果是行政区划名称，则以该区划中心为圆心，以指定的半径为搜索半径，进行信息点的搜索;如果是地标建筑物等名称，则以该地标点为圆心，以指定的半径为搜索半径，进行信息点的搜索;④建立与数据库服务器的连接，根据周边搜索的搜索引擎，在数据库服务器上搜索符合条件的兴趣点;⑤Web服务器向客户端返回XML文件形式的搜索结果;⑥ 在Web浏览器的周边搜索界面下列出搜索结果(POI名称、地址、详细信息链接)，并在地图显示窗口中以字母或数字标出搜索到的兴趣点地理位置。周边搜索模块实现所采用的技术与地图搜索一样。流程可参照图3所示。

五、系统性能与实现

1.系统性能

为了测试本系统的实际性能，对系统的响应时间进行了测试。在Windows XP平台下搭建试验环境，测试使用的服务器是一台IBM的PC级服务器，配置为Intel 2.8 GHz双核处理器和4 GB内存。在客户计算机上运行专门开发的测试程序，模拟单个用户的平移、缩放和快速定位操作，用户动作间隔设定为1 s。测试程序记录每次动作的开始时间和完成时间，进而计算得到每个动作的等待时间。为了提高测试结果可信度，每次测试设定用户分别进行3000次平移、缩放以及快速定位操作，测试结果如表1所示。从表1可以看出，平移操作的响应时间大约只有原来的1/5，缩放操作的响应时间大约是原来的1/4，快速定位的响应时间大约是原来的1/2，系统性能得到了较大的提升。

2.系统实现

图5是兴趣点搜索显示，将查询结果在客户端浏览器中以列表的形式显示，同时还将结果的位置在地图窗口中标注。在查看一个结果的详细信息时，并在地图窗口中把当前查看结果的位置在地图窗口中居中显示。在本系统中周边搜索功能主要是指用户在确定一个位置后和一个距离范围后，可以查找位于这个范围内的服务提供商信息和服务信息，用户界面如图6所示。

表1 操作等待时间 ms

图5 兴趣点搜索

六、结束语

针对目前公众对地理信息系统应用的迫切需求，本文设计开发的城市公众服务系统，整合了多尺度、多时相、多源、多分辨率空间信息，采用金字塔空间结构来对地图数据进行组织，对客户端请求的地图数据进行合理的分割与传输，并通过减少网络传输的数据量来加快客户端显示效果，快速展示电子地图，建立了一种高效的面向用户提供地图服务的技术解决方案运行机制，从而实现了面向社会公众的空间地理信息服务，提高了公众对地理空间信息作用的认知度，促进了地理空间信息向实用化、规范化、公开化、产业化方向的发展。

［1］ YANG C W，DAVID W W，YANG R X，et al.Performance Improving Techniques in Web-based GIS［J］.International Journal of Geographical Information Science，2005，19(3)：319-342.

［2］ KHARE R.Beyond Ajax：Accelerating Web Applications with Real-Time Event Notification［D］.Netherlands：Delft University of Technology，2005.

［3］ 钱志彬，赵卫东.轻量级WebGIS中间件的设计与实现［J］.计算机工程，2006，32(23)：265-267.

［4］ MENNO K J.The Role of the Map in a WebGIS Environment［J］.Journal of Geographical Systems，2004，6(2)：83-93.

［5］ 王浩，喻占武，曾武，等.基于瓦片寿命和访问热度的海量空间数据缓存置换策略［J］.武汉大学学报：信息科学版，2009，34(6)：667-670.

［6］ 涂振发，喻光明，张纯洁.基于Ajax和MapX的Web-GIS的体系及其实现［J］.华中师范大学学报：自然科学版，2008，42(1)：136-140.

Implementation of Urban Public Services System Based on Ajax

ZHENG Li，LUO Yuejun

0494-0911(2012)09-0074-04

P208

B

2011-09-02

测绘遥感信息工程国家重点实验室专项科研经费资助

郑 莉(1979—)，女，福建福鼎人，博士，讲师，主要从事GIS及摄影测量与遥感的研究工作。