毕业设计:asp.net基于SVG的自动站雨量分析系统论文(源代码+论文)

目  录

论文总页数:25页

1 引言... 1

1.1 项目背景... 1

1.2 本项目的应用价值... 1

1.3 本项目的相关开发技术... 1

2 SVG技术... 1

2.1 XML介绍... 1

2.2 SVG介绍... 2

2.3 SVG的特点... 2

2.4 SVG规范... 2

3 雨量分析系统的需求分析... 4

3.1 系统需求... 4

3.2 功能分析... 4

3.3 用例分析... 5

4 雨量分析系统的设计... 6

4.1 系统模块结构... 6

4.2 数据库的设计... 7

4.2.1 总体设计... 7

4.2.2 数据库表字段说明... 8

4.3 开发技术及过程... 10

4.3.1 三层架构... 10

4.3.2 SVG文档的表示... 14

5 系统实现... 15

5.1 雨量数据管理的实现... 15

5.2 雨量数据分析与SVG图像的生成... 16

5.3 使用Web Service方式提供开放的外部接口... 20

5.3.1 Web Service介绍... 20

5.3.2 使用Web Service的意义... 20

5.3.3 Web Service接口的实现... 21

6 系统测试... 21

结    论... 22

参考文献... 22

致    谢... 24

声    明... 25

1 引言

1.1 项目背景

雨量监测对于工农业生产以及人民生活中的灾害预防、有效利用水资源具有重要意义,建立完整高效的雨量监测系统显得非常有必要。雨量分析系统是应用于防汛、水文等部门的,用于辅助分析自动气象站雨量监测的数据。雨量分析系统通常都会生成一些图表,但由于这些图表是二进制格式的,其可重用性不高,而且这些系统通常都缺乏开放性,大量的数据无法提供给外部研究人员使用,造成资源浪费。

该自动站雨量分析系统在雨量分析领域中作了新的尝试,它采用了基于XML(eXtensible Markup Language,可扩展标记语言)的开放的SVG(Scalable Vector Graphics,可伸缩矢量图形)作为图形格式,在引入先进技术的同时,提高了系统的可重用性,而且该系统与Web服务的结合也使系统的开放性大大地提高。作为示例,该系统要实现对四川省部分市县的城市及雨量数据进行管理与分析,能查询各市县的历史雨量数据并以SVG格式的曲线图显示出来,实现简单地统计分析功能。作为一个完整的系统,还要实现对系统内各个模块以及用户权限的管理。

1.2 本项目的应用价值

本套系统是基于SVG的雨量分析系统,实现的主要功能是对各地收集的雨量数据加以分析,并以SVG矢量图形方式进行显示,使用户能够更加直观地了解某一区域的历史雨量。雨量分析系统主要应用于防汛、水文等部门,通过对各地雨量数据的统计与分析,来预防可能会造成的洪水灾害并有效的调配和利用水资源。

1.3 本项目的相关开发技术

该项目采用.NET开发,开发环境采用Visual Studio 2003,数据库采用MSSQLServer,并使用.NET的三层架构技术,使业务逻辑与数据表示隔离开来,提高系统的模块化程序;在图像显示上使用了基于XML的矢量图形语言SVG,并使用.NET XML DOM(Document Object Model,文档对象模型)来生成和操作SVG图形;并使用Web服务来提供外部接口,以提高系统的开放性。

2 SVG技术

2.1 XML介绍

XML是可扩展标记语言的简称,它定义了结构化表示数据的标准格式。XML是W3C(World Wide Web Consortium,万维网联盟)为适应互联网的发展而推出的新型Web语言,是国际标准化组织所制订的SGML(Standard Generalized Markup Language,标准通用标记语言)的子集。它是用于定义其他标识语言的一种元语言。它具有可扩展性、平台独立性、数据与表现分离以及结构化数据等特点,非常适合网络环境下的数据传输和表达。XML通过其可扩展性提供了一种通用的数据格式,不同的软件系统之间可以通过这种新的数据描述方式进行通信,从而实现完全的交互操作,这源于XML将结构化的数据表示为一个纯文本的特性。可以通过XML对信息加以规范化定义和描述,并且在互联网上进行数据的传输。SVG就是XML在图形图像领域的一个应用。

2.2 SVG介绍

