摘要 本文在分析了用SVG表示地理空间信息的特点后，将SVG应用到WebGIS中，系统研究的主要内容是使用Asp.net、SVG技术，结合SQL Server后台数据库技术动态的生成SVG图形；利用脚本语言Javascrīpt和DOM技术，很好的实现了地图的缩放、平移和还原、图层的控制等WebGIS客户端功能。

关键词 Asp.net; SVG; Javascrīpt; DOM; WebGIS

1 引言

WebGIS是 Internet与GIS的结合产物，也是GIS研究的一个重要方向。然而，在Web上发布信息量巨大的地理空间信息（主要是以图形图像的方式）必将导致Internet网络传输速度降低，而短小灵活的矢量图形是缓解这个困境的有效手段。SVG就是一种基于 XML的矢量图形格式，由于它能良好的将矢量图形展现在Web上，因而SVG可以成为GIS很好的网络载体。过去大部分学者是将svg文件以文本的形式放在客户端的，当图形比较复杂时，这对客户端的要求就比较高;本文采用SQL Server数据库存储SVG图形数据，利用Asp.net调用后台数据库动态生成SVG图形，降低了客户端的要求，再使用脚本语言Javascrīpt和DOM技术实现图形的客户端动态交互，取得了良好的效果.

2 SVG表示地理空间信息

SVG 是一种文本性的描述语言，提供了17 类80 多种元素，涉及基本图形、文字、图像的显示，以及图形元素动画、超链接、颜色渐变、透明效果、滤镜效果等诸多方面。因此完全可以利用SVG 来表现地理数据的空间信息和属性信息，其中空间信息按其几何形态用点对象、线对象、区域对象和注记对象来组织，而属性信息可用内嵌法和外联法两种编码来描述。

2.1 点对象

对于点的表示可以采用填充颜色的圆或矩形，如：

以上代码表示以点（50，50）为圆心，半径为3的蓝色实心圆，”point”是用于标识这个点。

2.2 线对象

将两个点连接起来就可以表示一条线，如：

<line id=”line” x1="0" y1="150" x2="400" y2="150" stroke-width="2" stroke="blue"/>
这条代码表示连接点（0，150）与点（400，150）之间的一条线，这条线的宽度是2，颜色是蓝色，line是标识这条线的。

2.3 区域对象

可以用path或polygon表示，如：

代码表示节点为（350，75）（379，175）（335，175）（335，200）（345，175）（321，175）的多边形，填充颜色是蓝色。

2.4 注记对象

可以用text表示属性数据，如：

上述代码将在浏览器页面上的点(30，30)处输出文本“中国”，“text1”用于标识这个注记。如图1所示：

图1 SVG表示的点、线、区域和注记

2.5 属性数据

对于属性数据可采用内嵌法和外联法两种编码方法内嵌法是指将所关联的属性数据与几何数据放在同一个地物分组元素中，由于SVG未提供对属性数据的描述标记，因此在这里自定义一个< GeoAttribute>元素来标记属性数据，各属性项作为<GeoAttribute>元素的子元素依次列出。由于< GeoAttribute>元素是一个自定义元素，因此一般的SVG文档浏览器(如Adobe的SVG View插件)不会对该元素进行处理，当然对于非常简单的属性可以直接利用<desc>元素表示。

外联法是指属性数据通过地物标识号存储在外部数据库中，为此，地物标识号需要进行进一步的约定，即地物标识号除了以“F”开始外，还包含地物类别号和目标标识号，其中，通过地物类别号可确定与该类地物对应的属性关系表，而通过目标标识号来定位属性表中的记录号。此外，也可直接通过超连接，将属性数据页面(通过ASP.net技术动态生成)与几何数据联系起来。

3 基于SVG的WebGIS设计模式

WebGIS的实现模型到目前主要有三种：①基于客户端；②基于服务器端；③基于服务器/客户端的混合模式。其中第三种模式集成了前面两种模式的优点，是目前比较流行的模式。同理，基于SVG的WebGIS也逃不过这三种模式，一般采用B/S三层体系结构，如图2所示：

图2 基于SVG技术的WebGIS的体系结构

