基于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服务领域中得到越来越广泛的应用。