SVG是一种基于XML的开放的标准文本式矢量图形描述语言,即它是用XML元语言定义的语言。SVG图像是与XML1.0兼容的文档,SVG元素是指示如何绘制图像的一些指令,阅读器解释这些指令,把SVG图像在指定设备上显示出来。使用SVG可以在网页上显示出各种各样的高质量的矢量图形,包括许多图像处理中常见的功能,如图形、文字、动画、颜色、滤镜效果等。最关键的是SVG完全用普通文本来描述,也就是说,这是一种专门为网络而设计的基于文本的图像格式。由于SVG是基于XML的,所以可扩展性很强,能够描述任何复杂的图像,甚至动态交互式图像。

2.3 SVG的特点

虽然SVG的“矢量描述”并不是一个全新的概念,但它综合了矢量图形、点阵图像和纯文字的优点,以一种标准将其统一起来描述。它由计算机根据矢量数据计算后绘制而成,相较于位图图像矢量图像有以下特点:(1)文件的大小与图形的复杂程度有关,而与图形的具体尺寸无关;(2)图形的显示尺寸可以无限缩放,变化后不影响图形的质量。正是由于矢量图像的这些特征,使得它尤其适合于网上传播。图片和交互在以前是两个独立的概念,而在SVG中,文字与图形并非封装于SVG内,而是可以借助DOM和脚本语言等手段与外界交互,使得在图片内进行交互成为可能,这是以往的图像所不能做到的。统一的标准和开放性是SVG的强大生命力所在。标准统一可增强网络的交流,结束目前业界各种格式并存的混乱局面;开放性则有利于日后的各种新的元素加入其中扩充其功能。SVG使用时,客户端的软件负责解释SVG文本并将其转化成实际的矢量图像,文字仍是文字,线条仍是线条,可在客户端即时修改,这也是SVG的一大特色。

2.4 SVG规范

SVG规范定义了6种类型的对象,包括矢量图形、图像、渐变填充、滤镜、可重用单元和文本。图形对象可以进行组合、添加样式、几何变换等操作。根据功能不同,这些主要对象可归结为基本要素对象和页面描述功能对象两大类,具体请见图1和图2所示。

图1 SVG基本要素

图2 SVG页面描述功能

框架元素,就是组成一个完整SVG文档的基本元素,主要包括<svg>、<g>、<desc>元素和<title>元素等等。<svg>元素是文档元素,必不可少的,它相当于指定一块画布,内部的所有图形元素都将显示在这块画布指定的区域中。因此它有一些标记位置的属性像x,y,width,height。<desc>和<title>元素是用来描述图像的注释性元素。还有一些表示基本图形的标记,如rect,circle等等,SVG图形就是通过组合这些基本的元素和组件,来生成复杂的图形的。

3 雨量分析系统的需求分析

3.1 系统需求

需求分析是一种软件工程活动,它在系统需求工程和软件设计间起到桥梁的作用,主要任务是将用户的需求变为软件的功能和性能描述。基于SVG的自动站雨量分析系统要实现对四川省部分市县及其雨量数据进行管理与分析,能够以各种时间方式查询各市县的历史雨量数据并以SVG格式的曲线图显示出来,要求实现简单地统计分析功能,例如统计同一时间段内两个不同地区的雨量数据,对其进行分析,并生成SVG图形以辅助工作人员判断某一时间数据点过高的城市是否有发生灾害的可能性。作为一个完整的系统,还要能够管理系统内各个模块及设置不同用户的权限。由于会涉及到大量数据,因此要有对数据库的管理,实现数据备份功能,以保障数据的安全性。

系统功能模块主要包括以下几个方面:

1、系统管理;

2、雨量数据管理;

3、城市信息管理;

4、前台管理;

5、数据备份。

3.2 功能分析

以下按照不同的模块进行功能描述:

1、系统管理实现以下四个功能:

(1)模块管理:管理系统中所有模块,对模块进行添加、更新及删除;

(2)用户管理:添加系统用户,选择对应的角色,对系统中已有用户进行更新(包括登陆密码及角色)、删除;

(3)角色管理:新增、更新、删除系统角色,分配角色权限;

(4)日志管理:能根据选择条件对已有日志进行查询、删除和下载。

2、雨量数据管理页面管理后台的所有雨量数据,有如下功能:

(1)数据查看:可根据选择条件(包括日期和城市选择)显示雨量数据,也可根据选择的显示方式,以SVG图形方式查看雨量数据;

(2)数据录入:选择某一城市后,可以选择任意一天进行雨量数据输入;

