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

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

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

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倍。消息响应的函数如下：

function zoomOut(groupName)

{

var svgDoc = document.mysvg.getSVGDocument();

var curView = svgDoc.getElementById(groupName);

var curZoom = svgDoc.documentElement.currentScale;

i = i*1.5;

curView.setAttribute("transform","translate("+j+" "+k+") scale("+ curZoom*i+")");

}

这里的i、j、k都是全局变量，分别记录缩放倍数、左右平移、上下平移的数值，这样多次缩放和平移操作就可以累加了。topview是封装所有地图元素以后的分组的id名称。

缩小、地图平移、全图显示等功能与上面的地图放大类似，都是对transform的属性进行设置。