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

基于Asp.net、SVG技术的WebGIS研究与实现摘要本文在分析了用SVG表示地理空间信息的特点后，将SVG应用到WebGIS中，系统研究的主要内容是使用、SVG技术，结合SQLServer后台数据库技术动态的生成SVG图形；利用脚本语言JavaScript和DOM技术，很好的实现了地图的缩放、平移和还原、图层的控制等WebGIS客户端功能。关键词;SVG;JavaScript;DOM;WebGIS1引言WebGIS是Internet与GIS的结合产物，也是GIS研究的一个重要方向。然而，在Web上发布信息量巨大的地理空间信息必将导致Internet网络传输速度降低，而短小灵活的矢量图形是缓解这个困境的有效手段。SVG就是一种基于XML的矢量图形格式，由于它能良好的将矢量图形展现在Web上，因而SVG可以成为GIS很好的网络载体。过去大部分学者是将svg文件以文本的形式放在客户端的，当图形比较复杂时，这对客户端的要求就比较高;本文采用SQLServer数据库存储SVG图形数据，利用调用后台数据库动态生成SVG图形，降低了客户端的要求，再使用脚本语言JavaScript和DOM技术实现图形的客户端动态交互，取得了良好的效果.2SVG表示地理空间信息SVG是一种文本性的描述语言，提供了17类80多种元素，涉及基本图形、文字、图像的显示，以及图形元素动画、超链接、颜色渐变、透明效果、滤镜效果等诸多方面。因此完全可以利用SVG来表现地理数据的空间信息和属性信息，其中空间信息按其几何形态用点对象、线对象、区域对象和注记对象来组织，而属性信息可用内嵌法和外联法两种编码来描述。点对象对于点的表示可以采用填充颜色的圆或矩形，如：circleid="point"cx="50"cy="50"r="3"style=”fill:blue”/以上代码表示以点为圆心，半径为3的蓝色实心圆，”point”是用于标识这个点。线对象将两个点连接起来就可以表示一条线，如：lineid=”line”x1="0"y1="150"x2="400"y2="150"stroke-width="2"stroke="blue"/这条代码表示连接点与点之间的一条线，这条线的宽度是2，颜色是蓝色，line是标识这条线的。区域对象可以用path或polygon表示，如：polygonpoints="350，75379，175355，175355，200345，200，345，175321，175"style=”fill:blue”/代码表示节点为的多边形，填充颜色是蓝色。注记对象可以用text表示属性数据，如：textid="text1"x="30"y="30"中国/text上述代码将在浏览器页面上的点(30，30)处输出文本“中国”，“text1”用于标识这个注记。如图1所示：图1SVG表示的点、线、区域和注记属性数据对于属性数据可采用内嵌法和外联法两种编码方法内嵌法是指将所关联的属性数据与几何数据放在同一个地物分组元素中，由于SVG未提供对属性数据的描述标记，因此在这里自定义一个GeoAttribute元素来标记属性数据，各属性项作为GeoAttribute元素的子元素依次列出。由于GeoAttribute元素是一个自定义元素，因此一般的SVG文档浏览器(如Adobe的SVGView插件)不会对该元素进行处理，当然对于非常简单的属性可以直接利用desc元素表示。外联法是指属性数据通过地物标识号存储在外部数据库中，为此，地物标识号需要进行进一步的约定，即地物标识号除了以“F”开始外，还包含地物类别号和目标标识号，其中，通过地物类别号可确定与该类地物对应的属性关系表，而通过目标标识号来定位属性表中的记录号。此外，也可直接通过超连接，将属性数据页面(通过技术动态生成)与几何数据联系起来。3基于SVG的WebGIS设计模式WebGIS的实现模型到目前主要有三种：①基于客户端；②基于服务器端；③基于服务器/客户端的混合模式。其中第三种模式集成了前面两种模式的优点，是目前比较流行的模式。同理，基于SVG的WebGIS也逃不过这三种模式，一般采用B/S三层体系结构，如图2所示图2基于SVG技术的WebGIS的体系结构首先，客户在浏览器中选择一些需要查询的数据，并向服务器端发出请求，该请求通过HTTP协议传送到服务器端。服务器端收到了请求后，就通过数据访问接口去访问相关的数据库，并把从数据库中检索到的数据转换成相应的XML格式、SVG格式和HTML格式的文件返回给客户端，这些功能都是由技术来完成的。对于地图图层控制、缩放、漫游等各种相对简单的GIS功能放在客户端操作，通过DOM和JavaScript进行开发，Web服务器只用于给客户提供数据，这些数据被保存到客户端，这样就不需要每次处理时都