SVG中国 - 新一代web设计及互动媒体的革新

http://www.chinasvg.com

http://www.adobe.com/svg/viewer/install/svgtest.html

用SVG技术实现基于Web的GIS

 

本文主要对基于SVG的WebGIS的客户端实现的一些基本知识及实现技术作一个简单介绍。

SVG是什么?Scalable Vector Graphics(简称SVG)，是“可升级矢量图形”的意思。SVG是由W3C制定的基于可扩展标记语言(XML)来描述二维矢量图型的一个开放标准。SVG严格遵从XML语法，SVG并用文本格式的描述性语言来描述图像内容，因此SVG是一种和图像分辨率无关的矢量图形格式。
　　SVG可以使你设计的网页可以更加精彩细致，使用简单的文本命令，SVG可实现色彩线性变化、路径、自定义字体、透明效果、滤镜效果等各式常见的图形图像效果。
　　SVG具有以下优点：
　　SVG是纯XML的，是一个开发标准。SVG不属于任何个体的专利，而是工业标准，通过协作共同开发的标准。因此SVG能够得到更迅速的开发和应用；
　　SVG的图像文件可读，易于修改和编辑；
　　SVG文件比JPEG和GIF更小压缩比更大；
　　SVG是可以压缩的；
　　SVG图像是可以任意无损缩放，并以任何分辨率高清晰打印；
　　SVG与现有的WEB技术可以互相融合(如与HTML、GIF、JPEG、PNG、SMIL、ASP、JSP集成)。SVG的动态部分(包括时序控制和动画就是基于SMIL标准。SVG文件还可嵌入JavaScript脚本来控制SVG对象；
　　SVG图形格式可以用来动态生成图形。SVG动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户；
　　SVG里的文字是可供选择和搜索的,所以SVG图形格式可以方便的建立文字索引，从而让SVG实现基于内容的图像搜索；
　　SVG图形格式支持多种滤镜和特殊效果，SVG在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果；
　　SVG面临的主要问题是与非开放式的Flash如何竞争以及SVG的本地运行环境的厂家支持程度。

• 引言

　　SVG（Scalable Vector Graphics）是一种基于XML 的用来描述二维矢量图形和矢量/点阵混合图形的置标语言，是一种全新的矢量图形规范。 SVG规范定义了SVG的特征、语法和显示效果，包括模块化的XML命名空间（namespace）和SVG文档对象模型(DOM)。 SVG的绘图可以通过动态和交互式方式进行，在实际操作中，则是以嵌入方式或脚本方式来实现的。SVG不仅提供超链接功能，还定义了丰富的事件。由于SVG支持脚本语言（script），可以通过Script编程，访问SVG DOM的元素和属性，即可响应特定的事件，从而提高了SVG的动态和交互性能。 SVG实现了图形、图象和文字的有机统一。 SVG除了支持HTML中常用的标记，如文本、图象、链接、交互性、CSS的使用、脚本（Script）外，还提供了大量针对图形、图象、动画的特定标记。这就为实现GIS提供了可能。

　　作者根据实际工作需要，在Web浏览器中采用SVG及相关技术实现了Web的GIS管理系统(以下简称WebGIS)，取得了很好的效果。此系统包括服务端及客户端的设计，服务器端出要处理数据的存储及数据的动态装载，客户端主要完成SVG数据的显示及交互。本文主要对基于SVG的WebGIS的客户端实现的一些基本知识及实现技术作一个简单介绍。

• 基础知识

　　SVG浏览插件

　　要实现SVG图形的显示，必须要在客户端安装SVG浏览器，Adobe开发的SVG Viewer功能强大，显示效果好，是网络上使用最多的，其最新的版本是3.0。可以到Adobe的网站（ http://www.adobe.com/svg/viewer/install/main.html）上去下载，为了保证中文能正确显示，请下载简体中文版本。下载后安装程序，第一次使用时回弹出用户许可信息，点击"接受"即可。

　　在网页中嵌入SVG

　　将实现基于浏览器的GIS系统，需要将SVG图形对象嵌入到网页中，使用如下HTML代码来实现：

xml 代码

[code]
<embed width="640" height="560" type="image/svg-xml" id="svgmapctrl"
pluginspage="http://www.adobe.com/svg/viewer/install/" src="default.svg" >
</embed>
[/code]

其中embed标签指定为一个嵌入的对象，width,height分别指定该对象的宽度、高度，type指定类型为image/svg-xml ,src指定为svg数据文件的URL地址，指定这样的标签并在浏览器中打开，浏览器便回调用SVG Viewer在指定区域进行显示。此处，src指定的是一个svg文件，在GIS系统中，要求根据不同的请求获取不同的数据，则可以将其改为动态的url，如服务端的Java Servlet，由服务端动态生成。需要注意的是,SVG目前不支持GB编码，在使用中文字符时，请使用UTF-8编码。

　　SVG图形对象简介

　　SVG提供了丰富的图形对象，包括直线（line）、路径(path)、圆(circle)、图标(symbol)文字(text)、图像(image)等，满足了GIS系统的需要。这些图形对象可以通过设置不同的属性、显示样式来达到不同的显示效果。对象在SVG文件中以XML标签的形式存在，而对象属性以标签的属性来存取，可以通过访问SVG的DOM对象的方法来方便的存取这些对象及属性。同时SVG中还提供了组的管理(标签),定义(defs)及引用等功能。这些特征在GIS中得到了广泛的应用。

　　SVG的事件简介

　　SVG提供了丰富的消息触发及事件响应函数，获取用户消息。如在地图上移动、点击鼠标等。事件的相应可以定义到整个文档对象中，也可以定义在单个图形对象上。如要给某个路径(path)定义鼠标一定事件，可以这样 , onmousemove指定事件触发的条件（即鼠标在path上移动时），mouseMoved为要触发的响应函数，evt表示事件本身，可以通过evt获取与当前事件相关的信息，用户可以在script中定义响应函数，进行相应的处理。同样，SVG也提供丰富的状态事件，如数据装载完毕，就可以触发onload事件，作一些初始化的处理。

分享到：

SVG开源项目 | Javascript画图js包

• 2007-11-16 22:19
• 浏览 3730
• 评论(0)
• 查看更多