`
liuqiang
  • 浏览: 161929 次
  • 性别: Icon_minigender_1
  • 来自: 华东
社区版块
存档分类
最新评论

基于SVG技术进行WebGIS开发浅析

阅读更多

    SVG(Scalable Vector Graphics)W3C组织为适应InternetWeb应用的飞速发展需要而制定的一套基于XML语言的二维可缩放矢量图形语言描述规范。传统的HTML静态页面描述语言的采用的标记固定、有限且无内涵、不支持矢量图形等缺点日益暴露出来,已经越来越满足不了WebGIS发展要求。目前网络上浒的MacroMiedia公司提出的SWF文件格式以其图像矢量化,文件较小及具有交互性而倍受青睐,但它相比于SVG,还是有一些不足之处。XML作为公认的世界未来统一格式标准已经为越来越多的领域所应用。SVG作为XML的一个描述矢量图形的子集的出现,为解决WebGIS面临的静态性,数据格式多样性,平台相关的Web内容表现和缺乏交互性,网络传输慢等问题提供了一个全新的解决方法。

1 SVGHTML的比较
  SVGHTML相比,具有如下优点:
  (1)突破了HTML固定标记集合的约束,使文件的内容更丰富、更复杂、更容易组成一个完整的信息体系;
  (2)SVG是矢量图像格式,非常适合在网络中传输和应用。一般而言,SVG图像要比其他网络图像格式(GIFJPEG)更小,下载速度更快;
  (3)由文本构成矢量图像。其文本性使得SVG文件有良好的跨平台性和可以通过DOM(Document Object Model)方便的对其进行编辑,修改。另外一个很突出的优点就是SVG文件中的文字也可以被网络搜索引擎作为关键词搜索到。
  (4)具有动态交互性。SVG图像能对用户动作做出不同响应,例如高亮、声效、特效、动画等。另外,由于MicrosoftIE6.0中已经集成了浏览SVG文件的插件,这使得SVG的浏览更加方便,容易。

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服务。

3 SVGVRML的比较

虚拟现实建模语言是用来描述三维交互场景和实体的一种文件格式。用于联接全球网(WWW)。它可以用于创建复杂场景的三维表示,如装饰图像,产品设计和虚拟现实实现。同Java 3D一样,VRML也是遵循OpenGL标准的。OpenGL是近年来发展起来的一个性能卓越的三维图形标准,它是在SGI等多家世界闻名的计算机公司的倡导下,以SGIGL三维图形库为基础制定的一个通用共享的开放式三维图形标准。VRML在其描述中也采用了节点树的表达方式。与VRML不同的是,SVG是专门针对二维场景而推出的一种基于是XML标准的标记言语,对三维场景它显然无能为力。另一方面,VRML并不是基于XML标准的,这对我们实现三维OpenGIS也是一个不利因素。

4 SVGGMLVMLPGML的比较

矢量标识语言(VML),精度图像标识语言(PGML)都是作为W3C的矢量图像初始标准在1998年提出的。VMLPGML在很多地方非常的类似,但VML比较适合一些普通矢量图像,而PGML可以做出更加丰富多彩,适合专业设计和公众出版的图像。为了进一步促进图像标准的发展,W3C成立了SVG工作组。SVG工作组将VMLPGML的优势结合在了一起,重新推出了新的标准矢量格式,这就是SVGGMLSVGVML都与矢量图形有着密切的关系:GML在表示实体的空间信息的同时加入了实体的其他属性信息,是表示实体的空间信息和属性的编码标准,但它并不支持直接显示图形。而VMLSVG是在表示图形的矢量信息同时加入了图形的显示信息(即以什么样的样式显示矢量图形),是显示矢量图形的两种比较好的格式。相比之下,SVG是综合了VML的优点后推出的,是国际标准,它比VML具有更多的优点,也有更广阔的前景。

基于SVG的系统主要由Web服务、GIS服务和数据存储三部分的关键技术构成,采用基于B/S方式的三层体系结构,整个工作流程如下:
  (1)客户端向Web服务器发出服务请求;Web服务器接收到请求后,分析调用请求。如果只是普通的网页服务就由Web服务器直接处理;如果是GIS服务请求,则向下连接GIS服务器。

  (2)在GIS服务器中,根据调用请求,在其中完成空间数据到GML文件的格式转换,以及GML文件到SVG文件的转换,并转回Web服务器。

  (3Web服务器把GIS服务器传回的SVG文件发送给客户端,在客户端的浏览器中进行显示,利用JavaScript脚本语言实现地图的操作和交互功能。


  整个系统功能的实现主要分为服务器端和客户端的技术实现,在服务器端主要由Web服务器和GIS服务器组成。其中,Web服务器主要负责与客户端的连接,并提供普通的Web服务,当客户端需要GIS服务时才连接GIS服务器;GIS服务器主要负责与空间数据的连接与管理。对于多源异构的空间数据,在GIS服务器中进行数据格式的转换,最终生成SVG文件并传回给Web服务器,由Web服务器再传回到客户端进行显示。本文主要讨论了客户端的SVG图像展示和交互操作的实现。
  在客户端安装Adobe公司的SVG插件,在客户端使用SVG技术,结合JavaScript脚本语言实现基本的Web GIS功能,包括地图平移、放大、缩小、图层的管理、地图的交互性显示以及对图层属性的查询等。整个系统基于矢量图形,在放大和缩小的情况下,图形显示质量好;能无级放大和缩小,实现了对测线属性和测线二维反演图的查询;能分别管理各个图层的显示与隐藏,并实现了对工作区的交互显示。
1
地图的平移

  地图向左平移功能的实现代码,与其他平移方法代码类似,主要是利用currentPosition变量的增加和减少进行平移操作。

  function horimove(evt){

  viewBox=SVGRoot.getAttribute(′viewBox′);

  var viewVals=viewBox.split(′ ′);

  currentPosition=parseFloat(viewVals[0]);

  if (goLeft==true){//地图向左移动

  if (currentPosition01){

  currentPosition=currentPosition+0.1;

}
  goLeft=false;

  }

  viewVals[1]=currentPosition;

  SVGRoot.setAttribute(′viewBox′,viewVals.join(′ ′));

  }


2
地图的缩放
  地图放大/缩小的实现代码,主要利用currentScale变量进行图形的扩大和缩小变化。

  function zoomIn(){

  if (SVGRoot.currentScale5){ //地图放大

  SVGRoot.currentScale=SVGRoot.currentScale*1.5;

  }

  }

  function zoomOut(){

  if (SVGRoot.currentScale>0.3){ //地图缩小

  SVGRoot.currentScale=SVGRoot.currentScale*0.5;

  }

  }


3
图层的人机交互
  SVG采用基于XMLDOM文档管理结构可以很方便地实现层次管理。〈g〉〈/g〉代表一个组, GIS中的一个专题图层存储在一个组中,每个组都有一个唯一标志ID属性。根据这个ID属性就可以通过JavaScript控制不同图层的显示和隐藏,并且SVG图形支持事件编程,可以很容易地实现对onclick()onmouseover()等事件的编程。

  图层的隐藏和显示功能主要是利用setAttribute函数对visibility参数赋予hidden属性或visible属性。部分实现代码如下:

  function vis_hid(id){ //显示或隐藏图层获得所选图层对象

  var SVGstyle=SVGDoc.getElementById(id);

  if(SVGstyle.getAttribute("visibility")=="visible")

  {

  //隐藏该图层

  SVGstyle.setAttribute("visibility""hidden");

  } else {

  //显示该图层

  SVGstyle.setAttribute("visibility""visible");

  
}
  }

 

4 查询功能的实现
  这里假设对测线编号进行查询,
查询测线的属性字段主要根据测线的ID号,利用getElementById()函数进行查询;利用getAttribute ()函数得到测线的属性字段内容。结果如图34所示,分别为查询测线的反演图和测线的数据说明。
  //从表单中获得要查询的ID号

  function showattrib(value){

  //获得符合ID号内容的对象

  
var SVGid=SVGDoc.getElementById(value)
  
var new_window=window.open("","query" ,"height=133,
  width=450");

  //显示该对象的describe字段内容

  new_window.document.writeln(SVGid.getAttribute("describe"));

  new_window.focus();

  }

SVG技术不仅用于地图的展示,任何矢量图形都可以使用该技术。基于该技术的图像具有图形美观、文件标准统一、可读性强、灵活易用等特点。个人觉得SVG技术在WebGIS及互联网上的矢量图形发布中将具有广阔的应用前景。

 

分享到:
评论
12 楼 linliangyi2007 2009-01-08  
建议不要使用SVG哦!
我们之前已经成功做过SVG的地图引擎了,但因为要客户安装客户端的插件,最后还是放弃了,改raster的引擎了
11 楼 damoqiongqiu 2008-12-13  
  SVG本身很不错,跟XML、VML、GML一样学起来也不难,关键问题是如何高效地把地理数据专成SVG格式的文件,比如一张很大的地图,或者MapInfo里面的一个TAB,怎么才能很好地转成SVG格式。
   我前段时间找了很多资料,有一些介绍的插件,但是都是收费的,另一些转的效果不好。
   请教各位,有人有好的工具介绍吗?
10 楼 foxlee 2008-09-10  
好像ie6不支持svg把,需要安装插件,不如用flex。
9 楼 ruiyingyu 2008-09-08  
地图的生成是由GIS服务器自动完成,如geo server,arcims等等。 有几种方式,1是直接生成图片,2是以流的方式加载。目前应用较多的是前一种。同时还支持多条件空间查询,拓扑关系分析等功能,所以GIS SERVER不只是用来生成地图用。

如果你是做客户端的应用,Flex下的GIS项目已经有了成熟的案例,比如UMAP。我觉得没必要重新来过。你可以借鉴一下。你也可以自己根据openlayers的代码在Flex下实现,目前正在做相关的工作。不过目前来看Flex下做大规模客户端的标绘和渲染,效果虽然很好,但性能不是很好。资源占用较大。
8 楼 liuqiang 2008-09-06  
<div class='quote_title'>ltian 写道</div>
<div class='quote_div'>用Flex+支持WEB GIS规范的GIS SERVER可以快速开发出WEB GIS。 <br/>或者熟悉JS的人用 openlayers+支持WEB GIS规范的GIS SERVER 也是一条快速路径。 <br/><br/></div>
<p> </p>
<p> ltian老兄,好久未见啊,那你先说说用flex做前端,做性能测试有什么好的办法呗 </p>
7 楼 randy_jin 2008-09-05  
不错,我也刚刚开始接触这玩意儿!
6 楼 yucc77 2008-09-05  
性能是问题!SVG不可能做到GIS那么大
5 楼 geminiyellow 2008-09-02  
everlasting_188 写道
建议增加一个讨论svg做webgis的栏目,听说浙江电力系统这方面在做,做的还可以

是的,因为电力他们支持,所以大家都很有干劲啊。可惜我跑了。
4 楼 yishh 2008-08-26  
性能是大问题
3 楼 steeven 2008-08-12  
这个性能测试过吗?就像google earth那样的数据量
2 楼 liuqiang 2008-08-11  
<div class='quote_title'>everlasting_188 写道</div>
<div class='quote_div'>建议增加一个讨论svg做webgis的栏目,听说浙江电力系统这方面在做,做的还可以</div>
<p> </p>
<p> 电力系统的gis我倒是体验过,日本的人做的,贼贵,据说上千万。</p>
<p>个人感觉svg/webgis是个好的方向。</p>
<p>建议增加webgis/flex的标签或者讨论区。</p>
1 楼 everlasting_188 2008-08-11  
建议增加一个讨论svg做webgis的栏目,听说浙江电力系统这方面在做,做的还可以

相关推荐

    基于SVG的矢量WebGIS地图高级查询功能的实现.pdf

    本文介绍了基于SVG的矢量WebGIS地图高级查询功能的实现,讨论了SVG在WebGIS中的应用优点,并对基于SVG的矢量WebGIS地图高级查询功能进行了详细的介绍。 知识点: 1. SVG是一种基于XML的标记语言,用于描述二维矢量...

    基于Aspnet、SVG技术的WebGIS研究与实现.doc

    本文的研究结果可以为WebGIS的开发和应用提供参考和借鉴,特别是在基于Asp.net和SVG技术的WebGIS开发中。 知识点: 1. 基于B/S三层架构的系统设计:本文设计了一种基于B/S三层架构的系统模型,系统采用用户-角色-...

    基于SVG格式的WebGIS地图的实现.pdf

    "基于SVG格式的WebGIS地图的实现.pdf" 本文介绍了基于SVG格式的WebGIS地图...本文对基于SVG格式的WebGIS地图的实现进行了详细的讨论,展示了SVG格式的特点和应用价值,为WebGIS的发展和应用提供了理论依据和技术支持。

    基于Asp.net、SVG技术的WebGIS研究与实现.docx

    "基于Asp.net、SVG技术的WebGIS研究与实现" 本文研究了基于Asp.net和SVG技术的WebGIS的设计和实现。WebGIS是互联网和GIS的结合产物,也是GIS研究的一个重要方向。然而,在Web上发布信息量巨大的地理空间信息必将...

    基于SVG的WebGIS的研究与实现.pdf

    通过采用SVG矢量图构建WebGIS图,并利用SVG提供的DOM编程接口,使用JavaScript脚本语言对SVG进行开发,实现其交互功能。 SVG(Scalable Vector Graphics)是一种基于XML的矢量图形语言,可以实现图像的无损缩放、...

    基于SVG技术WebGIS的实现方案.pdf

    【SVG技术介绍】 SVG,全称为Scalable Vector Graphics(可缩放向量图形),是一种基于XML(扩展标记语言)的二维图形描述语言。...对于开发人员而言,掌握SVG技术对于构建现代WebGIS系统至关重要。

    基于SVG的WebGIS地图实现.doc

    基于 SVG 的 WebGIS 地图实现 本文主要介绍了基于 SVG 的 WebGIS 地图实现的相关知识点,下面是对应的知识点: 1. SVG 介绍 SVG(Scalable Vector Graphics)是一种基于 XML 的二维可缩放矢量图形语言描述规范,...

    基于SVG的WebGIS研究.pdf

    本文研究基于SVG的WebGIS技术,旨在解决传统GIS发展中存在的问题,如数据共享和传输速度慢等。文章介绍了使用SVG矢量图构建WebGIS图,使用JavaScript脚本语言对SVG进行开发,实现其交互功能。该技术具有系统简单、...

    基于SVG的webGIS住宅楼盘查询系统研究与设计.pdf

    该系统采用基于SVG规范的WebGIS设计思想,实现了住宅楼盘查询系统的关键技术。系统主要功能包括搜索楼盘位置、用地、住宅平面等相关信息的查询、矢量与栅格地图的载人管理、地图的编辑与更新、地图属性数据与地图...

    基于SVG的高校房产WebGIS的研究及实现.pdf

    摘要:本文研究了基于SVG的高校房产WebGIS的设计和实现,提出了一种利用SVG技术来建立高校房产WebGIS的方法和技术。该方法可以实现房产图形与数据的一体化管理,提高了高校房产管理的效率和科学性。 关键词:可缩放...

    使用JavaScript实现基于SVG的WEBGIS动态交互.pdf

    JavaScript技术在基于SVG的WEBGIS系统中具有重要的应用价值,可以实现交互功能,提高WEBGIS系统的交互性和可用性。本文的研究结果对WEBGIS系统的发展具有重要的参考价值。 在WEBGIS系统中,JavaScript技术可以用来...

    SVG实现的WebGIS项目源码

    SVG实现的WebGIS项目源码,C#实现。

    基于SVG与Ajax技术的WebGIS研究与设计.pdf

    基于SVG与Ajax技术的WebGIS研究与设计 本文探索了基于SVG与Ajax技术的WebGIS的研究与设计。传统的WebGIS技术存在一些不足之处,例如对特定支撑环境的依赖、有限网络带宽对数据传输的限制、数据共享困难、缺乏丰富的...

    SVG技术参考文档资料汇总

    基于SVG 技术的考古探测WebGIS 研究.pdf 基于SVG的WebGIS的设计与实现.pdf 基于SVG的WebGIS建设电力生产管理信息系统.pdf 基于SVG的公共图形交互规则.pdf 基于SVG的实时监控流程图实现技术.pdf 联合证券 公司研究-...

    基于SVG及PHP MySQL技术的WebGIS.pdf

    【基于SVG及PHP MySQL技术的WebGIS】 WebGIS(Web地理信息系统)是一种通过互联网提供地理信息和服务的技术。随着互联网的迅速发展,WebGIS在信息化建设,尤其是空间信息建设中的作用日益显著。SVG(Scalable ...

    基于SVG和WebService的WebGIS系统设计

    本文提出了一种基于SVG和WebService的WebGIS系统设计方案,通过详细分析SVG技术的优势、WebService技术的特点以及具体的实现方法,展示了如何构建一个高效、易用的地图信息发布系统。虽然目前该方案还存在一些挑战,...

    基于JavaScript和SVG的WebGIS实现方案.pdf

    SVG技术具有多种优势,如可以任意放大图形显示、可在SVG图像中保留可编辑和可搜寻的状态、SVG文件比同样质量的JPEG和GIF格式的文件要小很多、SVG格式的图像可以提供交互图形的功能、SVG图像不需要通过GML进行转换等...

    基于SVG的交互式房产WebGIS的研究与实现.pdf

    SVG(Scalable Vector Graphics)是一种基于XML的标记语言,能够提供高质量的矢量图形、可缩放性和交互性,非常适合房产WebGIS系统的开发。 本文还介绍了XMI(Extensible Markup Language)在房产WebGIS系统中的...

Global site tag (gtag.js) - Google Analytics