Web环境下SVG地图浏览器的设计与实现

本文先分析Web环境下矢量地图发布存在的问题，再介绍SVG技术及Adobe SVG Viewer设计并实现SVG地图浏览器,着重研究三个问题,即矢量地图数据在SVG文档中的组织与编码,地图浏览器界面的设计及若干地图操作功能的实现。

　　地图作为国民经济和国防建设中必不可少的资料,一直受到人们的广泛关注。在Web环境下地图通常可用两种形式表示:一种是栅格形式;另一种是矢 量形式。作为栅格形式的地图(有时称为"哑"地图),由于其固有的局限性(如缩放变形)和所包含的信息量有限等特性不能对单个地物进行操作,使其对地图的 表现能力十分有限。而矢量形式的地图(有时称为"智能"地图),则由于其数据量少、缩放不变形、可挂接多种信息等特性使其成为地图表现的较好选择。然而目 前的浏览器通常只直接支持栅格图像(如GIF和JPEG),而不支持矢量图形,这就使矢量形式的地图在网上的共享遇到了问题。目前有两种解决方案:一是在 服务器端通过地图服务器将矢量形式的地图转化为栅格形式的地图;二是借助插件技术,如ActiveX,Plug in等,对浏览器的功能进行扩充,使其增加对矢量地图的支持。对于第1种方案,由于展示在客户端的地图是栅格地图,因此它对地图的表现能力很有限,且在用 户对地图的操作中需要频繁地通过网络与服务器进行操作指令和处理结果的传输,加重了网络和服务器的负担。而对于第2种方案,尽管展示在客户端的是矢量地 图,但由于地图数据的复杂性,使得不同系统产生的矢量地图的数据格式都不相同,这就造成了对于不同格式的地图数据需要开发不同的插件,同时在插件的开发中 还需要考虑插件对不同客户端的适应性,因此给插件的开发带来了不少麻烦。

　　而目前越来越受到人们关注的基于XML技术的通用矢量格式SVG则会彻底改变这种状态,使矢量地图的网络共享变得轻松、简单。文中将对SVG做一简单介绍,并在此基础上设计一个基于Adobe SVG Viewer的地图浏览器,给网络矢量地图的共享提供方便。

1　SVG概述

　 　可伸缩矢量图形格式SVG(Scalable Vector Graphic)是W3C组织为适应Internet Web应用飞速发展的需要而制定的一套基于XML语言的用于描述矢量图形、图像的标准规范(该标准于2000年8月2日正式公布)(注释1,2)。在 SVG规范中定义了SVG的特征和语法,其中包括模块化的XML命名空间(namespace)和SVG文档对象模型(DOM)。具体来说在SVG中规定 了4种类型的图形对象,即矢量图形(如圆circle,矩形rect,路径path等)、图像(image)、渐变填充(gradient filling)、文本(text)。图形对象可进行分组、添加样式、变换、组合等操作,特征集则包括嵌套变换(nested transformations)、剪切路径(clipping paths)、alpha蒙板(alpha masks),过滤器效果(fil)、模板对象(template objects)和其他扩tereffects展(extensibility)。除此之外,在SVG规范中还允许绘图通过动态和交互式方式来进行,在实 际操作中,则是以嵌入方式或脚本方式来实现的。正是由于SVG对脚本语言的支持,使得用户可以仅仅通过简单的Scripts编程,即可访问SVGDOM的 元素和属性,响应特定的事件,从而大大提高了SVG的动态和交互性能。下面就是一个符合SVG规范的图形文档。

　　　　　<?xml version="1.0" encoding="is0-8859-1"?>

　　　　　<svg width="1.5in" height="1.0in">

　　　　　　<title>Sample SVG graphic</title>

　　　　　　<desc> A single rectangle</desc>

　　　　　　<g onclick="clickme(evt)">

　　　　　　<rect x ="2" y="2" height="20" width="33" style="fill:#FE0000; stroke:#FEFEFE;"/>

　　　　　</g>

　　　　</svg>

