SVG——新一代Web设计及互动媒体的革新

基于SVG的多比例尺空间数据表达技术

来源:SVG中国(ChinaSVG.COM) | 武汉土木建筑学会

前言

  在WebGIS应用中,为了解决空间数据之间共享与互操作问题,OGC(开放式地理信息系统联盟)建立开放式地理数据互操作规范,推出了一个基于 Open GIS的数据模型和XML (可扩展标记语言)的空间数据交换格式GML(地理标记语言)。GML是用于地理信息和地理参考信息的传输、存储的一种XML编码语言,这些信息包括地理要素覆盖区的空间和非空间属性信息。但是当前的浏览器还不能以图形形式显示GML文件中描述的空间数据。W3C(World Wide Web Consortium)推出的用于矢量图形的显示与传输的标准SVG(可升级矢量图形),正是为适应Internet应用飞速发展的需要而制定的一套基于 XML语言的可升级矢量图形语言描述规范。它提供了三种类型的图形对象:矢量图形、图像和文本。SVG格式的图形具有许多其它格式图形所无法比拟的优点 [1] 。SVG的这些优点正好可以很好的满足GIS对于空间数据图形显示的要求,可以向用户提供多样化的、直观易懂的、动态的图形用户界面,从而使它成为空间数据可视化的有效格式。

1 SVG应用于WebGIS空间数据表达的可能性

  W3C对SVG的解释是:SVG是一种使用XML来描述二维图形的语言。它允许三种形式的图形对象存在,各种图形对象能够组合、变换,并且修改其样式,也能够定义成预处理对象。虽然SVG不是为了面向地理空间数据发布而制定的标准,但它的许多特性都能被广泛地应用在Web GIS中,主要表现在以下几点:
  (1) 首先SVG提供了丰富的图形对象,可以有效的表现空间信息。
  SVG提供了一下基本图形元素:直线(<line>)、路径(<path>)、圆(<circle>)、图标 (<symbol>)、文字(<text>)、图像(<image>)等,另外,路径元素<path> 与这些元素所描述的形状在本质上是一样的,只是这些基本形状是路径的特例。所有GIS定义的简单几何体都可以通过这些基本形状与路径得以显示表现。
  (2) 其次,SVG提供了丰富的消息触发及事件响应函数以获取用户消息,可以表达WebGIS的交互性。
  SVG具有设计完美的DOM接口,支持脚本与交互。SVG对脚本语言的支持,使得高级用户仅仅进行简单的Script编程就可以实现很多交互工作。这些功能对表达GIS的交互性很有帮助,如在地图上移动、点击鼠标等。通过SVG提供的消息触发及事件相应函数,能够很容易地实现与地图的交互及控制,如地图的放大、缩小、漫游、查询、图层控制等操作。
  (3) 再次,由于SVG是基于XML格式的,因此除了内置的属性外,可以对其属性进行任意扩充,以实现自定义的功能。
  (4)支持图形超链接功能
  SVG支持图形链接的功能对于GIS的Web应用极为有用。例如,通过鼠标移动事件可以使一条线、多边形或者一个符号加亮显示,并且通过Web链接打开一个新的窗口显示更详细的信息。

2 基于SVG的WebGIS的体系结构

  基于SVG的WebGIS系统采用多层的体系结构。多层的WebGIS系统通常由客户端浏览器、Web服务器、应用服务器和数据库服务器组成。客户端向 Web服务器发出服务请求。Web服务器接到请求后,把GIS功能请求分发给应用服务器,应用服务器分析了请求,与数据库建立连接并发出请求,数据库在处理请求后(包括数据的抽取、转换等操作),将数据直接返回给应用服务器,进行分析处理,并生成SVG文档返回给客户端,在客户端用SVG插件完成对矢量数据的简单分析处理、可视化工作。体系框架如图1所示:

图1 基于SVG的WebGIS系统框架

3 基于SVG的多比例尺空间数据表达实现

  多比例尺是指一个GIS系统中同时存在几种比例尺的空间数据。当系统中包含几种比例尺数据时,GIS便可以提供不同尺度、不同层次上的空间信息服务。如从小比例尺到大比例尺的图形浏览,是一个从区域到对象的空间放大过程。从大比例尺到小比例尺是空间数据综合的过程。空间数据图形的浏览虽也遵循一般图形的缩放规则,但当比例尺达到一定程度时,GIS可以采用数据综合或更换比例尺数据的办法来保证屏幕空间数据的视觉效果。
  在SVG中,多比例尺空间数据存储有以下几种情况,一是所有的数据保存在一个SVG文件中,通过设置自定义level属性来标定数据显示的级别;二是不同比例尺的空间数据分别存成SVG文件,一个比例尺数据对应一个文件;三是所有的空间数据都保存在空间数据库中,根据用户的请求动态下载数据保存成SVG文档传给客户端。

3.1 数据保存在一个SVG文件时的实现

  当所有的数据保存在一个SVG文档中时,客户端在进行第一次调用时就下载这个文件。SVG数据按逻辑结构在内存中组织成树型结构,在用户进行放大缩小或漫游操作时,获取当前窗口的范围,根据范围推算出此时的地图比例尺,根据SVG文档中地图对象的显示级别(level属性),判定此对象显示或隐藏。
  不管是显示级别的判断还是设置地图对象的显示与否,都是在客户端完成的,也就是说,在数据一次性下载到客户端后,就不再与服务器打交道了。对于数据量小的SVG文档可以这么做,但对于数据量很大的SVG文档下载的速度很慢,解析时要对每个对象进行判断,效率很低。

