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

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

引言
  SVG(Scalable Vector Graphics)W3C组织为适应InternetWeb应用的飞速发展需要而 制定的一套基于XML语言的二维可缩放矢量图形语言描述规范。传统的HTML静态页面描述语言的采用的标记固定、有限且无内涵、不支持矢量图形等缺点日益 暴露出来,已经越来越满足不了WebGIS发展要求。目前网络上浒的MacroMiedia公司提出的SWF文件格式以其图像矢量化,文件较小及具有交互 性而倍受青睐,但它相比于SVG,还是有一些不足之处。XML作为公认的世界未来统一格式标准已经为越来越多的领域所应用。SVG作为XML的一个描述矢 量图形的子集的出现,为解决WebGIS面临的静态性,数据格式多样性,平台相关的Web内容表现和缺乏交互性,网络传输慢等问题提供了一个全新的解决方 法。
  1.1 SVGHTML的比较
  SVGHTML相比,具有如下优点:
  (1)突破了HTML固定标记集合的约束,使文件的内容更丰富、更复杂、更容易组成一个完整的信息体系;
  (2)SVG是矢量图像格式,非常适合在网络中传输和应用。一般而言,SVG图像要比其他网络图像格式(GIFJPEG)更小,下载速度更快;
  (3)由文本构成矢量图像。其文本性使得SVG文件有良好的跨平台性和可以通过DOM(Document Object Model)方便的对其进行编辑,修改。另外一个很突出的优点就是SVG文件中的文字也可以被网络搜索引擎作为关键词搜索到。
  (4)具有动态交互性。SVG图像能对用户动作做出不同响应,例如高亮、声效、特效、动画等。另外,由于MicrosoftIE6.0中已经集成了浏览SVG文件的插件,这使得SVG的浏览更加方便,容易。
  1.2 SVGSWF的比较
  SWFSVG相比,其不足体现为:
  (1)SWF标准的非开放性。SWF是一个相对封闭的技术,与其他的开放标准之间没有一个完全融合的方案。随着XML及其他开放标准的发展,SWF的不协调性将日益突出。
  (2)SWF较差的可编辑性。SWFFlash的输出文件格式,作为最终的动画生成格式,其创作过程封闭在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的头信息,encodingiso-8859-1,utf-8,utf-16,gb2312等编码方式,但遗憾的是, SVG目前对中文的支持还不够,但由于XML已经提供了对中文的良好支持,所以SVG对中文的支持在将来应该不会是什么问题。
  2:svg标签为SVG文件的标志标签,其widthheight属性指定SVG图像的Canvas大小。
   3~5path标签在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属 性所指定的路径运动,运动的速度和次数可以通过设定animateMotiondurrepeatCount属性来指定。其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及使用DOMWebGIS地图中实现路径搜索
  3.1 DOM概要
  DOM的全称是 Document Object Model,也即文档对象模型。作为W3C的接口标准,DOM实际上就是XMLHTML文档的一个与语言和平台无关的 应用程序接口(API)。它定义了XMLHTML文档的逻辑结构,给出了一种访问和处理XMLHTML文档的方法。在应用程序中,基于DOMXML 分析器将一个XML文档转换成了一个对象模型的集合(这个集合中被称为DOM),开发人员通过对该对象模型的操作,来实现动态的创建XML文档,遍历文 档结构,添加、修改、删除文档内容,改变文档的显示方式等。
  3.2 DOMASP中实现对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)程序运行效果图
  当搜索的路径分别为RiverXueZi时,导航标志圆在相应的path上运动时的情形如下图所示:


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

阅读更多
个人分类: GIS
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