基于Asp.net、SVG技术的WebGIS研究与实现

1、基于A、SVG技术的WebGIS研究与实现摘要本文在分析了用SVG表示地理空间信息的特点后，将SVG应用到ebGIS中，系统研究的主要内容是使用A、SVG技术，结合SQLServer后台数据库技术动态的生成SVG图形；利用脚本语言JavaSript和D技术，很好的实现了地图的缩放、平移和复原、图层的控制等ebGIS客户端功能。关键词A;SVG;JavaSript;D;ebGISebGIS是Internet与GIS的结合产物，也是GIS研究的一个重要方向。然而，在eb上发布信息量宏大的地理空间信息主要是以图形图像的方式必将导致Internet网络传输速度降低，而短小灵敏的矢量图形是缓解这个困境的

2、有效手段。SVG就是一种基于XL的矢量图形格式，由于它能良好的将矢量图形展如今eb上，因此SVG可以成为GIS很好的网络载体。过去大部分学者是将svg文件以文本的形式放在客户端的，当图形比拟复杂时，这对客户端的要求就比拟高;本文采用SQLServer数据库存储SVG图形数据，利用A调用后台数据库动态生成SVG图形，降低了客户端的要求，再使用脚本语言JavaSript和D技术实现图形的客户端动态交互，获得了良好的效果.SVG是一种文本性的描绘语言，提供了17类80多种元素，涉及根本图形、文字、图像的显示，以及图形元素动画、超链接、颜色渐变、透明效果、滤镜效果等诸多方面。因此完全可以利用SVG来表

3、现地理数据的空间信息和属性信息，其中空间信息按其几何形态用点对象、线对象、区域对象和注记对象来组织，而属性信息可用内嵌法和外联法两种编码来描绘。2.1点对象对于点的表示可以采用填充颜色的圆或矩形，如：irleid=pintx=50y=50r=3style=fill:blue/以上代码表示以点50，50为圆心，半径为3的蓝色实心圆，pint是用于标识这个点。2.2线对象将两个点连接起来就可以表示一条线，如：lineid=linex1=0y1=150 x2=400y2=150strke-idth=2strke=blue/这条代码表示连接点0，150与点400，150之间的一条线，这条线的宽度是2，

4、颜色是蓝色，line是标识这条线的。2.3区域对象可以用path或plygn表示，如：plygnpints=350，75379，175355，175355，202245，200，345，175321，175style=fill:blue/代码表示节点为350，75379，175335，175335，200345，175321，175的多边形，填充颜色是蓝色。2.4注记对象可以用text表示属性数据，如：textid=text1x=30y=30中国/text上述代码将在阅读器页面上的点(30，30)处输出文本“中国，“text1用于标识这个注记。如图1所示：图1SVG表示的点、线、区域和注记2.

5、5属性数据对于属性数据可采用内嵌法和外联法两种编码方法内嵌法是指将所关联的属性数据与几何数据放在同一个地物分组元素中，由于SVG未提供对属性数据的描绘标记，因此在这里自定义一个GeAttribute元素来标记属性数据，各属性项作为GeAttribute元素的子元素依次列出。由于GeAttribute元素是一个自定义元素，因此一般的SVG文档阅读器(如Adbe的SVGVie插件)不会对该元素进展处理，当然对于非常简单的属性可以直接利用des元素表示。外联法是指属性数据通过地物标识号存储在外部数据库中，为此，地物标识号需要进展进一步的约定，即地物标识号除了以“F开场外，还包含地物类别号和目的标识号

6、，其中，通过地物类别号可确定与该类地物对应的属性关系表，而通过目的标识号来定位属性表中的记录号。此外，也可直接通过超连接，将属性数据页面(通过ASP.net技术动态生成)与几何数据联络起来。ebGIS的实现模型到目前主要有三种：基于客户端；基于效劳器端；基于效劳器/客户端的混合形式。其中第三种形式集成了前面两种形式的优点，是目前比拟流行的形式。同理，基于SVG的ebGIS也逃不过这三种形式，一般采用B/S三层体系构造，如图2所示：图2基于SVG技术的ebGIS的体系构造首先，客户在阅读器中选择一些需要查询的数据，并向效劳器端发出恳求，该恳求通过HTTP协议传送到效劳器端。效劳器端收到了恳求后，