(3)数据更新:在选定城市某一天的雨量数据后,点击更新可以修改雨量数据。

3、城市信息管理页面管理地图页面中出现的所有城市的雨量数据,通过输入城市名及选择上级城市新增城市数据,也可以对已有城市数据进行更新(修改名称或上级城市)、删除操作。

4、前台管理页面放置了将前台查询页面,这一模块是整个系统的重点部分,包括地图管理、选择显示方式、选择查询方式并生成图形显示页面。区别于其它系统,本套系统对于数据图形使用了SVG这种文本式矢量图形描述语言。

用户查询数据,并生成SVG曲线图的操作流程如图3所示。

图3 SVG页面描述功能

5、系统的数据备份操作能够实现将数据库文件备份到本机上的指定目录下,需要时再进行数据恢复,以保证数据的安全性。备份管理有如下功能:

(1)数据备份:利用SQLServer的备份操作backup database进行数据备份;

(2)数据恢复:利用SQLServer的恢复操作restore database进行数据恢复。

3.3 用例分析

系统全局管理员用例图如图4所示。

图4 系统全局管理员用例图

4 雨量分析系统的设计

4.1 系统模块结构

系统主要分为系统管理、雨量数据管理、城市信息管理、前台管理等几大模块,其结构关系如图5所示。

图5 系统模块结构

4.2 数据库的设计

4.2.1 总体设计

数据库的E-R模型图如图6所示。图6中,用户在具有某些角色之后,才有权限使用系统功能,而不能直接使用,因此设计中将角色与系统功能关联起来,并将用户与系统功能隔离开来;日志的生成是在用户使用系统功能的过程中自动生成的,其中需要保存当前用户的ID和对应的系统功能的ID。

图6 数据库E-R图

4.2.2 数据库表字段说明

1、城市数据表(City)存储的是地图上所有城市的相关信息,具体见表1所示。

表1 城市数据表

字段

字段名

数据类型

长度

允许为空

备注

1

CityId

char

10

城市号

2

CityName

varchar

100

城市名称

3

FatherCityId

char

10

上级城市号

4

OrderId

bigint

8

排序号

5

CityDes

varchar

500

城市描述

2、每小时降雨量表(RainPerHour)存储的是城市中具体一天24小时的雨量数据,Hour01表示0~1时的雨量数据,依此类推,中间省略部分行,具体见表2所示。

表2 雨量数据表

字段

字段名

数据类型

长度

允许为空

备注

1

RecordID

varchar

10

记录号

2

CityID

char

10

城市号

3

Year

varchar

10

4

Month

varchar

10

5

Day

varchar

10

6

Hour01

varchar

10

0~1小时

7

Hour12

varchar

10

1~2小时

8

Hour23

varchar

10

2~3小时

9

……

varchar

10

10

Hour2223

varchar

10

22~23小时

11

Hour2324

varchar

10

23~24小时

3、模块表(Func)存储的是系统中所有模块的信息,具体见表3所示。

表3 模块信息表

字段

字段名

数据类型

长度

允许为空

备注

1

FuncId

varchar

110

模块号

2

FuncName

varchar

50

模块名称

3

FatherFunc

varchar

10

上级模块号

4

PagePath

varchar

100

页面路径

5

OrderId

bigint

8

排序号

6

Des

varchar

200

描述

7

SystemId

varchar

10

4、日志表(Log)中存储管理员对某一模块进行添加、修改等操作的记录,无论成功与否,系统都会自动记录相应的信息,具体见表4所示。

表4 日志信息表

字段

字段名

数据类型

长度

允许为空

备注

1

LogId

varchar

10

日志号

2

OptTime

datetime

8

操作时间

3

OptDes

varchar

100

操作描述

4

OptResult

varchar

1

操作结构

5

OptType

varchar

1

操作类型

6

UserId

varchar

10

用户号

7

FuncId

varchar

110

模块号

8

OptIP

char

10

操作者IP

5、用户表(User)中存储用户登陆系统的ID号、名称和密码等信息,具体见表5所示。

表5 用户表

字段

字段名

数据类型

长度

允许为空

备注

1

UserId

varchar

10

用户号

2

UserName

datetime

50

用户名

3

UserPwd

varchar

50

密码

6、用户角色关系表(UserRoleRel)存储用户在系统中属于哪一角色的信息,具体见表6所示。

表6 用户角色关系表

