摘 要：分析网络地理信息系统（WEBGIS）的现状，发现当前系统存在的问题。并结合SVG技术和Ajax技术，提出构造一新WEBGIS系统的想法。首先介绍了各种使用到的技术，SVG技术有占存储空间小和强交互性的特点，说明利用这种矢量图形规范进行webgis系统开发的可能性； Ajax技术有“按需取数据”特点，说明利用Ajax进行客户端与服务器之间通信实现的WEBGIS具有图形质量高、传输速度快等优点；缓存技术是指利用一定的调度算法实现地理数据的适当存储，以用来提高系统的响应能力。其次，设计了一个四层的基于B/S的WEBGIS模型。然后介绍了模型实现的关键要点：缓存技术实现的原理及技术；SVG采用层次结构进行空间数据的表达以及与客户进行交互的具体实现；并且为了提高数据的传输速度，本系统对传输数据进行了压缩，介绍了所采用的压缩算法，并且对系统进行测试，比较了系统性能的变化。最后利用SVG和Ajax等技术实现了WEBGIS系统。
关键词：SVG；Ajax；WEBGIS；缓存
1、引言
网络地理信息系统（WEBGIS），是GIS与网络的结合，GIS通过网络进行了扩展，从网络的任意一个节点，人们可以浏览和获取Web上的各种地理空间数据。目前地理数据的概念已扩展为：分布式的、超媒体特性的、相互关联的数据。
近年来，网络技术的发展为WEBGIS提供了广阔的发展空间。但由于网络速度限制，基于WEBGIS的空间信息服务并不理想，而且传统的web语言HTML也不利于表现地理空间数据，使WEBGIS的发展面临着严峻的技术挑战，具体表现在（1）空间信息的动态升级变化实现较为困难，(2)数据共享程度较低，不同平台间数据共享较困难，形成网络上的“数据孤岛”，造成极大的浪费。(3) 传输速度较慢，这是目前WEBGIS发展最大的瓶颈。(4) 空间信息表达有待完善。（5）地图与用户间交互性差、动态效果实现困难。这些问题造成WEBGIS实用性的降低，无法满足用户要求。因此，能否采用相关技术针对上述问题实现一个全新的平台是近年来领域研究的一大热点。针对提出的问题，我们得出新平台应具备空间信息更新容易、地图数据量小、便于传输、能附加其它多媒体信息且价格低廉等特点。综合分析目前各种方案的优缺点，文中设计和实现了基于SVG和Ajax技术的WEBGIS系统：利用SVG的占存储空间小和强交互性以及Ajax技术的“按需取数据”等特点，初步解决了上述问题。
2、使用的技术
2.1 SVG
SVG（Scalable Vector Graphics）是一种基于XML的用来描述二维矢量图形和矢量点以及阵混合图形的置标语言，是一种矢量图形规范。SVG规范定义了SVG的特征、语法和显示效果，包括模块化的XML命名空间（namespace）和SVG文档对象模型(DOM)。SVG的绘图可以通过动态和交互式方式进行，在实际操作中，则是以嵌入方式或脚本方式来实现的。SVG不仅提供超链接功能，还定义了丰富的事件。由于SVG支持脚本语言（javascript），可以通过Script编程，访问SVG DOM的元素和属性，即可响应特定的事件，从而提高了SVG的动态和交互性能。SVG实现了图形、图像和文字的有机统一。SVG除了支持HTML中常用的标记，如文本、图像、链接、交互性、CSS的使用、脚本（Script）外，还提供了大量针对图形、图像、动画的特定标记。这就为实现GIS提供了可能。
2.2 AJAX
Asynchronous JavaScript and XML (Ajax ，异步J avaScript 和XML ) 是多种技术的综合，在XHTML 和CSS 基础上，使用DOM实现动态显示和交互，使用XML 和XSTL 进行数据交换与处理，使用XML HttpRequest 对象进行异步数据读取，使用JavaScript 绑定和处理所有数据. 在应用Ajax 之前，Web 站点强制用户进入提交、等待、重新显示的模式，用户的动作总是与服务器的思考时间同步.Ajax 提供与服务器异步通信的能力，使用户可从请求—响应的循环中解脱出来 . 本文探索采用SVG与Ajax 技术实现WEBGIS 的方法，涉及的系统采用SVG作为地图文件格式，Ajax实现客户端与服务器之间的通信，由此实现WEBGIS具有图形质量高、传输速度快等优点。
3、系统的设计
在由SVG与Ajax实现的WEBGIS中，摒弃传统从服务器发送栅格数据结果到客户端的方式，实现以XML 数据格式从服务器端向客户端发送数据，再由客户端SVG图像引擎将XML数据转换为SVG对象在客户端SVG插件中显示。系统采用B/S结构，整个由SVG与Ajax 实现的WEBGIS系统分为四层，分别是数据层、GIS服务层、WEB服务层和客户端。
客户向服务器提出请求，服务器接收到请求后，生成矢量地图，并且压缩后传回客户端，客户端收到数据以后解压，然后由Adobe SVG Viewer(ASV)显示。在请求与响应期间，利用Ajax技术和缓存技术给用户更好的体验。而SVG的使用使系统数据量大大减少，提高了响应速度；同时也增强了地图与用户的交互性。
4、系统的实现
4.1实现缓存
运用基于AJAX的模型。在HTTP的验证模型中，第一次客户发送请求时，要求服务器给予最新的数据，所以发送请求的REQUEST HTTP头中没有包含标识符。服务器给客户准备好最新的数据，并在回应的REPONSE HTTP头中加入MarkFlag项，它的值便是引用数据的唯一标识符。它回应的状态码是X_State，表示资源找到，正常发送内容。第二次客户请求同样的内容时，在客户端中已有这
个内容的缓存，所以在发送请求的响应头中加入 If-None-Match 的内容项，它的值是刚才服务器发给它的MarkFlag内容项的值。服务器收到这个请求，取出If-None-Match的内容项标识符的值，并与自身的标识符相比较。如果它们的值相同，表明服务器上的内容没有更改，这时发给客户端的HTTP回应是Y_State。如果服务器的内容已改变，则重新组织数据和产生新的引用数据的标识符，并且回应HTTP的状态码是X_State，发送给客户端，表示数据发生改变。如果客户端收到是Y_State的回应，表明数据没有改变，直接从缓存中获取数据。如果收到的状态码是X_State，表明数据已更新，则显示用户最新的数据，并更新数据的缓存。具体如下（图1）：
图 1
从以上的分析可知，此模型仍旧需要HTTP请求和一些必要的HTTP的交互。但它传输的只是一些必要的HTTP头，大大减少了网络的通信量，同时也减少包括产生和发送数据的花销。在这个模型中，它的实现由客户端与服务器端两个部分组成。客户端运用AJAX技术，产生一个异步调用对象，用以
请求和获取数据。并在HTTP头加上标识符，发送给服务器予以验证。当收到服务器的回应后，判断是数据从缓存中取数据，还是从服务器取数据。服务器端则对客户端的请求进行验证，来确定客户端是否有数据的缓存或过期。如客户端没有缓存或过期，则产生所需的数据内容和它的引用标识符，一并发给客户端。在这个模型中最为关键的是要由服务器端进行验证，来判断是否客户端的内容已经过期。
4.2 SVG表示地图和交互功能
结合传统栅格地图的分层特点，在本系统中采用SVG的
图 2
采用上面图表示的层次结构进行空间数据的表达，需要描述的对象有地图对象、图层对象以及地物对象(实体)三大类。
SVG文件中对地图符号的表示，按特性分为5类:点状实体、线状实体、面状实体、注记体和栅格体，在SVG 中分别用use 、polyline 、polygon 、text 和image 来表示。由于SVG本身不支持复杂的线状符号，可采用< glyph> 元素定义用户自定义字体的方法处理。
(1) 点状实体。其输出一般采用小的面状元素来表示，如小的圆形或矩形等，下面是用小圆形表示点的实例：
(2) 线状实体。其输出方式一般采用
(3) 面状实体。一般采用封闭填充的
如下例所示表示一个四边形:
(4) 注记体。其一般采用
(5) 栅格体。一般使用
(6) 复杂图形。将复杂线状符号的基本循环单元视为用户自定义的一种特殊字体并用指定字母或数字(如“1”) 代替,在复杂线状符号出现的地方用随线文字元素< text Pat h > 代替原本的地物实体,其中,线状符号粗细由“font2size”属性以像素为单位设置, 基本循环单元个数由线的长度除以“font2size”取整得到。比如：
< ! --符号的使用-->
< text startOff set =“0”id =“Polyline_ Text ” font2family =“MyFont”font2size =“100”fill =“ #FF6600”st roke =“none”xmlns =“ht tp : / /www.w3. org /2000 /svg”>
< text Path xlink : href =“ # Polyline_ Path”id=“Polyline_ Path”> 1111111111. . . < /text Pat h >
< /text >
交互功能的实现步骤是：先获得HTML的document对象引用SVG地图对象的标识符，然后调用SVG对象的getSVGDocument方法获得SVG文档对象，再使用SVG文档对象的getElementByID方法根据标识符获得SVG地图中的内部对象，完成交互功能。如：
function zoomin()
{
var svgdoc=document.svgmap.getSVGDocument();
//用来获得SVG 文档对象
var svgElement=svgdoc.getElementById(""g_main"");
//获得元素
var svgZoomIn = svgdoc.documentElement.currentScale;
i = i*1.5;
svgElement.setAttribute(""transform"",""translate(""+j+"" ""+k+"") scale(""+svgZoomIn*i+"")"");
//设置值
}
4.3 数据的压缩
由于没有经过压缩的SVG数据量还是比较大，所以我们在数据传输的时候采用了数据压缩。经过多方比较，我们最后采用的是GZIP压缩方法，GZIP现今已经成为Internet上使用非常普遍的一种数据压缩格式，HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。
压缩带来的好处是数据量的显著减小，但同时也会有服务器和客户端的计算（压缩和解压）时间开销，所以对这两个性能进行了测试。经测试发现数据量经过压缩减少到1/4，而总体时间的比较：压缩时所花的时间是不压缩时的2/3，由此可知采用压缩时的性能高于不压缩时的性能。
5 结语
目前本系统已基本实现,通过运行测试，系统稳定、服务器资源占用小、数据传输速度快，证明了采用SVG与Ajax 技术实现WEBGIS是可行的。首先由于本系统采用SVG图像技术，并压缩后传输，使得数据量显著减小，在网络上的传输速度得到明显提高；同时由于是矢量地图，因此图像的放大缩小都不会出现失真现象，并且由于SVG提供超链接功能，还定义了丰富的事件，提高了与用户的动态和交互性能。
参考文献：
陈宏飞,裘国永,马耀峰.基于SVG与Ajax 技术的WebGIS研究与设计.陕西师范大学学报(自然科学版) 第37 卷 第6 期 2009 年11 月:98-101
