当前位置: 代码迷 >> Web前端 >> SVG技术在Web GIS中的使用
  详细解决方案

SVG技术在Web GIS中的使用

热度:104   发布时间:2012-08-27 21:21:56.0
SVG技术在Web GIS中的应用
本文引自http://www.goldenbg.com/article.asp?id=50
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浏览器,Adobe开发的SVG Viewer功能强大,显示效果好,是网络上使用最多的,其最新的版本是3.0。可以到Adobe的网站(http://www.adobe.com/svg/viewer/install/main.html )上去下载,为了保证中文能正确显示,请下载简体中文版本。下载后安装程序,第一次使用时回弹出用户许可信息,点击"接受"即可。

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

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

其 中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中还提供了组的管理(<g>;标签),定义 (defs)及引用等功能。这些特征在GIS中得到了广泛的应用。

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

功能实现

地图的交互及控制
在浏览器中打开SVG文件时,SVG图形作为浏览器的一个嵌入对象出现,可以很方便的通过script函数来获取SVG图形对象及其内部的图形属性。通过获取这些对象和属性,就可以很方便地实现交互功能。
GIS 系统最基本的功能是地图控制,SVG Viewer本身提供图形的缩放功能,但要通过操作鼠标时按指定的功能键才能实现,不适合GIS功能的需要,在WebGIS系统中将其屏蔽。但由于SVG 提供了丰富的消息触发及事件响应函数,通过捕捉这些消息,来实现自定义的地图控制功能。一个放大地图的实现流程是:用户点击地图,触发 onmousedown事件,调用消息响应函数,在消息响应函数中将地图的变换矩阵以当前点击的点为中心放大1.1倍,更新显示图形。消息响应的函数如 下:
Function zoom(evt, scale)
{ // scale = 1.1;表示放大1.1倍
point = new GDPoint();
point.x = evt.clientX;
point.y = evt.clientY; //point为当前点击的坐标点 为屏幕坐标
absPoint = pointInvert(point);//转换为绝对最表
scale = curTransform.scale*scale; //设置当前的缩放系数
curTransform.scale = scale;
point1 = pointApply(absPoint);//绝对坐标应用当前的变换系数
curTransform.x += point.x-point1.x;
curTransform.y += point.y-point1.y;//缩放中心平移到当前点击的位置
matrix= trans2String(curTransform);//生成新的变换矩阵
maproot.setAttribute("transform",matrix);//应用新的变换矩阵
}
其他的如地图缩小、全图显示、区域放大、局部定位等功能与之类似,这里就不一一作介绍。
图层管理
SVG 采用基于XML的DOM文档管理结构,很方便实现层次管理,其组<g>对象就可以将其下面的所有图形管理起来。节点中的childNodes 属性可以获取所有的子节点的集合,getElementsByTagName()方法可以获取某种类型对象的列表,如要获取某组(g)下的所有路径 (path)对象的集合,就可以调用getElementsByTagName("path")。
作者通过采用组对象来实现图层管理功能,不同 图层的对象包含在不同的组中。通过设置组的属性,就可以实现如可见性、颜色、透明度等设置以及选中、删除所有对象等操作。SVG中的对象的样式属性具有继 承性,如果下一级没有某样式属性,则直接使用其上一级的属性,以此类推,直到顶级为止。如:对某层设置某个显示透明度,则其下级元素显示时,均采用该透明 度,除非其下级元素指定了透明度属性。
下面的图显示GIS系统中的图层控制界面。


图标管理
图标表示的是信息 点的信息,在GIS系统中广泛使用图标来标志信息点,其特点是图标引用相同的预定义的图形组。增加新的图标只是在不同的位置增加一个引用而已。在不增加实 际的绘图数据。减少了数据量;同时,如果要修改某类信息的显示图标,只要修改预定义的图标即可,方便了管理。在WebGIS系统中定义了很多类型的图标。 下图表示用一个圆和一个路径对象定义的图标,其名称为symbol_1,并定义在defs标签内,供图标对象引用:
<defs>
<g id="symbol_1" type=default" style="&_symbol;">
<circle cx="0" cy="0" r="10" />
<path d="M-7.1 7.1,-10 0,-7.1 -7.1,0 -10,7.1 -7.1z" style="fill:#0000ff;fill-opacity:0.6" />
</g>

</defs>
下图为图标的实例,这两个图标引用上面定义的symbo_1的图标:图标在地图上的实际位置为transform指定的位置分别是(200,100),(200,200)。
<use id="icon:1" type="A" transform="translate(200,100)" xlink:href="#symbol_1"/>
<use id="icon:2" type="B" transform="translate(200,200)" xlink:href="#symbol_1"/>
如果要增加图标,只要添加新的引用(use)对象即可。这些对象可以有自己的属性,表示不同的信息点,但其显示的形状是预定义的,如果修改了预定义的形状,这些图标的显示结果同样改变。下图为在WebGIS中定义的几种图标及显示效果(蓝色的为图标)。


地图属性的定义
SVG 图形数据本身只包含用来实现矢量图形显示的信息,如坐标点、变换矩阵、显示样式等信息,不能满足GIS系统的需要。但由于SVG是基于XML格式的,除了 使用其内置的属性外,可以对其属性进行任意扩充,以实现自定义的功能。在SVG图形中,对象的属性id是用来标志唯一对象的编号,可以通过SVG文档对象 的getElementById()函数来获取指定的对象。WebGIS采用id好作为图形内在的标示,而自定义其他的属性如名称(name),提示信息 (tip)等来存储其GIS属性。获取或赋值这些属性的方法是调用getAttribute及setAttribute函数。如在WebGIS中一个路径 是这么定义的。
<path id="ROAD:101" Name="解放大道" Tip=" 解放大道(东)" d=<M……"/>
那么通过ID "ROAD:101" 获取路径对象后,就可以获取其属性Name及Tip的信息,执行显示提示信息等功能。


总结
本 文对用SVG技术实现基于Web的GIS的关键技术做了简单的介绍,通过对SVG技术的把握和应用,作者成功地开发了WebGIS系统,说明SVG技术完 全能胜任某些行业GIS应用的需要,从长远来看,SVG技术代表网络矢量化图形的发展方向,必将在包括GIS在内的各个方面得到广泛应用。
  相关解决方案