字段

字段名

数据类型

长度

允许为空

备注

1

UserId

varchar

10

用户号

2

RoleId

varchar

10

角色号

7、角色表(Role)存储每一个角色的角色名及对它权限的描述,具体见表7所示。

表7 角色表

字段

字段名

数据类型

长度

允许为空

备注

1

RoleId

varchar

10

角色号

2

RoleName

varchar

50

角色名

3

Des

varchar

200

权限描述

8、角色权限关系表(RoleFuncRel)存储角色对于某一模块是否具有读取、增加、更新、删除等操作的权限,具体见表8所示。

表8 角色权限关系表

字段

字段名

数据类型

长度

允许为空

备注

1

FuncId

varchar

110

模块号

2

RoleId

varchar

10

角色号

3

PRead

char

1

读取

4

PAdd

char

1

增加

5

PUpdate

char

1

更新

6

PDelete

char

1

删除

4.3 开发技术及过程

4.3.1 三层架构

三层架构也称三层体系结构,即表现层、业务逻辑层和数据访问层。表现层主要指用户界面,它要求尽可能的简单,使最终用户不需要进行任何培训就能方便地访问信息;第二层就是业务逻辑层,也就是常说的中间件,所有的应用系统、应用逻辑、控制都在这一层,系统的复杂性也主要体现在业务逻辑层;最后的数据访问层存储大量的数据信息和数据逻辑,所有与数据有关的安全、完整性控制、数据的一致性、并发操作等都是在第三层完成。三层架构的层次关系见图7所示。

图7 三层架构示意图

这些层相互之间独立性好,可以单独开发,单独测试。三层架构另一个优点是它的安全性,客户端只能通过上一层来访问下一层的服务,减少了入口点,把很多危险的系统功能都屏蔽了。

表现层位于最上层,离用户最近,用于显示数据和接收用户输入的数据,为用户提供一种交互式操作的界面。通过表现层,用户输入数据、获取数据。表现层同时也提供一定的安全性,确保用户没有机会看到机密的信息。中间的业务逻辑层是表现层和数据访问层的桥梁,它响应表现层的用户请求,负责处理用户输入的信息,或者是将这些信息发送给数据访问层进行保存,或者是调用数据访问层中的函数再次读出这些数据。业务逻辑层也可以包括一些对“商业逻辑”描述的代码在里面。数据访问层定义和维护数据的完整性、安全性,它响应业务逻辑层的请求来访问数据,仅实现对数据的保存和读取操作。访问的数据可以是数据库系统、二进制文件、文本文档或是XML文档等等。

本项目中.NET三层架构中各个包之间的关系结构如图8所示。

图8 三层架构名称空间关系图

其中,Model命名空间中的类对应于数据库中的表,为整个架构提供方便的数据表示形式;IDAL和SQLServerDAL对应于数据访问层,IDAL命名空间中定义了一整套用于操作数据库的接口,具体的数据访问操作在SQLServerDAL命名空间中实现;DALFactory命名空间中定义了获取数据访问操作的方法,在BLL命名空间中,就使用这些方法来获取符合IDAL中定义的接口的对象,再用它来对数据库进行操作,显然它们属于业务逻辑层;而表现层对应于前台页面代码,包括获取用户响应和请求,再通过BLL来获取数据并返回给用户。

下面给出具体例子说明数据和指令是如何在各层之间流动和传递的。

首先,表现层中的某一对象调用业务逻辑层BLL中的Add函数,来向数据库中添加数据:

BLL.SVGRAS_City.Add(city);

其中city是Model.City类型的参数,BLL.SVGRAS_City.Add为被调用方法的完整路径。

此时,数据流向业务逻辑层,指令执行到业务层,如下:

public static string Add(SVGRAS.Model.SVGRAS_City model)

{

       ISVGRAS_City dal=SVGRAS.DALFactory.SVGRAS_City.Create();

       return dal.Add(model);

}

业务层接收到表现层传入的参数model,首先进行业务逻辑处理(比如数据完整性,合法性以及其他一些业务处理),然后调用工厂中相应的方法来创建相应的SQLServerDAL对象,以获得访问数据访问层的对象。

工厂类中对应方法如下:

public static SVGRAS.IDAL.ISVGRAS_City Create()

{

       SQLServerDAL.SVGRAS_City obj=new SQLServerDAL.SVGRAS_City();

       return obj;

}

