基于SVG的WebGIS地图搜索研究与实现

摘　要：本文介绍了基于XML的SVG图像标准及其特点，并将它与现行的WebGIS常用表示标准即HTML和SWF进行了详细比较，得出 SVG在WebGIS应用领域优于传统表示方式的结论。随后介绍了WebGIS地图的绘制方法和工具，并重点介绍了XMLDOM技术，就SVG在二维 WebGIS地图搜索的应用做了一些有益的研究和探索。并给出了一个结合ASP和DOM技术的WebGIS地图搜索功能的简单实现。
关键词：SVGDOMWebGIS地图搜索

1引言
　　SVG(ScalableVectorGraphics)是W3C组织为适应InternetWeb应用的飞速发展需要而 制定的一套基于XML语言的二维可缩放矢量图形语言描述规范。传统的HTML静态页面描述语言的采用的标记固定、有限且无内涵、不支持矢量图形等缺点日益 暴露出来，已经越来越满足不了WebGIS发展要求。目前网络上浒的MacroMiedia公司提出的SWF文件格式以其图像矢量化，文件较小及具有交互 性而倍受青睐，但它相比于SVG，还是有一些不足之处。XML作为公认的世界未来统一格式标准已经为越来越多的领域所应用。SVG作为XML的一个描述矢 量图形的子集的出现，为解决WebGIS面临的静态性，数据格式多样性，平台相关的Web内容表现和缺乏交互性，网络传输慢等问题提供了一个全新的解决方 法。
　　1.1SVG与HTML的比较
　　SVG与HTML相比，具有如下优点：
　　(1)突破了HTML固定标记集合的约束，使文件的内容更丰富、更复杂、更容易组成一个完整的信息体系；
　　(2)SVG是矢量图像格式，非常适合在网络中传输和应用。一般而言，SVG图像要比其他网络图像格式(如GIF，JPEG)更小，下载速度更快；
　　(3)由文本构成矢量图像。其文本性使得SVG文件有良好的跨平台性和可以通过DOM(DocumentObjectModel)方便的对其进行编辑，修改。另外一个很突出的优点就是SVG文件中的文字也可以被网络搜索引擎作为关键词搜索到。
　　(4)具有动态交互性。SVG图像能对用户动作做出不同响应，例如高亮、声效、特效、动画等。另外，由于Microsoft的IE6.0中已经集成了浏览SVG文件的插件，这使得SVG的浏览更加方便，容易。
　　1.2SVG与SWF的比较
　　SWF与SVG相比，其不足体现为：
　　(1)SWF标准的非开放性。SWF是一个相对封闭的技术，与其他的开放标准之间没有一个完全融合的方案。随着XML及其他开放标准的发展，SWF的不协调性将日益突出。
　　(2)SWF较差的可编辑性。SWF是Flash的输出文件格式，作为最终的动画生成格式，其创作过程封闭在SWF文件中，无法再进行二次编辑。对于SVG来说，因为它是一种文本格式，用普通的编辑工具就可以打开并进行编辑。
　　(3)SWF无法进行图像搜索。由于SWF为非文本格式，文本不能独立于图像而存在，因此无法建立类似于SVG的图像搜索功能。
　 　鉴于SVG的以上特性和优点，在WebGIS应用领域，如果将地理空间数据用SVG格式来存储、传输和显示，那么对于获得WebGIS服务的非专业的大 众用户群，一方面可以通过各种SVG工具来组织，发布自己的地理空间数据，从而使地理信息资源和网上其他资源一样可以被整修Internet共享；另一方 面，由于SVG的交互性，他们也将得到更具表现力和吸引力的WebGIS服务。
　　SVG作为文本以下部分将就SVG的格式和DOM技术作一些介绍，重点介绍对SVG生成的WebGIS地图的搜索原理和方法，并在最后给出一个在WebGIS地图中搜索路径的ASP实现的实例。

2SVG格式简介及绘制WebGIS地图
　　SVG作为XML的一个子集，完全遵从XML的语法规范和标准，但也有它自己特定的某些标签 元素。下面通过一个SVG文件(map.svg)的例子来加以说明，详细的语法规范见W3C标准组织的官方网站公布的SVG格式规范(v1.2)。(语句 前的数字和冒号为标记符号，以便说明。)
1:<?xmlversion="1.0"encoding="iso-8859-1"?>
2:<svgwidth="500"height="500">
3:<pathcontext="Zijin"d="M159.211126.316L203.947286.842L351.316350"
style="fill:none;stroke:rgb(255,128,0);stroke-width:12"/>
4:<pathconetxt="River"d="M57.425743.595C96.373590.8887130.56757.8567168.31786.1693
C218.321123.672196.135218.938244.554267.357"style="fill:none;stroke:rgb(0,255,0);stroke-width:8"/>
5:<pathcontext="Xuezi"d="M209.21142.1053L440.78989.4737L388.158213.158"
style="fill:none;stroke:rgb(0,0,255);stroke-width:12"/>
6:</svg>
　 　1:SVG文件的有关XML的头信息，encoding有iso-8859-1,utf-8,utf-16,gb2312等编码方式，但遗憾的是， SVG目前对中文的支持还不够，但由于XML已经提供了对中文的良好支持，所以SVG对中文的支持在将来应该不会是什么问题。
　　2:svg标签为SVG文件的标志标签，其width和height属性指定SVG图像的Canvas大小。
　 　3~5：path标签在SVG定义的Canvas上画路径，context属性是我们人为为path加的代表某条path的名称，以供后面的搜索用。 style属性表示其颜色及宽度等属性。d属性使用的命令M表示移动，L表示画直线，还有其他一些命令如H表示画水平线；V表示画垂直线；C表示画曲线 等。
　　除path外，SVG还有一些预定义的基本形状可供我们直接使用，这些基本形状称为元素，就象HTML文档中的table等元素一样，在SVG标准里预先定义好的基本形状元素有：
矩形圆形椭圆直线折线多边形描绘路径
<rect><circle><ellipse><line><polyline><polygon><path>
　　6:svg文件的结束标签。
　 　用WebDraw工具可以很方便的绘制出这样简单的平面WebGIS地图，读者可以用此工具容易的在由以上代码生成的SVG地图的path旁边加注文字 标识说明或画其他形状的图形。但如果要制作出复杂的如交互性、动画等特效则必须手工写代码来完成。现在来添加一个动画效果：一个红色的小圆沿着path属 性所指定的路径运动，运动的速度和次数可以通过设定animateMotion的dur和repeatCount属性来指定。其path属性的初始值置为 0点.
<circler="6"style="fill:rgb(255,0,0)">
<animateMotiondur="3s"repeatCount="1"path=MOO"rotate="auto"/>
</circle>
　　将如上代码放到SVG文件的<svg>和</svg>标签之间并保存重新map.svg文件，这样，就在WebGIS地图上生成了一个小圆，这个小圆将在后面作为“导航标志圆”来表现WebGIS地图的搜索结果。

