用SVG技术实现基于Web的GIS

2024-07-21 02:21:20

字体：大中小

来源：转载

供稿：网友

引言

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代码来实现：

<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在内的各个方面得到广泛应用。

最大的网站源码资源下载站，

上一篇：web下水晶报表的使用！

下一篇：新浪短信Web Service