此时,数据流向数据访问层,指令执行到数据访问层:

public string Add(SVGRAS.Model.SVGRAS_City model)

{

       model.CityID=Common.GetNextIdByTable("SVGRAS_City","CityID","SingleLayer",null,10);

       model.OrderID=model.CityID;

       StringBuilder strSql=new StringBuilder();

       strSql.Append("insert into SVGRAS_City(CityID,FatherCityID,OrderID, CityName,CityDes) values (");

       strSql.Append("'"+model.CityID+"',");

       strSql.Append("'"+model.FatherCityID+"',");

       strSql.Append(""+model.OrderID+",");

       strSql.Append("'"+model.CityName+"',");

       strSql.Append("'"+model.CityDes+"')");

       DbHelperSQL.ExecuteSql(strSql.ToString());

       return model.CityID;

}

在数据访问层,通过调用存储过程的方式,将数据传递到数据库,并执行相应的操作。DbHelperSQL.ExecuteSql()表示封装好的方法,strSql.ToString()放置添加语句。此时,调用DbHelperSQL.ExecuteSql(),执行SQL语句。

public static int ExecuteSql(string SQLString)

{

       using (SqlConnection connection = new SqlConnection(connectionString))

       {

              using (SqlCommand cmd = new SqlCommand(SQLString,connection))

              {

                     try

                     {

                            connection.Open();

                            int rows=cmd.ExecuteNonQuery();

                            return rows;

                     }

                     catch(System.Data.SqlClient.SqlException E)

                     {

                            connection.Close();

                            throw new Exception(E.Message);

                     }

              }

       }

}

到此,完成了一条城市数据的添加操作。

4.3.2 SVG文档的表示

SVG文档的生成使用了.NET XML程序集,它提供了一整套封装了XML操作的类,可以很方便的创建和处理XML文档,它的整体结构符合文档对象模型的定义。将SVG文档用DOM表示,其结构见图9所示。

图9 SVG文档的DOM对象结构

图9对应的XML文档部分代码如下:

<?xml version="1.0" standalone="yes"?>
<svg viewBox="0 0 500 600">
  <text x="10" y="20" stroke="red">
    成都信息工程学院
  </text>
</svg>

5 系统实现

5.1 雨量数据管理的实现

在雨量数据管理页面中进行雨量数据录入时,必须先选中要添加雨量数据的城市及日期,点击“确定”后系统首先查看是否有该城市这一天的数据,有的话就直接显示,没有的话会创建一条新的雨量数据记录,自动生成随机数作为这一天24小时的雨量数据,并将数据写入数据库中。这里创建新雨量数据记录是基于三层架构来做的,首先创建Model.SVGRAS_RainPerHour对象,然后将数据保存到其成员变量中,再调用BLL.SVGRAS_RainPerHour.Add方法来将此对象包含的数据写入到数据库中。其相关代码如下:

DataTable table1=null;

if(this.RecordID!=null)//如果是修改的话,则返回的有RecordID则显示被修改的雨量数据

       table1=BLL.SVGRAS_RainPerHour.GetList("RecordID="+this.RecordID).Tables[0]; //获取已有条件的雨量数据

else if(this.RecordID==null || this.RecordID=="")

       table1=BLL.SVGRAS_RainPerHour.GetList("CityID="+this.SelectedCity+" and Year="+this.Year+" and Month= "+this.Month+" and Day="+this.Day).Tables[0];

if (table1.Rows.Count>0)

{

       this.dgData.DataSource=table1;

       this.dgData.DataBind();

       this.RecordID=table1.Rows[0]["RecordID"].ToString();

}

else if (table1.Rows.Count<1)

{

       //string temp="0";

       Random rand = new Random();

       SVGRAS.Model.SVGRAS_RainPerHour model=new SVGRAS.Model.SVGRAS_RainPerHour();

       model.CityID=this.SelectedCity;

       model.Year=this.Year;

       model.Month=this.Month;

       model.Day=this.Day;

       model.hour01=rand.Next(0,200).ToString ();

       model.hour12=rand.Next(0,200).ToString ();

       //model.hournn=…;        

       SVGRAS.BLL.SVGRAS_RainPerHour.Add(model);

       DataTable table2=BLL.SVGRAS_RainPerHour.GetList( "CityID="+this.SelectedCity+" and Year="+this.Year+" and Month= "+this.Month+" and Day="+this.Day).Tables[0];

       this.dgData.DataSource=table2;

       this.dgData.DataBind();

       this.RecordID=table2.Rows[0]["RecordID"].ToString();

}