首先，客户在浏览器中选择一些需要查询的数据，并向服务器端发出请求，该请求通过HTTP协议传送到服务器端。服务器端收到了请求后，就通过数据访问接口去访问相关的数据库，并把从数据库中检索到的数据转换成相应的XML格式、SVG格式和 HTML格式的文件返回给客户端，这些功能都是由Asp.net技术来完成的。对于地图图层控制、缩放、漫游等各种相对简单的GIS功能放在客户端操作，通过DOM 和Javascrīpt进行开发，Web服务器只用于给客户提供数据，这些数据被保存到客户端，这样就不需要每次处理时都访问服务器，极大地减少了网络数据传输量和服务器的负担。客户也可以对原始数据进行分析、提取数据、解析。而对于一些复杂的操作如空间分析、图层编辑等，则需要与服务器进行交互实现。中间件主要完成SVG/XML数据模式和传统的DBMS的数据库模式间转换工作。

4 实例

该系统采用SQL Server存储SVG图形数据，利用Asp.net调用后台数据库动态生成SVG图形，再使用脚本语言Javascrīpt和DOM技术实现图形的动态交互，图3是系统的主界面。

4.1 地图的缩放、平移和还原

在SV G 中，通过修改SV G 根元素的view box 属性，可以改变地图的显示范围。view box 的属性由4个参数组成，前2 个表示显示范围里最小点的X 坐标和Y 坐标，即显示范围的顶点，后2 个表示从该点开始，横、纵方向上分别前进多少个坐标单位，以构成整个显示范围。例如， view box= "0 0 100 100" ，表示显示范围是从(0， 0) 点开始，窗口长为100 个坐标单位，宽为100 个坐标单位。进行基本地图操作时，均可以通过操作view box 得到理想的结果。地图缩放时将后2 个参数分别乘以(除以) 某个倍数就可以得到缩放后的窗口大小; 地图平移时，后2 个参数不变，修改前2 个参数，指定新的起点坐标即可。地图复位时，将view box 恢复为原始值即可完成复位操作。下面是地图还原功能的代码：

function OriginView()

