用SVG技术实现基于Web的GIS.docVIP

用SVG技术实现基于Web的GIS 级别: 中级 林恩德软件工程师2003 年 8 月 本文主要对基于SVG的WebGIS的客户端实现的一些基本知识及实现技术作一个简单介绍。 引言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的网站（ /svg/viewer/install/main.html）上去下载，为了保证中文能正确显示，请下载简体中文版本。下载后安装程序，第一次使用时回弹出用户许可信息，点击接受即可。 在网页中嵌入SVG将实现基于浏览器的GIS系统，需要将SVG图形对象嵌入到网页中，使用如下HTML代码来实现： embed width=640 height=560 type=image/svg-xml id=svgmapctrl pluginspage=/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本身提供图形的缩放功能，但要