页面效果如图10所示。

图10 雨量数据录入界面

在实际应用中,这里生成的数据全部为0,而具体的数据需要通过数据更新功能来输入。这里采用自动生成数据方式,是为了方便系统的测试与演示。用户要填入新的雨量数据,需要点击更新按钮进入数据更新页面,在其中填入新数据后点击提交按钮完成更新。

5.2 雨量数据分析与SVG图像的生成

1、获取用户设置的查询参数

用户在查询页面中设置相应的查询参数,如查询方式、查询日期等等,并点击确定按钮(即选择某一城市)后,程序首先会验证用户的参数设置是否正确,若不正确,则弹出错误提示;若通过验证,再按照用户设置的查询参数传到后续程序中。

这里的验证分为两部分,一部分是在浏览器端进行的,使用javascript代码,在向服务器发送数据前完成验证,这里的验证是测试用户输入的数据是否合法,如日期格式是否正确,参数是否设置完整等等,如果用户设置的是按多日查询,却只设置了起始日期,那么就不会通过验证。只有通过验证才会将参数数据发送到服务器端,这样可以在一定程度上减轻服务器端的压力。

图11 前台界面

另一部分验证是在服务器端进行的,它主要验证用户是否拥有操作权限,以及数据库中是否存在数据。只有通过验证后,才能在数据库中查询相应的雨量数据。

2、从数据库中查询数据

按照用户设置的查询模式,转到相应模式的查询代码中。然后再根据查询参数,从数据库中获取相应的数据。如:用户设置的查询模式为按天查询,查询城市为成都,日期为2007-5-27,然后调用strWhere()方法来生成查询参数,再传入三层架构中的业务逻辑层中的getList()方法,就得到了查询的结果,代码如下:

DataTable table1=BLL.SVGRAS_RainPerHour.GetList(strWhere("days")).Tables[0];

3、对数据进行分析处理,并组织为适合显示的形式

前面查询得到的是一个DataTable表,里面的数据是与数据库中对应起来的,但这样的数据却不便于生成图像,因此要对它进行重组,转换为雨量数据和相关文字信息。在这里定义了一个类RainfallData来辅助,这个类包含了城市信息、时间信息、相应的雨量信息等等,具体代码如下:

public class RainfallData

{

       public string cityId;

       public string cityName;

       public int max = 0;

       public int min = 1000000;

       public double average;

       public string startY;

       public string startM;

       public string startD;

       public string endY;

       public string endM;

       public string endD;

       //计算出最大最小值

       public void calMaxMin ()

       {

              double tmp = 0;

              for (int i=0; i < data.Length; ++i)

              {

                     if ( data[i] > max )

                            max = data[i];

                     else if ( data[i] < min )

                            min = data[i];

                     tmp += data[i];

              }

       average =  (tmp / data.Length);

       }

       public int[] data;

}

然后将每一组雨量数据都存到该类的对象中,并将这些对象传给SVG显示模块。

此外,若查询模式是多日查询或多月查询,还需要将数据按日或月累加起来。

4、使用XML对象来生成SVG文档

项目中定义了一个SVG文档类SVGDocument,它继承自XMLDocument,在它内部封装了加载SVG文档元素的操作,以后创建好文档中的元素后就直接插入到该文档中即可。另外定义了一个辅助类SVGHelper,里面定义了一些向某个结点添加基本SVG元素的操作,以方便向文档中添加SVG图形。现在,创建一个SVG文档,并且添加一条线、一个圆、一个矩形和一行文本的代码如下:

SVGDocument document = new SVGDocument(800,700);

SVGHelper.InsertLine (document.DocumentElement, 1,1,300,350, Color.BlueViolet, 5);

SVGHelper.InsertCircle (document.DocumentElement,100,100,50,Color.Red,Color.Gold,2.5);

SVGHelper.InsertRect (document.DocumentElement,300,400,80,70,Color.Gray,Color.Honeydew,3);

SVGHelper.InsertText (document.DocumentElement,"网络工程",10,100,15,"楷体",Color.Blue);

5、向SVG文档中添加坐标系

