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

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

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的浏览更加方便，容易。

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

3 SVG与VRML的比较

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

4 SVG与GML、VML、PGML的比较

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

基于SVG的系统主要由Web服务、GIS服务和数据存储三部分的关键技术构成，采用基于B/S方式的三层体系结构，整个工作流程如下：
　　（1）客户端向Web服务器发出服务请求；Web服务器接收到请求后，分析调用请求。如果只是普通的网页服务就由Web服务器直接处理；如果是GIS服务请求，则向下连接GIS服务器。
　　（2）在GIS服务器中，根据调用请求，在其中完成空间数据到GML文件的格式转换，以及GML文件到SVG文件的转换，并转回Web服务器。
　　（3）Web服务器把GIS服务器传回的SVG文件发送给客户端，在客户端的浏览器中进行显示，利用JavaScript脚本语言实现地图的操作和交互功能。

　　整个系统功能的实现主要分为服务器端和客户端的技术实现，在服务器端主要由Web服务器和GIS服务器组成。其中，Web服务器主要负责与客户端的连接，并提供普通的Web服务，当客户端需要GIS服务时才连接GIS服务器；GIS服务器主要负责与空间数据的连接与管理。对于多源异构的空间数据，在GIS服务器中进行数据格式的转换，最终生成SVG文件并传回给Web服务器，由Web服务器再传回到客户端进行显示。本文主要讨论了客户端的SVG图像展示和交互操作的实现。
　　在客户端安装Adobe公司的SVG插件，在客户端使用SVG技术，结合JavaScript脚本语言实现基本的Web GIS功能，包括地图平移、放大、缩小、图层的管理、地图的交互性显示以及对图层属性的查询等。整个系统基于矢量图形，在放大和缩小的情况下，图形显示质量好；能无级放大和缩小，实现了对测线属性和测线二维反演图的查询；能分别管理各个图层的显示与隐藏，并实现了对工作区的交互显示。
1 地图的平移
　　地图向左平移功能的实现代码，与其他平移方法代码类似，主要是利用currentPosition变量的增加和减少进行平移操作。
　　function hori－move(evt){
　　viewBox=SVGRoot.getAttribute(′viewBox′);
　　var viewVals=viewBox.split(′ ′);
　　currentPosition=parseFloat(viewVals[0]);
　　if (goLeft==true){//地图向左移动
　　if (currentPosition＜0．1){
　　currentPosition=currentPosition+0.1;

}
　　goLeft=false;
　　}
　　viewVals[1]=currentPosition;
　　SVGRoot.setAttribute(′viewBox′,viewVals.join(′ ′));
　　}

2 地图的缩放
　　地图放大/缩小的实现代码，主要利用currentScale变量进行图形的扩大和缩小变化。
　　function zoomIn(){
　　if (SVGRoot.currentScale＜5){ //地图放大
　　SVGRoot.currentScale=SVGRoot.currentScale*1.5;
　　}
　　}
　　function zoomOut(){
　　if (SVGRoot.currentScale>0.3){ //地图缩小
　　SVGRoot.currentScale=SVGRoot.currentScale*0.5;
　　}
　　}

3 图层的人机交互
　　SVG采用基于XML的DOM文档管理结构可以很方便地实现层次管理。〈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 ()函数得到测线的属性字段内容。结果如图3和4所示，分别为查询测线的反演图和测线的数据说明。
　　//从表单中获得要查询的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及互联网上的矢量图形发布中将具有广阔的应用前景。

 

建议增加一个讨论svg做webgis的栏目，听说浙江电力系统这方面在做，做的还可以

 

 电力系统的gis我倒是体验过，日本的人做的，贼贵，据说上千万。

个人感觉svg/webgis是个好的方向。

建议增加webgis/flex的标签或者讨论区。

这个性能测试过吗？就像google earth那样的数据量

性能是大问题

是的，因为电力他们支持，所以大家都很有干劲啊。可惜我跑了。

性能是问题！SVG不可能做到GIS那么大

不错，我也刚刚开始接触这玩意儿！

如果MAP SERVER 开发商打算在GIS SERVER产品中将地图以SVG方式返回给客户端请求者时，那么可以考虑SVG的技术。不过和楼主说的过程不同。根本不用生成GML，再由GML转SVG，而是WEB GIS服务器的开发语言（譬如Java），根据SLD文件的描述，以及请求的参数，直接由空间数据生成SVG，性能更好，而生成GML再转SVG的时候（同时结合SLD的描述）的效率太低。

如果是WEB GIS 应用开发商，那开发WEB GIS时应主要关注OGC的WEB GIS规范，OGC官方开源GEOSERVER所提供的WEB GIS服务性能非常高。FLex＋GEOSERVER（或者 基于JS的开源openlayers+geoserver）就可以很快开发出高性能，易用的　WEB　GIS应用来，而可以不必考虑ＳＶＧ技术。

如果在客户端根据地理信息数据画出SVG，性能是个大问题。而考虑以SVG作为地理空间信息存储的格式，就好像用xml取代关系数据库一样，非常不现实。

地理信息数据交换用SVG更是不必要，因为WEB GIS 规范中的服务服务返回的地理信息数据也是XML形式（GML），而ＳＶＧ中则包含了更多的图形渲染的信息。

在客户端对ＳＶＧ进行搜索来找到一个或者多个Ｆｅａｔｕｒｅ，肯定不如在服务器端对空间数据库的搜索性能好，而且所找的信息未必全面，因为大的地理信息系统中不会把所有的空间数据一次性提出来到客户端。而是根据客户端的请求地理空间范围来给出相应的地理信息，以减少信息的传输。

当地图缩小时，不仅是矢量图进行了缩小，而是更大地地理空间范围纳入了视野，要重新根据需要显示地理空间数据绘制SVG图形。 放大和平移也是同样道理，因此不是客户端自己操作就能改变的，必须重新向服务器请求SVG才行。

综上所述，现阶段　WEB GIS应用开发者（GIS SERVER开发者除外），不必关注SVG技术，等支持ＳＶＧｄｅ服务器面世之后关注也来得及。用Flex＋支持WEB　GIS规范的ＧＩＳ　SERVER可以快速开发出WEB GIS。
或者熟悉JS的人用 openlayers+支持WEB　GIS规范的ＧＩＳ　SERVER 也是一条快速路径。

等等等。。。。。