用SVG技术实现基于Web的GIS - 王朝网络宽屏版

作者根据实际工作需要，在Web浏览器中采用SVG及相关技术实现了Web的GIS管理系统(以下简称WebGIS)，取得了很好的效果。此系统包括服务端及客户端的设计，服务器端出要处理数据的存储及数据的动态装载，客户端主要完成SVG数据的显示及交互。本文主要对基于SVG的WebGIS的客户端实现的一些基本知识及实现技术作一个简单介绍。

http://www.adobe.com/svg/viewer/install/main.html）上去下载，为了保证中文能正确显示，请下载简体中文版本。下载后安装程序，第一次使用时回弹出用户许可信息，点击"接受"即可。

其中embed标签指定为一个嵌入的对象，width,height分别指定该对象的宽度、高度，type指定类型为image/svg-xml ,src指定为svg数据文件的URL地址，指定这样的标签并在浏览器中打开，浏览器便回调用SVG Viewer在指定区域进行显示。此处，src指定的是一个svg文件，在GIS系统中，要求根据不同的请求获取不同的数据，则可以将其改为动态的url，如服务端的Java Servlet，由服务端动态生成。需要注意的是,SVG目前不支持GB编码，在使用中文字符时，请使用UTF-8编码。

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);//应用新的变换矩阵 }

其他的如地图缩小、全图显示、区域放大、局部定位等功能与之类似，这里就不一一作介绍。

下面的图显示GIS系统中的图层控制界面。

下图为图标的实例，这两个图标引用上面定义的symbo_1的图标：图标在地图上的实际位置为transform指定的位置分别是(200,100),(200,200)。

如果要增加图标，只要添加新的引用(use)对象即可。这些对象可以有自己的属性，表示不同的信息点，但其显示的形状是预定义的，如果修改了预定义的形状，这些图标的显示结果同样改变。下图为在WebGIS中定义的几种图标及显示效果(蓝色的为图标)。

那么通过ID "ROAD:101" 获取路径对象后，就可以获取其属性Name及Tip的信息，执行显示提示信息等功能。