为了方便坐标系的创建,定义了坐标系类CoordinateFrame,在它里面封装了坐标系的细节,并提供创建坐标系、向坐标系中添加点、添加线等接口操作,相应的也定义了坐标类Coordinate,来对坐标信息进行封装。现在,向SVG文档中添加坐标系,并向坐标系中添加一系列点和线的代码如下:

CoordinateFrame frame = new CoordinateFrame (10,10,600,500,5,9,document.DocumentElement);

Coordinate point = new Coordinate(50,40);

frame.InsertPoint(point);

Coordinate []points = new Coordinate [5];

//... 在此获取坐标数据 ...

frame.InsertLine (points,"成都",Color.Chocolate);

6、将数据转换为坐标点的数组

处理按照用户参数查询获得的数据,并将其转换为对应于坐标系中的坐标点的数组。这里需要求出所有雨量数据的最大值和最小值,并计算出合理的纵坐标的坐标点数,然后将每一个雨量数据除以一个纵坐标点代表的雨量数据,以转换为坐标位置。然后将坐标点添加到坐标系上,并连成曲线。

7、添加相应的文字标签及均值线

在点上以及线上面,加上说明文字。不同的线会用不同的颜色显示,并标注相应的说明文字。同时,将求出的每组数据的均值以均值线的方式画到坐标系上。

8、修改响应类型为SVG文档类型(image/svg+xml)

将要返回的响应类型改为image/svg+xml,这样浏览器才会将页面作为SVG图形来解析。然后将SVG文档(以XML对象表示)的内容发送到客户端。具体代码如下:

Response.ContentType="image/svg+xml";

document.Save( Response.OutputStream );

Response.Flush();

Response.End();

现在客户端就可以看到如图12所示的SVG格式的图形了。

图12 SVG图形生成界面

5.3 使用Web Service方式提供开放的外部接口

5.3.1 Web Service介绍

Web Service是建立在HTTP协议、SOAP协议和UDDI等标准以及XML等技术之上的,其主要目标就是在现有的各种异构平台的基础上构建一个通用的,与平台和语言无关的接口层,各种不同平台之上的应用通过这个接口层来集成已有的服务。

Web Service具有以下一些特征:

1、完好的封装性:Web Service既然是一种部署在Web上的对象,自然具备对象的良好封装性。对使用者而言,只能看到该对象提供的功能列表。

2、松散耦合:当一个Web Service的实现发生变化时,调用者完全不会感觉到。对调用者来说,只要调用的接口不变,其内部实现的任何变化对用户来说都是透明的。

3、高度可集成能力:由于Web Service采用简单的、易于理解的XML作为接口描述,完全屏蔽了不同平台和系统的差异性,因此,任何符合协议的应用都可以集成已有的Web Service。

5.3.2 使用Web Service的意义

使用Web Service可以引入很高的开放性,使得系统可以方便的集成到其它应用中,同时,也为系统的二次开发预留了很好的接口。此外,作为雨量数据分析系统,必然会涉及到大量的雨量数据,而这些雨量数据是从全国各地的设备终端采集汇总而来的,一旦有了这一开放的接口,所有的数据都可以通过它来写入到数据库中。另外,这些雨量数据的采集是相当不容易的,一般的科研机构和学校是不可能获取如此大量的真实数据的,例如本套系统就无法获得到这些真实数据,只能通过随机数来生成假的数据。这样就限制了这些数据的科研作用。然而,通过Web Service来提供开放的接口后,所有的用户都可以通过它来很容易的获取这些雨量数据,还可以通过接口使用系统中已经做好的各种功能,避免了重复开发的浪费。因此,使用Web Service来提供开放的接口是有很大的积极意义的。

5.3.3 Web Service接口的实现

在系统中只提供简单功能的实现,主要接口有:

1、获取城市ID

通过该接口可以查询指定城市在系统中分配的ID值,其参数为城市名称。在查询城市数据前,首先要通过此接口获得城市的ID值。

2、获取雨量数据

通过输入查询条件,来获得雨量数据。这里的查询条件就是SQL查询语句中的where子句,用户可以指定某一天、某几天或某几个月的等条件。例如最简单的查询“江油”的所有雨量数据的参数为“CityId = ‘0000000013’”。

接口实现代码如下:

[WebMethod]

public string getCityId (string city)

{

       return SVGRAS.BLL.SVGRAS_City.GetList ("CityName='" + city + "'").Tables[0].Rows[0]["CityId"].ToString ();

}

[WebMethod]

public DataSet getRainData (string sql)