　 　由于SVG在开放性、交互性、中立性、易读、易生成性等方面较现有的图形格式有其明显的优势,同时由于W3C的特殊身份,使其一问世便在业界引起了强烈 的反响,众多知名厂商纷纷宣布了对SVG的支持,其中包括Microsoft、Netscape、Apple、Adobe、Autodesk以及 Corel等,更引人注目的是目前的主流浏览器,如IE和NC也将内置对SVG支持。有理由相信,在不久的将来SVG必将会成为万维网上的图形标准。

2　基于SVG的地图浏览器的设计与实现

　 　通过上述分析可以看到,基于SVG的矢量地图将是未来互联网上矢量地图的发展方向,目前虽然主流浏览器IE和NC并不直接支持SVG,但有许多公司都推 出了SVG插件,其中尤以Adobe公司的免费SVG Viewer应用最广。在该SVG浏览器中提供了诸如图形缩放、图形漫游的功能(通过单击右键弹出操作菜单),这种图形操作方式对一般图形的浏览来说是可 以接受的,但对于矢量地图的操作来说则显得很不方便,也不直观。此外该浏览器也没有提供地图操作中常用的图层开关、属性数据的查询等一系列地图浏览所必需 的工具。幸运的是该SVG浏览器提供了DOM接口,用户可以通过脚本语言对该SVG浏览器的功能进行扩充,从而满足对地图操作的需要。为此文中基于该 SVG浏览器设计了一个地图浏览器,该地图浏览器的设计包含3方面的内容:一是矢量地图数据的组织;二是地图浏览器界面的设计;三是地图操作功能的实现。

2.1　矢量地图数据的组织与编码

　 　由于W3C组织制定SVG规范的目的是为了一般图形、图像的网上发布,而地图数据则具有复杂的数据结构,因此在进行地图浏览器设计时首先需要解决的问题 是矢量地图数据如何在SVG文档中进行组织。这包含两方面的内容:一是地图中所表示的地物如何进行分类;二是表示各种地物的数据如何进行组织。
　　对于地物的分类,在GIS界研究的比较多(注3,4)。考虑到SVG的特点以及对矢量地图表示的全面性的需要,在这里将地物按其几何形态分为5类,即点状实体、线状实体、面状实体、注记体以及栅格体。

　　点状实体(Point):指具有特定的位置、而没有长度的实体,如水准点、公路界碑等。
　　线状实体(Line):指有长度的实体,如道路、管线等。
　　面状实体(Polygon):指占有一定范围面积的实体,如湖泊、行政区域、地块等。
　　注记体(Annotation):是一种虚拟的实体,其作用主要是通过文字信息更好地描述和说明上述3类实体。
　　栅格体(Raster):指通过栅格图像表达一个区域的地理现象。

　 　在SVG中,对于地物的表示可通过SVG中规定的一些基本图形、图像元素来实现,具体来说点状实体通过use元素对点状符号(通过Symbol定义)的 引用表示,线状实体和面状实体通过path元素表示,注记体通过text元素表示,而栅格体则通过image元素表示。
　　对于地图数据的组织, 目前有分层组织法和分要素组织法两种方法。其中分层组织法来源于制图中的专题分层和CAD的实体分层。其基本思想是将地理空间数据按不同的类型划分成若干 图层,如道路层、建筑物层等,这时层与层之间相互独立,需要时可以将几个层叠加起来进行操作。它的优点是数据结构简单,缺点是不能表达不同层间对象之间的 关系。分要素组织法的基本思想是将要素作为地理现象的基本表示单元,多个同类要素可构成一个要素类,多个不同类要素可构成一个复杂要素,要素与要素之间相 互关联。与分层组织法相比,它的优点是能够广泛地表达要素之间的关系,但其数据结构复杂,同时需要面向对象数据库的支持,目前面向对象数据库还没有达到实 用的程度。因此,目前大多数GIS系统采用分层组织法进行空间数据的管理。
　　考虑到SVG的特点,地图数据的组织应采用简单的分层组织模式,此外,考虑到数据管理的简单、方便性,在这里规定一个图层只能包含一类地物,这样整个图层按地物的类型划分为5类,即点图层、线图层、面图层、注记层和栅格层。
　　在SVG文档中,图层通过一分组元素g来表示,该元素的id属性表示图层的标识符,对于图层的显示样式,不同类型的图层有不同的规定。

