基于SVG技术实现WebGIS的基本功能

基于SVG技术 实现 WebGIS的基本功能: 字串6

DOM是文档对象模型（Document Object Model）的简称，是表示文档（比如HTML和XML ）和访问、 操作 构成文档的各种元素的应用程序接口（API）。一般来说，支持JavaScript的所有浏览器都支持DOM。SVG文档是继承于XML文档的，这种继承包括了对XML文档结构的继承和对XML文档DOM操作的继承。SVG的DOM不仅遵循DOM1、DOM2规范的大部分内容，而且提供了一套扩展的DOM接口。因此，SVG中的每个属性和样式都可以通过脚本编程来访问，非常方便。

由于SVG提供了大量的丰富的DOM接口，所以我们采用JavaScript语言开发WebGIS 的各种基本 功能 ，这样客户端就可以通过一系列的脚本来实现对地图的操作，以前的一些需要与服务器交互的操作现在也可以完全在客户端进行。 字串4

SVG的DOM 提供了丰富的消息触发和 事件 响应函数，可以获取用户消息，包括在地图上移动、点击鼠标等等。JavaScript可以通过这些提供的接口对SVG文件进行相关操作。事件的响应可以定义到整个SVG文档对象中，也可以定义在其中的单个图形对象上。例如，要给某个路径（path）定义鼠标移动事件，可以用<path onmousemove = "mouseMoved(evt)".../>，onmousemove 指定 事件何时触发，在这里表示鼠标在path上移动时触发，mouseMoved为要触发的响应函数，参数evt表示事件本身，可以通过evt获取与当前事件相关的各种信息，可以在JavaScript中定义响应函数，进行相应的处理。同样，SVG 也提供丰富的状态事件。例如， 数据 装载完毕，可以触发onload事件，做一些初始化的处理。

        GIS系统最基本的功能是地图的显示和控制，包括地图缩放、平移、图层控制等等。SVG Viewer插件本身提供图形的缩放功能，但要通过特定的功能键才能实现，不适合GIS功能的需要，因此在WebGIS系统中需要将其屏蔽。由于SVG 提供了丰富的 消息 触发及事件响应函数，所以可以通过捕捉这些消息，来实现地图的这些功能。         为了达到对地图进行缩放、平移等的目的，有多种方法可以实现。一种方法是，通过改变SVG文档的viewBox属性，来改变视图区域的可显示范围。另一种方法是，把所有的地图数据组织在一个地图分组元素（元素g）下，然后通过设置该分组元素的transform属性来实现对整个地图的缩放和平移。transform的属性包括6 个参数，分别 控制 图形的6种变形方式。其中对于缩放参数和平移参数的设置可分别通过Scale(Xscale, Yscale)和translate(Xmove, Ymove) 来实现。在编码 过程 中，需要注意的是通过比例Scale和移位translate对transform属性的设置是一次性的而不是累加的，所以就需要在代码中用全局变量对地图的具体位置进行记录。我们采用后一种方法来实现对地图的缩放。         下面将以地图的放大为例子，介绍具体实现流程。

用户点击页面上的放大按钮，触发按钮的onclick事件，调用zoomOut()函数，在该函数中将地图放大为原来的1.5倍。消息响应的函数如下：

字串7

function zoomOut(groupName)

{ 字串8

var svgDoc = document.mysvg.getSVGDocument();

var curView = svgDoc.getElementById(groupName);

var curZoom = svgDoc.documentElement.currentScale;

i = i*1.5; 字串9 curView.setAttribute("transform","translate("+j+" "+k+") scale("+ curZoom*i+")"); 字串2 } 这里的i、j、k都是全局变量，分别记录缩放倍数、左右平移、上下平移的数值，这样多次缩放和平移操作就可以累加了。topview是封装所有地图元素以后的分组的id名称。 缩小、地图平移、全图显示等功能与上面的地图放大类似，都是对transform的属性进行设置。 下面介绍一下搜索功能的实现。可以 根据 用户输入的地物名称在地图中进行搜索，并高亮将其显示。消息响应的函数如下： 字串3

function searchFeature(featureName)

{

var svgDoc = document.mysvg.getSVGDocument(); 字串1 var svgObj = svgDoc.getElementById(featureName); 字串4

if (svgObj)

{

var svgStyle = svgObj.getStyle();

svgStyle.setProperty('stroke', 'white');

}

} 字串8 下面对如何实现地图的图层管理功能进行说明。 字串4

在SVG地图中，根据不同分类，地理对象被组织在不同的层中，以组元素<g>作为其分层的方式，每个图层都有相应的标识ID，不同的图层根据ID来进行区分，例如：

<g id="Soil" style="opacity:1.0;visibility:visible;"></g> 字串9 对不同的图层进行显示控制可以用如下函数实现： 字串9

function setMapLayerVisible(id, checkBool)

{

var svgObj = svgdoc.getElementById(id); 字串4 var svgStyle = svgObj.getStyle(); 字串7

if (checkBool)

svgStyle.setProperty('visibility', 'visible'); 字串7

else

svgStyle.setProperty('visibility', 'hidden');

}

如果checkBool为true，将该层设置为可见；checkBool为false时，将该层设置为不可见。 字串9         还有其它一些GIS相关的基本功能，比如，显示地理对象信息、改变图元颜色、地理对象坐标的显示等等，基本都和上面的代码相类似，可以通过DOM接口直接操作SVG文件。