{

       return SVGRAS.BLL.SVGRAS_RainPerHour.GetList (sql);

}

6 系统测试

在前台页面中,对每种查询方式都进行了测试,所有数据查询、分析以及图像生成功能都能正确工作。例如,选择同一城市不同时间段比较模式,并设置起止日期和时间,这里的日期跨越两个月,即4月30日到5月1日,设置显示均值线方式;点击城市名称就可以选择城市,并将其加边框标注出来,再次点击即可取消相应城市的选择,并去掉相应边框;点击确定按钮后,就会打开新的窗口显示查询结果。

用户管理界面列出了系统当前的所有用户,点击“选择”选中一个用户后,可修改用户名、密码,并为用户指定系统角色。系统当前共有三种角色,角色的权限由管理员指定,例如要为系统管理员指定系统管理这一模块的权限,选中这一角色,在权限分配区选中相应的模块权限即可。角色的选择可以是一个或多个,默认角色选择为空,若没有为用户指定系统角色,则用户登陆系统后不会出现系统树型菜单,用户也就不能进行任何操作。

日志是根据用户操作自动生成的,在后台管理中可以根据选择条件进行日志的查询、删除和下载,若选择条件为空则默认为选择所有日志。

系统中的城市分为两级,每一个城市都有其上级城市。通过输入城市名称并选择上级城市后可新增一个城市,若要更新或删除城市,则先要点击对应的选择按钮来选中一个城市,然后可对选中的城市信息进行更新或删除等操作。

结    论

雨量分析系统实现了对四川省部分市县及其雨量数据的管理与分析功能,能够以各种方式(例如相同城市不同时间或相同时间不同城市)查询各市县的历史雨量数据,并以SVG格式的图形显示出来。此外还实现了管理系统内各个模块及设置不同用户权限的功能,以及数据库备份和还原功能。通过本项目的开发,对C#语言有了更多的体会,也更多地了解了B/S架构系统的开发。在开发过程中,学会了SVG这门新型的可伸缩矢量图形语言,在使用时体会到了这门语言的实用性及它带来的乐趣。

在项目实现过程中也遇到过不少问题和困难,同时由于缺乏编程经验,在编写代码的过程中,碰到了很多难以解决的问题和障碍,在老师的指导和同学的帮助下,查找各种资料,这些问题得以解决,并积累了一定的开发经验。例如刚开始不太了解雨量数据如何转换为SVG图形来显示,便从网上找了一个现有的将数据显示为SVG格式的图形的库来使用。在查看各种相关资料,了解了SVG并进行深入学习后,反复尝试各种生成SVG图形的方法。由于SVG本身就是XML文档,因此选择了用生成XML文档的方式来生成SVG,并封装了SVG的基本图形元素,最终完成了一个较方便的创建SVG图形的工具类。

当然,该雨量分析系统还是有很多不完善的地方。地图信息本来应该用SVG来组织和表示,这样可以将其中的各种数据元素分离出来,实现按选择条件在地图上显示城市及相应雨量数据的功能;而且SVG的交互效果没有体现出来,对雨量数据的分析也不够充分。但由于实现难度及时间限制,以上功能没能实现。

参考文献

[1] Joseph Bustos, Karli Watson[美]..NET Web服务入门经典——C#编程篇[M].侯彧译.北京:清华大学出版社,2003。

[2] Dinar Dalvi, Joe Gray[美]..NET XML高级编程[M].英宇,林琪译.北京:清华大学出版社,2002。

[3] Jesse Liberty, Dan Hurwitz[美].Programming ASP.NET[M].南京:东南大学出版社,2006。

[4] 石磊,但正刚.ASP.NET数据库编程详解C#版[M].北京:高等教育出版社,2004。

[5] 徐谡.ASP.NET应用与开发案例教程[M].北京:清华大学出版社,2005。

[6] 李安渝.Web Services技术与实现[M].北京:国防工业出版社,2003。

[7] 蔡月茹,柳面玲.Web Service基础教程[M].北京:清华大学出版社,2005。

[8] Seely[美].SOAP XML跨平台Web Service开发技术[M].杨涛,杨晓云,王建桥译.北京:机械工业出版社,2002。

[9] Bill Trippe,Kate Binder[美].SVG设计在下一代Web站点中使用可缩放矢量图形[M].高伟,英宇译.北京:机械工业出版社,2003。

  • 15
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

用数据说话用数据决策

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值