3DOM及使用DOM在WebGIS地图中实现路径搜索
　　3.1DOM概要
　　DOM的全称是 DocumentObjectModel，也即文档对象模型。作为W3C的接口标准，DOM实际上就是XML和HTML文档的一个与语言和平台无关的 应用程序接口(API)。它定义了XML和HTML文档的逻辑结构，给出了一种访问和处理XML和HTML文档的方法。在应用程序中，基于DOM的XML 分析器将一个XML文档转换成了一个对象模型的集合(这个集合中被称为DOM树)，开发人员通过对该对象模型的操作，来实现动态的创建XML文档，遍历文 档结构，添加、修改、删除文档内容，改变文档的显示方式等。
　　3.2用DOM在ASP中实现对WebGIS地图的路径搜索
　　(1)创建DOM实例
　 　使用DOM之前，需要创建一个XML解析器的实例。微软公司在Msxml.dll中创建了一系列标准的COM接口来使创建实例变得可能。 Msxml.dll中包含了类型库和可应用的代码，我们可以用它来处理XML文件，当然也可以处理SVG文件。在ASP中可以使用如下方法：
　　SetobjSVG=server.CreateObject("Microsoft.XMLDOM")
　　来创建一个XML解析器的实例。
　　(2)载入一个SVG文档
　　以下代码将载入map.svg文档：
objSVG.async=false'同步加载并骓一个svg文件
objSVG.Load(Server.MapPath("map.svg"))'加载map.svg文件
　　(3)遍历SVG文档，搜索指定路径
　　载入map.svg文档后，可以对其进行相应处理了。
'初始化map.svg文档，将“导航标志圆”初始定位到0点，并保存SVG文件
SetobjPathInit=objSVG.selectSingleNode("/svg/circle/animateMotion/@path")
ObjAniPathInit.value="MOO"
objXML.save(Server.MapPath("map.svg"))
'得到SVG文件的根节点
SetobjRoot=objSVG.documentElement
'For循环开始遍历根节点下面的所有子节点
Fori=0toobjRoot.childNodes.length-1
'得到第i个子节点的节点名
strPath=objRoot.childNodes.item(i).nodeName
'如果该子节点名为path(即SVG文件中的path节点)，则进行如下处理
ifstrPath="path"then
'得到path元素的context属性值，其为路径名称
strPathName=objRoot.childNodes.item(i).getAttribute("context")
'得到path元素的d属性值，其为路径延伸方向
strPathD=objRoot.childNodes.item(i).GetAttribute("d")
ifstrPathName=strSearchPaththen
'strSearchPath为要搜索的路径名
SetobjAniPath=objSVG.selectSingleNode("/svg/circle/animateMotion/@path")
'将“显示标志圆”的path属性值设定为被搜索路径的d属性值
objAniPath.value=strPathD
'将修改结果保存到原SVG文件中
objSVG.save(Server.mapPath("map.svg"))
Endif
ENdif
Next
　　此时，map.svg文件就保存了被搜索路径的d属性值到“导航标志圆”的path属性值，一个红色的小圆将在被搜索路径上运动以标识此被搜索路径。如果将实例中的path替换为其他的SVG元素对象，同样可以很容易的实现对path之外元素的搜索。
　　(4)程序运行效果图
　　当搜索的路径分别为River和XueZi时，“导航标志圆”在相应的path上运动时的情形如下图所示：

4结束语
　　本文通过对基于XML的SVG图像标准与HMTL，SWF的对比和SVG特性的研究，利用DOM提供的对SVG文档 方便的访问和操作接口方法，对其应用于实现WebGIS的地图搜索功能方面做了有益的探索和尝试。由于SVG是一种二维矢量图像标准，所以由其生成的 WebGIS地图的信息量还比较有限，但由于其具有开放性，文本性，可嵌入性多媒体信息及可加入交互，动画等特效，文件较小，传输速度较快，对客户端的软 件和硬件基本上没有什么特别的要求等突出优点，这就具备了提供更高质量WebGIS服务和更大范围普及WebGIS服务的条件。可以相信，在不久的将来， SVG将在WebGIS服务领域中得到越来越广泛的应用。