7、就通过数据访问接口去访问相关的数据库，并把从数据库中检索到的数据转换成相应的XL格式、SVG格式和HTL格式的文件返回给客户端，这些功能都是由A技术来完成的。对于地图图层控制、缩放、遨游等各种相对简单的GIS功能放在客户端操作，通过D和JavaSript进展开发，eb效劳器只用于给客户提供数据，这些数据被保存到客户端，这样就不需要每次处理时都访问效劳器，极大地减少了网络数据传输量和效劳器的负担。客户也可以对原始数据进展分析、提取数据、解析。而对于一些复杂的操作如空间分析、图层编辑等，那么需要与效劳器进展交互实现。中间件主要完成SVG/XL数据形式和传统的DBS的数据库形式间转换工作。该系统采用

8、SQLServer存储SVG图形数据，利用A调用后台数据库动态生成SVG图形，再使用脚本语言JavaSript和D技术实现图形的动态交互，图3是系统的主界面。4.1地图的缩放、平移和复原在SVG中，通过修改SVG根元素的viebx属性，可以改变地图的显示范围。viebx的属性由4个参数组成，前2个表示显示范围里最小点的X坐标和Y坐标，即显示范围的顶点，后2个表示从该点开场，横、纵方向上分别前进多少个坐标单位，以构成整个显示范围。例如，viebx=00100100，表示显示范围是从(0，0)点开场，窗口长为100个坐标单位，宽为100个坐标单位。进展根本地图操作时，均可以通过操作viebx得到理

9、想的结果。地图缩放时将后2个参数分别乘以(除以)某个倍数就可以得到缩放后的窗口大小;地图平移时，后2个参数不变，修改前2个参数，指定新的起点坐标即可。地图复位时，将viebx恢复为原始值即可完成复位操作。下面是地图复原功能的代码：funtinriginVie()RerdVieBx();vareSVG=dSVG.getDuentEleent();varriginVie=00600500;eSVG.setAttribute(vieBx，riginVie);4.2图层的控制由于在SVG地图阅读器中所操作的SVG地图是以分层的方式进展组织的，在该数据组织形式中，属于一个图层的地理特征数据组织在同一个分

10、组元素下，且该分组元素的ID属性设置为图层的名称，这样对图层的显示控制就比拟容易。首先通过图层名称在SVGD树中找到对应的分组元素，然后将该元素的style属性值设置为display:nne或display:inline，即可到达对图层的关闭与显示，如图4所示。funtinhilite_ele(hekbx，eleent_nae)varsvgbj=duent.ebedsHUNNUebGIS_SVG.getSVGDuent().getEleentById(eleent_nae);if(!hekbx.heked)svgbj.setAttributeNS(null,style,display:nne;

11、fill-rule:evendd);elsesvgbj.setAttributeNS(null,style,display:inline;fill-rule:evendd);图3系统的主界面4.3简单的属性查询由于每一块图形区域都是用path途径表示的，可以在path中参加nlik事件，再用javasript语言编写nlik事件代码。当用鼠标单击图形区域时，就会弹出一个对话框，显示该区域的属性信息，如图5所示。图4城市区域图层隐藏效果图5属性查询4.4坐标的显示在每个g图层中参加nuseve=hangeText(evt)，通过javasript编写hangeText(evt)函数，从而实现图形

12、坐标的显示。funtinhangeText(evt)targetXtext=svgDuent.getEleentById(XPs);targetYtext=svgDuent.getEleentById(YPs);varXPs=evt.getlientX();varYPs=evt.getlientY();varneXPsText=svgDuent.reateTextNde(X坐标:+XPs);varneYPsText=svgDuent.reateTextNde(Y坐标:+YPs);targetXtext.replaehild(neXPsText,targetXtext.getFirsthild(

13、);targetYtext.replaehild(neYPsText,targetYtext.getFirsthild();4.5测量间隔 当图形中点的坐标捕获到时，测量两点之间的间隔 就很容易实现了，只需要编写一个函数实现两点之间间隔 的数学函数式：，此时得到的间隔 是只是图形上的间隔 ，假如要获得地物之间的实际间隔 ，还需要除以比例尺。系统使用A、SVG技术，结合SQLServer后台数据库技术动态的生成SVG图形;利用SVG、JavaSript和D技术很好实现了ebGIS客户端功能，结果说明该方法是可行的.对于更复杂的GIS功能实现，如空间分析、图形编辑等将是笔者以后进一步研究的方向。1刘啸，毕永年.基于