　　2.1.1 点图层

　　对于点图层,由于点状地物是通过点状符号类进行表达的,因此,点图层除了需要定义点状符号的颜色外,还要对点状符号本身进行定义。下面就是点图层(路灯符号)的例子。

　　　　<g id="Layer Pole(0)" style="fill:red;stroke:red">

　　　　　<Symbol>

　　　　　　<g id="Symbol 0002" transform="matrix(4 0 0 4 0 0)">

　　　　　　<circle style="fill:none;stroke width:0.1;"cx="0" cy= "0" r= ".5"/>

　　　　　　......

　　　　　　<circle style="fill:none;stroke width:0.1;"cx="1" cy="2.5" r=". 5"/>

　　　　　</g>

　　　　　</Symbol>

　　2.1.2 线图层

　　在SVG中,对于传统的线状符号支持不够,目前只能通过线宽、线型(通过stroke dasharray可任意定义)两个参数进行描述。以下是线图层的例子。

　　<g id="Layer Road(1)" style="fill:none;stroke:red;stroke width=2;stroke dasharray:15 10">

　　注意,若在GMLMap中没有给出图层的Symbol ID属性,则不需要指定Sytle属性中的stroke dasharray项。

　　2.1.3 面图层

　　在SVG中,面状符号可通过Pattern元素来实现,由于面状符号是通过点状符号按一定规律进行排列的,因此,面状符号是在点状符号的基础上进行定义的。以下是一个面图层的例子。

　　　　　<g id="Layer Build(2) " style="stroke width:0.5;stroke:blue;fill:url(#pattern1)">

　　　　　<Symbol>

　　　　<g id="Symbol 0002"transform="matrix(4 0 0 4 0 0)">

　　　　<circle style="fill:none;strokewidth:0.1;"cx="0" cy="0" r=".5"/>

　　　　</g>

　　　　　</Symbol>

　　　　　<defs>

　　　　　<pattern style="fill:blue"id="pattern1"x="0"y="0"width="40"height="40"

　　　　　patternContentUnits="userSpaceOnUse"patternUnits="userSpaceOnUse">

　　　　　　<use xlink:href="#Symbol 0002"x="0"y="0"/>

　　　　　　<use xlink:href="#Symbol 0002"x="40"y="40"/>

　　　　　</pattern>

　　　　　</defs>

注意,若在GMLMap中没有给出图层的Symbol ID属性,则style属性的fill项直接指定为颜色即可。

　　2.1.4 注记层

　　相对来说,注记层的样式要简单得多,只需指定style属性中的stroke即可。

　　2.1.5 栅格层

　　栅格层不需要指定任何显示样式。

2.2　基于SVG的地图浏览器的界面设计

　 　根据人们对地图操作的习惯,整个地图浏览器分为地图显示区、地图操作工具条以及图例板3部分。其中地图显示区用于矢量地图的显示,地图操作工具条提供用 于操作地图的各种工具,如地图的缩、放,上下、左右移动,全图显示,地物定位,坐标显示等,图例板用于控制地图图层开关。需要说明的是上述3部分均是通过 SVG来实现的,其中地图操作工具条SVG文档包含了用于操作地图的各种由avascript实现的应用逻辑;图例板SVG文档则包含了用于地图图层开关 以及地图图层信息自动加载的应用逻辑;地图区SVG文档则包含了地物属性查询、坐标显示等应用逻辑。

2.3　地图操作功能的实现

　　2.3.1 地图的缩放、漫游