{

RecordViewBox();

var docSVG = document.HUNNUWebGIS_SVG.getSVGDocu ment();

var eSVG = docSVG.getDocumentElement();

var ōriginView = "0 0 600 500";

eSVG.setAttribute("viewBox"，originView);

4.2 图层的控制

由于在SVG地图浏览器中所操作的SVG地图是以分层的方式进行组织的，在该数据组织模式中，属于一个图层的地理特征数据组织在同一个分组元素下，且该分组元素的ID属性设置为图层的名称，这样对图层的显示控制就比较容易。首先通过图层名称在SVG DOM树中找到对应的分组元素，然后将该元素的style属性值设置为'display:none或display:inline，即可达到对图层的关闭与显示，如图4所示。

function hilite_elem(checkbox， element_name){

var svgobj = document.embeds['HUNNUWebGIS_SVG']. getSVGDocument().getElementById(element_name);

if (!checkbox.checked){

// 隐藏图层.

svgobj.setAttributeNS(null,'style', 'display:none;fill-rule:evenodd');

} else {

// 显示图层.

svgobj.setAttributeNS(null,'style', 'display:inline;fill-rule:evenodd');

}

图3 系统的主界面

4.3 简单的属性查询

由于每一块图形区域都是用<path>路径表示的，可以在<path>中加入onclick事件，再用javascrīpt语言编写onclick事件代码。当用鼠标单击图形区域时，就会弹出一个对话框，显示该区域的属性信息，如图5所示。

图4 城市区域图层隐藏效果图5 属性查询

4.4 坐标的显示

在每个<g>图层中加入οnmοusemοve="changeText(evt)"，通过javascrīpt编写changeText(evt)函数，从而实现图形坐标的显示。

function changeText(evt)

{

targetXtext=svgDocument.getElementById("XPos");

targetYtext=svgDocument.getElementById("YPos");

var XPos = evt.getClientX();

var YPos = evt.getClientY();

var newXPosText = svgDocument.createTextNode("X 坐标 : " + XPos);

var newYPosText = svgDocument.createTextNode("Y 坐标 : " + YPos);

targetXtext.replaceChild(newXPosText,targetXtext.getFirstChild());

targetYtext.replaceChild(newYPosText,targetYtext.getFirstChild());

}

4.5 测量距离

当图形中点的坐标捕获到时，测量两点之间的距离就很容易实现了，只需要编写一个函数实现两点之间距离的数学函数式：

，此时得到的距离是只是图形上的距离，如果要获得地物之间的实际距离，还需要除以比例尺。

5 结语

系统使用Asp.net、SVG技术，结合SQL Server后台数据库技术动态的生成SVG图形;利用SVG、Javascrīpt和DOM技术很好实现了WebGIS客户端功能，结果表明该方法是可行的.对于更复杂的GIS功能实现，如空间分析、图形编辑等将是笔者以后进一步研究的方向。

参考文献

[1] 刘啸，毕永年.基于XML的SVG应用指南[Z].北京科海集团公司，2001，10—12

[2] W 3C. Scalable Vector Graphics 1.1 Specification.

http: //www. w3. org/T R/2003/R EC -SVG11- 20030114/,2003

[3] 宋国民，蒋敏等.基于SVG的地理信息可视化表达及网络发布的研究[J].信息仿真学报，2006，18（增刊1）：301

[4] 冯艳杰.基于SVG的WebGIS实现技术[D].武汉：武汉大学，2005

[5] 史同广，张子民等.WebGIS实现模式及其技术评价[J].山东建筑工程学院学报，2005，20（1）：92

收稿日期：5月18日修订日期：5月23日

作者简介：邓晓斌（1983—），男，江西鹰潭人，硕士研究生，主要研究方向：WebGIS

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

动态网页大作业 - 简单易懂【附源码分享】- 基于ASP、Ajax技术
这是突击一个星期的菜鸡作业,提供给大家进行分享学习,是基于ASP.VBScript的旅客主题动态网站,有登录注册.在线留言功能,连接了本地数据库,需要配置好IIS环境,然后把文件夹放到IIS文件夹中, ...
基于ASP.NET AJAX技术开发在线RSS阅读器（下篇）
五.逻辑层设计 (一)添加RSS频道在展开真正的逻辑层设计之前,先让我们简单地浏览一下下面的草图4.图4展示了我对于两个重要ASP.NET AJAX客户端控件-ListView和DataSource ...
基于ASP.NET技术的企业办公自动化系统的设计
摘要本文在研究了通用型办公自动化系统的设计方法和某些技术难点的解决方案后,设计了一种基于ASP.NET的网络协同办公自动化系统.系统在结构上采用基于B/S的三层架构的设计模型:在数据访问 ...
MPB：生态环境中心陈保冬组-基于高通量测序技术的丛枝菌根真菌多样性研究方法...
为进一步提高<微生物组实验手册>稿件质量,本项目新增大众评审环节.文章在通过同行评审后,采用公众号推送方式分享全文,任何人均可在线提交修改意见.公众号格式显示略有问题,建议电脑端点击文末阅 ...
基于 Asp.Net的 Comet 技术解析
Comet技术原理来自维基百科:Comet是一种用于web的技术,能使服务器能实时地将更新的信息传送到客户端,而无须客户端发出请求,目前有两种实现方式,长轮询和iframe流. 简单的说是一种基于现 ...
WCF技术剖析之六：为什么在基于ASP.NET应用寄宿（Hosting）下配置的BaseAddress无效...
WCF技术剖析之六:为什么在基于ASP.NET应用寄宿(Hosting)下配置的BaseAddress无效原文:WCF技术剖析之六:为什么在基于ASP.NET应用寄宿(Hosting)下配置的Bas ...
计算机应用网络管理开发,基于XML的iBAC网络管理系统的研究与开发-计算机应用技术专业论文.docx...
ⅢY ⅢY iii■l 洲8 mmj■I ㈣0 Ⅲ4 6 ㈣2 学位论文数据集中图分类号TP311．1学科分类号520．3040 论文编号10010200705 12密级学位授予单位代码10010 ...
电影网站 php asp,moviewebsite 这是一个电影网站的源码，基于asp技术实现.仅供交流学习 WEB(ASP,PHP,...) 238万源代码下载- www.pudn.com...
文件名称: moviewebsite下载收藏√ [ 5 4 3 2 1 ] 开发工具: ASP 文件大小: 7432 KB 上传时间: 2013-07-11 下载次数: 0 提供者: ...
341.基于高通量测序的微生物组研究技术简介
基于高通量测序的微生物组研究技术简介 --微生物组研究,从方案设计到写作套路(一) 作者:王晓雯凌波微课版本1.0.2,更新日期:2020年9月22日微生物组研究的热潮愈演愈烈,已经深入到我们生 ...

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