3.2 数据保存在多个SVG文件时的实现

  这种情况下,服务器端一个SVG文档保存一个比例尺的数据,同样通过用户选取的视区范围判断当前地图显示的级别,再载入对应级别的SVG文档,显示在客户端。
  这种方式的实现效率也很低,因为在放大缩小操作时要时常从服务器端下载文件,尤其是大数据量数据时,传输效率低而影响客户端的显示效果。

3.3 数据保存在数据库时的实现

  在数据保存在服务端数据库中时,在用户进行放大、缩小、漫游操作时,实时地从数据库中调取相应范围的数据生成SVG文档显示在客户端。这种数据保存方法不仅安全可靠也具有比前两种方法更高的效率。

  3.3.1客户端的实现

  在客户端实现用户与地图的交互。在用户进行放缩或者漫游操作时,向服务器端传递一个URL,该URL的参数如下:x最小坐标、y最小坐标、x最大坐标、 y最大坐标。把这些参数发送到服务器,进行处理,新的图幅范围下的矢量数据转成的SVG文件传到客户端,在处理时先将SVG数据按逻辑结构在内存中组织成树型结构,再对内存中的结点树进行各种操作,数据一层层的下载并显示出来。

  3.3.2服务端的实现

  在服务器端,接受请求的Servlet读取客户端传来的URL参数并解析,经过计算处理获得包含请求范围和相应图层的SVG文档数据,并传给客户端。
  (1) 数据抽取:每次执行放大、缩小和平移操作后都将刷新地图,系统都重新装载数据。对于每一次刷新,记录当前显示区域即展示在屏幕上的矩形区域和当前地图比例尺。设地图数据集内的要素(即空间对象)一共分n个等级,在执行放大、缩小和平移操作后,根据当前屏幕矩形范围的宽度,判断要显示地图的比例尺,决定从数据库取那个等级的数据,同时设定线宽的值。
  在数据抽取过程中,我们尽量用相对坐标,这样画的速度比用绝对坐标快。尽量少用< Path>元素,<Path>元素在DOM解析的时候会比解析<line>、<polygon>、< polyline>更费时。另外,如果元素有共同的属性时,可以合并成一个元素。
  (2) 数据压缩
  数据压缩是为了提高数据传输的速度,加快用户浏览速度。因为SVG文档是采用文本格式的,具有很高的压缩率。SVG支持gzip数据压缩标准,图形由于包含的信息量较大,文件尺寸通常较大,而SVG采用文本格式,可以有较大的压缩比率,而且压缩后的图形可直接在Web上显示。
  解压是在客户端进行,效果和用户的浏览器有一定的关系,经过测试,在IE5,6和netscape4.5,6都运行的很好。

 

4 系统实例

  系统主要实现以下几方面的功能,图形基本操作包括放缩漫游、图层控制、全图显示、鹰眼操作和点查询等。系统效果图如图2所示:

图2 系统运行界面

  系统还实现了基于SVG的Web环境下多比例尺数据动态下载的功能。服务器端根据客户端用户的请求范围,按照本文中描述的映射规则,通过对数据的抽取、过滤生成SVG文档,并经过压缩传给客户端显示。
  地图显示的详细程度由用户请求的范围确定,在用户进行放大、缩小、漫游的过程中,根据操作后的可视窗口调取相应数据。整个过程不仅保证了图形有很好的可视效果,系统也有着比SVG文件保存数据方式更高的响应速度。
  在该实例系统中,道路层是多级比例尺存储的。在进行放大操作时,图3和图4是放大前后的表现效果。可以看到后者比前者有更详细的道路信息。

图3 放大前效果图4 放大后效果

结论

  SVG不仅应用于空间数据的可视化表现和多比例尺空间数据表现等方面,SVG在GPS导航、在线数据编辑等方面也有很光明的前景。
  总之,SVG应用于WebGIS是WebGIS发展的又一次机遇。可以相信,随着研究的进一步深入,SVG将得到主流浏览器的支持,地理信息资源也会象其它网上资源一样,为更多的用户所使用,从而为社会创造更多的价值。

参考资料

  [1] Tim Bray,Jean Paoli,C.M.Sperberg-McQueen,Eve Maier. Extensible Markup language (XML)1.0(SecondEdition)[s],W3CRecommendation,2000,6,11.
  [2] 邓凯.基于XML的实时Web GIS优化模型的研究与应用:[学位论文].中国科学院遥感应用研究所,2002
  [3] 周强中等.SVG在WebGIS中的应用.计算机应用研究,2003:108~121
  浅谈svg在webgis中的应用《GIS开发者》http://www.gisforum.net/magazine/main/RDJS/index2.htm
  [4] 王宗思等.SVG技术在动画制作中的应用研究.计算机时代.2005(1):21~23
  [5]周文生.基于 SVG 的 Web GIS 研究.中国图像图形学报,2002,7(7):693~698
  [6] 张旭. 基于SVG的空间数据组织及Web表现的研究.计算机应用研究.2003[6]130~134
  [7]阮志敏.基于Oracle Spatial和SVG的空间信息发布研究.武汉大学学报-信息科学版.第29卷第2期:161~164

关于作者

  冯艳杰,武汉市勘测设计研究院

(THE END)

 

将要更新