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

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

1  引言
　　SVG(Scalable Vector Graphics) 是W 3C 组织为适应InternetWeb 应用的飞速发展需要而制定的一套基于XML 语言的二维可缩放矢量图形语言描述规范。传统的HTML 静态页面描述语言的采用的标记固定、有限且无内涵、不支持矢量图形等缺点日益暴露出来，已经越来越满足不了WebGIS 发展要求。目前网络上浒的MacroMiedia 公司提出的SWF 文件格式以其图像矢量化，文件较小及具有交互性而倍受青睐，但它相比于SVG ，还是有一些不足之处。XML 作为公认的世界未来统一格式标准已经为越来越多的领域所应用。SVG 作为XML 的一个描述矢量图形的子集的出现，为解决WebGIS 面临的静态性，数据格式多样性，平台相关的Web 内容表现和缺乏交互性，网络传输慢等问题提供了一个全新的解决方法。
　　1.1 SVG 与HTML 的比较
　　SVG 与HTML 相比，具有如下优点：
　　(1) 突破了HTML 固定标记集合的约束，使文件的内容更丰富、更复杂、更容易组成一个完整的信息体系；
　　(2)SVG 是矢量图像格式，非常适合在网络中传输和应用。一般而言，SVG 图像要比其他网络图像格式( 如GIF ，JPEG) 更小，下载速度更快；
　　(3) 由文本构成矢量图像。其文本性使得SVG 文件有良好的跨平台性和可以通过DOM(Document Object Model) 方便的对其进行编辑，修改。另外一个很突出的优点就是SVG 文件中的文字也可以被网络搜索引擎作为关键词搜索到。
　　(4) 具有动态交互性。SVG 图像能对用户动作做出不同响应，例如高亮、声效、特效、动画等。另外，由于Microsoft 的IE6.0 中已经集成了浏览SVG 文件的插件，这使得SVG 的浏览更加方便，容易。
　　1.2 SVG 与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 实现的实例。

2 SVG 格式简介及绘制WebGIS 地图
　　SVG 作为XML 的一个子集，完全遵从XML 的语法规范和标准，但也有它自己特定的某些标签元素。下面通过一个SVG 文件(map.svg) 的例子来加以说明，详细的语法规范见W3C 标准组织的官方网站公布的SVG 格式规范(v1.2) 。( 语句前的数字和冒号为标记符号，以便说明。)
1: <?xml version="1.0" encoding="iso-8859-1"?>
2: <svg width="500" height="500">
3: <path context="Zijin" d="M159.211 126.316 L203.947 286.842 L351.316 350"
 style="fill:none;stroke:rgb(255,128,0);stroke-width:12"/>
4: <path conetxt="River" d="M57.4257 43.595 C96.3735 90.8887 130.567 57.8567 168.317 86.1693 
 C218.321 123.672 196.135 218.938 244.554 267.357" style="fill:none;stroke:rgb(0,255,0);stroke-width:8"/>
5: <path context="Xuezi" d="M209.211 42.1053 L440.789 89.4737 L388.158 213.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 点.
<circle r="6" style="fill:rgb(255,0,0)">
  <animateMotion dur="3s" repeatCount="1" path=MO O" rotate="auto"/>
</circle>
　　将如上代码放到SVG 文件的<svg> 和</svg> 标签之间并保存重新map.svg 文件，这样，就在WebGIS 地图上生成了一个小圆，这个小圆将在后面作为“ 导航标志圆” 来表现WebGIS 地图的搜索结果。

3 DOM 及使用DOM 在WebGIS 地图中实现路径搜索
　　3.1 DOM 概要
　　DOM 的全称是Document Object Model ，也即文档对象模型。作为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 中可以使用如下方法：
　　Set objSVG = 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 文件
 Set objPathInit = objSVG.selectSingleNode("/svg/circle/animateMotion/@path")
 ObjAniPathInit.value  = "MO O"
 objXML.save(Server.MapPath("map.svg"))
 ' 得到SVG 文件的根节点
 Set objRoot = objSVG.documentElement
 'For 循环开始遍历根节点下面的所有子节点
 For i=0 to objRoot.childNodes.length-1
  ' 得到第i 个子节点的节点名
  strPath = objRoot.childNodes.item(i).nodeName
  ' 如果该子节点名为path( 即SVG 文件中的path 节点) ，则进行如下处理
  if strPath="path" then
   ' 得到path 元素的context 属性值，其为路径名称
   strPathName=objRoot.childNodes.item(i).getAttribute("context")
   ' 得到path 元素的d 属性值，其为路径延伸方向
   strPathD = objRoot.childNodes.item(i).GetAttribute("d")
    if strPathName=strSearchPath then
     'strSearchPath 为要搜索的路径名
     Set objAniPath = objSVG.selectSingleNode("/svg/circle/animateMotion/@path")
     ' 将“ 显示标志圆” 的path 属性值设定为被搜索路径的d 属性值
     objAniPath.value  = strPathD
     ' 将修改结果保存到原SVG 文件中
     objSVG.save(Server.mapPath("map.svg"))
    End if
  ENd if
 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 服务领域中得到越来越广泛的应用。