　 　地图的缩放、漫游是SVG地图浏览器的重要功能,为了达到通过工具条中的按钮来控制地图缩放、漫游的目的,可将所有的地图数据组织在一个地图分组元素下 (该元素的id属性可设为Map),即将整个地图作为一个复合图形组来看待。在这种情况下,就可通过设置该分组元素的transform属性来实现地图的 缩放、漫游。transform属性包含6个参数,分别控制图形的6种变形,即横向缩放、纵向缩放、横向倾斜、纵向倾斜、横向移动和纵向移动。其中对于缩 放、移位参数的设置可分别通过比例Scale(Xscale,Yscale)和移位translate(Xmove,Ymove)实现。在具体实施时,需 注意的是通过比例Scale和移位translate对transform属性的设置效果是一次性的而不是累加的。此外,通过比例Scale所进行的地图 缩放是以地图的左上角为基点实施的。因此,要想实现对地图的缩放、漫游就需要对地图同时进行比例Scale和移位translate操作。

　　2.3.2 属性数据的查询

　 　属性信息的查询是地图浏览器的一项重要功能,要实现这个功能,首先需要了解属性数据是如何在SVG文档中进行组织的。一般来说,属性数据采用两种方法与 图形进行连接,即外联法和内嵌法。外联法是指属性数据与图形数据分开存储,SVG文档中仅包含地物的图形数据,而属性数据存放在服务器端的数据库中,两者 通过地物标识号进行连接。当在客户端进行属性数据查询时,客户端可通过地物标识采用ASP技术在服务器端从数据库中提取相应的数据在客户端进行显示。而内 嵌法则是将属性数据与图形数据包含在同一分组元素中,分组元素中的id属性为地物的标识,属性数据通过一自定义元素GeoAttribute将各属性项包 含在一起,以下就是对一嵌有属性数据的地物描述。

　　　　<g id="FA 01 001"onclick="query('FA 01 001')">

　　　　　<rect x="5"y="5"width="40"height="40"style="fill:red"/>

　　　　　<text x="10"y="20"style="fill:red">A41</text>

　　　　　<Vector Map,SVG,Map Browser GeoAttribute>

　　　　　　<Price>34214</Price>

　　　　　</GeoAttribute>

　　　　</g>

　 　在这里需说明的是尽管SVG规范中并没有包含对属性数据的标记,但我们可以自行根据需要在SVG文档中使用自己的标记,SVG插件在处理含有这些标记的 SVG文档时会忽略这些标记,而我们则可在自己的处理程序中对这些标记中的数据进行相应的处理。按照上述的数据组织形式,在宿主页面中即可设计出相应的程 序代码来实现图形数据到属性数据的查询2。

　　2.3.3 图层的开关

　　由于在SVG地图浏览器中所操作的SVG地图是以分层的方式 进行组织的,在该数据组织模式中,属于一个图层的地理特征数据组织在同一个分组元素下,且该分组元素的ID属性设置为图层的名称,这样对图层的显示控制就 比较容易。首先通过图层名称在SVG DOM树中找到对应的分组元素,然后将该元素的Visibility属性值设置为hidden或visible,即可达到对图层的关闭与显示。

3　结束语

　　SVG是万维网上的一种极具发展潜力的图形、图像格式,文中所介绍的SVG地图浏览器是一种简单、易行的网络环境下的地图浏览工具。该工具对地图数据的网上发布具有十分重要的作用,它使地图数据的网上共享变得十分容易,从而有利于促进地图数据走向大众化的应用行列。

4 参考文献

　　1　刘啸,毕永年.基于XML的SVG应用指南M.北京:北京科海集体公司,2001.
　　2　周文生.基于SVG的WebGIS研究J. 中国图像图形学报,2002,7(7):693 698.
　　3　龚健雅.整体GIS的数据组织与处理方法M. 武汉:武汉测绘科技大学出版社,1993.
　　4　郭仁忠.空间物体分类及空间物体构造J. 武汉测绘科技大学学报,1994,19(1):22 27.
　　5　孙一中.XML理论和应用基础M. 北京:北京邮电大学出版社,2000.

5 作者简介

　　周文生：清华大学建筑学院
　　胡鹏：武汉大学资源与环境科学学院
　　贾永红：武汉大学遥感信息工程学院