构建B/S模式的WebGIS 系统开发框架知多少

1.1 构建基本的B/S模式的WebGIS框架 

    GIS经历了从单机环境应用向网络环境应用发展的过程，网络环境GIS应用从局域网内客户/服务器（Client/Server,C/S）结构的应用向Internet环境下的浏览器/服务器（Browser/Server，B/S）结构的WebGIS应用发展，WebGIS开始逐步成为GIS应用的主流，WebGIS相对于C/S结构而言，具有部署方便、使用简单、对网络带宽要求低的特别，为地理信息服务的发展奠定了基础[3]。

B/S（浏览器/服务器）结构最大的优点是安装和维护方便（仅仅对服务器进行安装和维护），系统扩展也比较简单。而本文所研究目的正是为了信息的高效率展示，所以不涉及太多客户端的操作，故选择B/S模式，只要用户PC联网了，就可以通过浏览器达到查看和分析数据的目的，而不需要额外安装任何客户端程序。

在实际应用系统的起点也就是在安装ArcGIS时，ArcGIS为开发人员提供的一个基本的WebGIS开发模板。

2.1 系统整体业务结构 

    本次毕业设计所涉及平台有服务器和客户端两个平台、所处理的数据有地理数据和非地理数据、所涉及的编程语言主要有C#和JavaScript，都比较多样化，所以在进行系统全面介绍前，先展示系统整体业务结构，如图2.1。


图2.1 系统整体业务结构

    WebGIS应用程序放置于一台服务器上，两种数据源放置在另外的两台服务器上，这些服务器能够通过网络进行互联，当然Web应用程序和两种数据源也可以放置在同一台服务器上，但分开放置的设计理念主要是为了体现出本系统的开放性和分布性。Web应用程序服务器可以和地理数据库、非地理数据库服务器通过网络自由交换数据（主要是Web应用程序访问数据库），用户在本地机的浏览器中打开Web应用程序链接，第一次向Web应用程序服务器发起请求，然后服务器将页面内容发送至客户端PC机上，用户再和Web应用程序进行交互交向应用程序服务器提交相关数据（这些客户端事件和数据处理方法由JavaScript编写），Web应用程序服务器接收数据，并对地理数据和非地理数据进行查询和计算（这些服务器端事件和数据处理方法由C#编写），然后再将数据发回到客户端进行计算和显示。

    关于系统整体业务结构以及几种平台、数据库、编程语言之间的联系如上所述，一起构成了WebGIS系统。

2.2 系统开发所需的软件和环境 

    WebGIS是一个比较高层的应用系统，开发起来的难度也比较大，但是ESRI公司提供了.NET开发框架和模板，大大降低了开发的难度和门槛。所以，在进行开始之前需要安装一些必要的软件和框架，必需安装的软件名称及主要作用如下表所示：

系统开发所需安装的软件和环境:

Microsoft SQL Server
访问和查看SQL数据库，并协助数据库编程的相关调试。

Microsoft Visual Studio 2008
.NET FrameWork，ASP.NET网页开发集成环境，客户端C#和服务器端JavaScript代码和编写环境。

VS 2008 MSDN
服务器端端相关代码编写的主要参考文档。

ArcGIS Server for the Microsoft .NET FrameWork
Web地图数据源的基本框架，Web应用程序运行框架，应用程序开发框架Web ADF

ArcDesktop(ArcMap,ArcCatalog)
ArcMap：访问和查看地图图形视图以及图元属性数据库，而且可以作一些地图的地图要素和地图图元属性的编辑。
ArcCatalog：建立ArcGIS的Web服务，使得程序可以通过Web访问服务器器上的地图数据。

网络信息服务IIS
IIS用来在本地PC机上提供一个虚拟的网络信息服务，让本地机可以充当临时的服务器。

其它一些辅助软件：
DreamWeaver：方便用户进行页面前台设计和CSS样式设定。
UltraEdit：一个良好的JavaScript代码编辑和查看环境（主要是因为VS2008的编辑环境对JavaScritp脚本编辑所提供的支持太少）

2.3 系统开发所需要的数据源 

    本次毕业设计所开发的配电网WebGIS系统所涉及到的数据库有两种[4]：地理信息数据库（存储地理信息）和非地理信息数据库（存储非地理信息）。地理信息数据，即ESRI的Shape格式地图数据，其主要作用是作为承载整个配电网信息的数据框架，主要内容是和地图相关的一此几何要素和呈现的样式以及一些必要的附加属性（可以用来和非地理信息数据相连接）。非地理信息数据则是和配电相关的一些设备或者线路的详细信息，这些数据就是在配电分析和决策的数据实体，也就是需要被地理数据所承载的数据。

2.3.1 地理数据库 

    地理信息数据有三种基本视图[参考ArcDesktop帮助文档]：地理数据视图，地图视图，工具箱视图。这三种视图通过地理数据表（一个GIS可视为一系列地理图片数据集），地图（一个GIS可视为一个智能化的地图视图）和工具箱（一个GIS可视为一系列的空间地理信息处理工具）来表现的[5]。

图2.2 GIS的三种视图

    一个地图就是一系列的地图元素在页面上摆开并组织起来。普通地图元素包括由地图图层，缩放工具条，指北针，标题，描述文本，和符号图例组成的地图框架。最根本的地图元素就是地图框架，它提供了地理信息的展示规则。在地图框架中，地理学内容被展示为一系列的覆盖了一定地图范围的地图图层——例如，像道路、河流、地图名称、建筑、行政区域划分、表面海拔高度、和卫星图 图层


图2.3 图层是地图框架组成

    有一些普遍的规则用来限定GIS如何展示，操作，管理和分享地理信息的。地理学表现方式有四种基本的类型：要素（点，线，面的集合）；属性；图像；连续的表面（例如海拔标高）。
    地理数据可以用ArcDesktop中的ArcMap和ArcCatalog来进行创建。具体的创建过程不是本文重点，所以在此就不赘述了。


图2.4 地图图层结构以及图层属性表

    地图数据的Web访问平台是基于ArcGIS Server，所以在创建好地图数据后，如果在进行网络平台的应用，那么还需要安装其网络运行服务ArcGIS Server。

    ArcGIS Server是同行业中第一个在企业级服务器构架中实现GIS 全功能的技术，它是对传统桌面应用和客户端/服务器应用的发展，为广域网中实现高性能的GIS功能提供了新的解决方案[6]。

    ArcGIS Server用于构建集中管理、支持多用户的企业级GIS应用[7]。开发者使用ArcGIS Server可构建Web应用、Web服务以及其他运行在标准的.NET 和J2EE Web服务器上的企业级应用，如EJB。它可让开发者和系统设计员实现一个集中的GIS，并支持多用户访问。

2.3.2 非地理数据库

    非地理数据库用来存储关于配电网的设备信息以及操作信息，这些数据都是由供电公司平时办公时录入的数据，这些数据才是办公人员进行分析和决策的依据。在地理数据源的属性表中，会有一个字段可以将这两种数据源在逻辑上关联起来，因此这两种表可以通过程序来进行交叉查询。在本次毕业设计中我们使用的非地理数据库是由Microsoft推出的一种新型的对象关系型的数据库管理系统Microsoft SQL Server 2000。它功能强大，提供了良好的扩展性，一度在数据库领域占有领先地位。SQL是一种介于关系代数与关系演算之间的结构化查询语言，其功能不仅仅是查询。SQL是一个通用的、功能极强的关系数据库语言[12]。


图2.5 SQL非地理数据库

    SQL数据库作为一种数据服务，主要是面向网络访问的，所以对构建网络数据库具有先天的优势，这也是它能作为本次毕业设计的非地理数据库的重要原因。

2.4 构建基本的B/S模式的WebGIS框架 

    ESRI公司为.NET开发提供了一套完整的基本模板，模板中包含了地图展示模块，图层显示控制模块，基本的地图导航工具，地图视图控制工具（缩放、漫游、测距、放大工具、全图、鹰眼等等）。虽然模板提供了基本的功能，但是要在本次毕业设计中因为要结合实际需求，还需要对模板进行必要的修改，主要修改内容如下：

    将模板地图数据源和自己准备好地图数据源相连接。将页面文字由简体中文代替。因为模板是完全基于英文的，所以要找到编程接口，进行基本的汉化。并对页面外观进行必要的修改，使得通用模板风格更加本地化，删除一些不需要的工具控件。这些过程都比较容易，只需要对源代码进行一些简单的修改和删除就可以完成，所以就不再详细介绍了。

为WebGIS添加和配电网相关的基本功能。这些功能主要目的是来实现非地理数据在地理数据上的展示，如何实现这些功能，将在后面的章节中进行详细介绍。

2.5 WebGIS的网页技术基础－AJAX 

    在进行下面的工作前，先要了解WebGIS的一些基本技术。因为WebGIS实际上就是一个交互性很强的地图数据展示系统，在交互性很强的同时也很注重用户的体验，最大限度地让Web应用程序有桌面应用程序的交互体验效果。于是AJAX技术就毫无疑问成了本系统最基本的技术了。

    HTML是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，自1990年以来，HTML就一直被当作WWW上的信息表示语言，用于描述网页的格式设计和它与WWW上其他页面连接信息[13]。但是以纯HTML语言编写的页面一直以来只能作为展示普通文本信息，也就是所谓的静态页面。

    这个问题直到AJAX和RIA在上普遍应用后才得到解决[14]。技术是一种很有前景的用来提供更丰富的次交互性和表现力的网络应用程序。同时，AJAX技术粉碎了一些推崇者认为搜索引擎的基础是网络“页面”的比喻[15]。

    作为Web2.0的标志，Ajax带来交互性更强，反应更迅速，更主观，内容更动态的特点。因为这些丰富的组合和技术，Ajax为地理空间网络应用程序提供了强大的基础[16]。AJAX提供了丰富的客户端页面应用程序，通过提供原始的执行异步的请求和动态更新页面结结构和内容。通常，Ajax页面应用程序由单一的页面元素组成，但是这些页面元素却可以通过回调来进行异步激活，由用户或者用品“激活”动态改变这个页面内容[17]。

Ajax 是一系列的不同的技术放到一起后产生的一种新的作用巨大的网络应用程序[18]。在ASP.NET网页的默认模型中，单击按钮或执行一些其他操作会导致回发，此时将重新创建页及其控件，并在服务器上运行页代码，且新版本的页被呈现到浏览器。但是，在有些情况下，需要从客户端运行服务器代码，而不执行回发。如果页中的客户端脚本维护一些状态信息（例如变量值），那么发送页和获取页的新副本就会损坏该状态。此外，页回发会导致处理开销，这会降低性能，且会让用户不得不等待处理并重新创建页。若要避免丢失客户端状态并且不导致服务器往返的处理开销，可以使用客户端回调。在客户端回调中，客户端脚本函数会向ASP.NET网页发送一个请求。该网页运行其正常生命周期的修改版本——初始化页并创建其控件和其他成员，然后调用特别标记的方法。该方法执行代码中编写的处理过程，然后向浏览器返回可由另一客户端脚本函数读取的值。在此过程中，该页一直驻留在浏览器中。回调使用了一系列的标准技术，这些技术统称为Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)[19]。


图2.7 回发同步(左)和回调异步（右图）通讯过程对比图

    Ajax技术则是在Web 2.0时代的需求下应运而生的一种注重用户交互体验的浏览器技术。Ajax为用户提供了复杂的、运转良好的应用，改变了用户的交互体验。Ajax中主要技术之间的关系如下所述：

    JavaScript将各个部分粘合在一起，定义应用的工作流程和业务逻辑，通过使用JavaScript操作DOM来改变和刷新用户界面，不断地重绘和重新组织显示给用户的数据，并且处理用户基于鼠标和键盘的交互。CSS为应用提供了一致的外观，并且为以编程方式操作DOM提供了强大的捷径。XMLHttpRequest对象（或者类似的机制）则用来与服务器进行异步通信，在用户工作时提交用户的请求并获取最新的数据[20]。

    AJAX具体功能和其名称的对应关系如下表2.2。

表2.2 AJAX的组成
A: Aschronorous

异步通讯，负责数据在服务器和客户端后台之间传输数据。

J: JavaScript
客户端编程语言，负责客户端数据编码解码数和数据的发送和接收以及通过操作DOM来改变和更新客户端浏览器中的页面内容。

A: And
连接词，和。

X: XML
（Extensible Markup Language）即可扩展标记语言。负责数据的编码和解码。

通过上面的介绍不难发现AJAX主要由三部分组成，现在将分别对三个部分进行详细介绍

2.5.1 Aschronorous异步通讯的几种框架 

最基本的XmlHttpRequest： 

    XmlHttpRequest基本上是所以的框架的基础，很多教程对AJAX的介绍也都是以此为起点的。在后面介绍的几种实现起来更加简单的框架在除去华丽的外衣后，其内部运行机制也都是基于XmlHttpRequest。因此本框架的基础性也造成了其开发代码量繁重的缺点，所以在实际开发中一般采用对其改进的框架。

ASP.NET客户端回调： 

    在ASP.NET 2.0的发布版本中，微软介绍了一种简单的客户端回调（实际上是对XmlHttpRequest的一个封装框架），在Web应用程序中的一种轻量级，而且高效的AJAX解决方案。通过一个ICallbackEventHandler接口,一个客户端script manager类和一个单独的JavaScript文件（WebForms.js）就能够提供处理服务器端和客户端的异步通讯问题了。客户端回调(Client Callback)优点在于回调时发送请求和返回结果的字符串都由开发者自定义和解析，更为灵活和轻便。当然，ArcGIS Server中提供了CallbackResult和processCallbackResult函数，更加方面了开发者。另外，客户端整个页面的生命周期比传统Postback短(无论是同步或者异步)，更为高效。缺点是需要开发者编写客户端脚本和服务器代码。

本次毕业设计的“设备统计”页面属于一个典型的数据库访问和分析页面，采用的AJAX通讯方式也主要是基于ASP.NET 客户端回调。

2.5.2 JavaScript 运行在客户端的程序 

    JavaScript作为客户端脚本，在ASP网页开发中扮演的地位完全不亚于C#，可以说应该是等同的，一个运行于客户端一个运行于服务器端。目前笔者对这两种语言的定位就是：JavaScript运行于客户端，负责浏览器上页面的程序设计，C#运行于服务器端，负责响应客户端的请求并计算和处理数据，然后通过网络通讯技术数据的交换将服务器和客户端Web应用程序联系起来成为一个整体。
    总之，JavaScript就像“胶水”一样将异步通讯的各个过程粘合到一起。

2.5.3 XML通讯消息的编码 

    客户端和服务器之间数据交换一般是以字符串的形式进行的，当涉及到比较复杂的数据集合时就需要对字符串进行合理地编码，这就是AJAX中的XML的内容了。对数据编码掌握后，就可以成异步通讯数据的规模“从一到万”的质变。

    下面将介绍几种常用的数据编码技术：

2.5.3.1 用户自定义分隔符编码（微量级别）

    简单的URL后面的传递：
    这样以特殊符号作为分隔符的编码方法比较适用于结构单一的数据集合，数据在客户端和服务器端的编码和解码也是最简单的，编码只需要字符串相加即可，解码只需要用split()函数（C#和JS两种语言都有此函数）按照编码的分隔符规则进行分离并提取出有用信息即可。

    总述：此方法好处是数据编码和解码很容易，坏处也显而易见，字符串所表示的数据集合结构层次不明，当数据集合稍微有点大的时候，字符串的可读性将变得很差。所以本方法只适合于传递的数据量比较少层次比较少的微量级别，比如一般传递不多于5组的层次单一的数据，如上例所示，但即使如此，也可以满足一般的开发者的需求了。

    下面再讲的JSON编码是对于轻量级别（比微量级别要复杂一些）的数据的一种编码方式，

2.5.3.2 JSON编码技术（轻量级别）

    关于JSON的介绍，网上有这么一段话：JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式易于人阅读和编写同时也易于机器解析和生成。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）这些特性使JSON成为理想的数据交换语言。

    关于JSON编码更详细的介绍可以到网上查找相关文档，或者直接访问其官方网站json.org。在从事JSON的应用时应先到官网上下载两个文件：json.js和JSON.CS。分别作为客户端和服务器端JSON的编码和解码库文件。

（1）服务器端JSON编码和解码

    用从json.org网页中下载的“JSON.CS“文件，然后在服务器端中引用引文件，就可以在写C#函数的时候调用里面的函数了。”JSON.CS“文件里面函数虽然众多，但是直接给外部调用的只有两个：

public static object JsonDecode(string json)

public static string JsonEncode(object json)

    即一个是编码函数一个是解码函数：编码函数将服务器端的object对象转换成字符串对象，然后传递到客户端;解码函数将从服务器端接收到的string对象转换成object对象供服务器提取数据。其余的函数都是供这两个函数调用的。

需要说明的是，上面所说的string类型的数据不是一般的任意字符串，而是有一些特别分隔符组成的“JSON字符串“，只有这样格式良好的string字符串才能够被此文件中的函数进行解码，而编码的作用也就是将object数据类型编码成这样的格式良好的“JSON字符串“，正因为遵守了这样的规则才使得JSON编码能够跨语言传递数据了。

（2）客户端JSON编码和解码

    从json.org网页中下载的”json.js”文件,然后在客户端引用此文件，就可以在写JS函数的时候调用里面的函数了。和服务器端的”JSON.CS”相对应的，它里面虽然代码众多，但是供外界调用的也只有两个函数――一个编码函数一个解码函数：

JSON.stringify(value, replacer, space);//后面两个参数是可选项 JSON.parse(text, reviver);//后面的参数是可选项

    json是JavaScript里面的一种数据格式，其地位相当于C语言中的结构体一样，是一个数据集合，用户可以通过“结构体“的点运算符直接对里面的数据进行提取和引用。

（3）中文字符串的编码和解码

    服务器端“JSON.CS“中编码函数对中文有比较好的支持，可以直接将中文编码成Unicode的编码，在程序运行期间查看这些中文字符串的时候，看不到中文，但是可以看到其对应的数字编码，经过客户端的JavaScript解码函数解码后得到的json对象可以直接被识别这样的Unicode，并直接以中文呈现在页面中的。

    客户端“json.js“中对json object的中文编码则不那么“智能”了，需要另外处理才能够传递中文字符。 只需要对中文字符串进行一个escape()的JS方法转码后就可以了，在服务器端和escape()转码函数相对应的反转码函数为UrlDecode()。

    总述：JSON是一种比较有潜力的网页编码格式，它具有良好的可读性（结构清晰）的移植性，对比下面XML来说其编码效率比较高――即用来表示格式的字符占整体字符数目的比例比XML字符串小多了，所以对于轻量级别的字符编码是很高效实用的，而且因为JSON格式本来就是一种JavaScript对象，所以对于客户端的JavaScript语言有着天然的亲和力，很适合传递JavaScript变量。JSON编码解码流程可参考下图：


图2.8 JSON编码解码流程图

2.5.3.3 XML编码技术（重量级别）

（1）服务器端XML编码和解码

    用.NET里面的System.Xml里面相关类可以很容易实现对XML字符串的编码和解码。关于XML的解码在.NET提供了一个XmlDocument类，并提供了大量操作XML文档节点和属性的接口函数，通过这个类，用户可以很方便实现节点定位从而实现XML文档的编码和解码。对于编码XML文档，还有一个更加容易的方法，用户直接将数据字符串和XML节点字符串相加就可以得到一个XML格式的字符串了（字符串累加法），然后就可以用于异步通讯传输了。

（2）客户端XML编码和解码

    客户端利用JavaScrpt对数据进行XML编码的方法和客户端比较类似，也可以利用最 “字符串累加法”进行编码，解码也是在客户端用JavaScript构造一个XML文档对象，通过Xpath或者对节点进行遍历进行解码

    总述：网上的观点是XML是一种重量级别数据编码方式，它有很多优点，对中文字符串的编码和解码有比较好的支持，文档的结构性很好，不管是编码还是解码，过程都清晰明了。对比JSON来说，缺点也很显明，就是编码的效率不是太高，往往对一个字符进行编码就需要额外至少2个字符的标签来规定格式。但是对于性能要求不是太高的网页中，不管是轻量级别的应用还是重量级别的应用，开发人员都可以选择XML，因为它的编码和解码过程相比JSON要简单很多，而且不难发现HTML其实也是一种拥有特别标签的XML文档而已，所以XML和HTML文档有着天然的亲和性，很适合传递一些HTML页面内容。


图2.9 XML字符编码解码流程图

2.5.4 非字符串内容的传递方法

    前面说的都是对一些基本数据的传输，但有时候也会遇到一些其它内容要传输，比如文件，图片资源……这是应用AJAX技术时无法避免的，所以有必要简要介绍下。

2.5.4.1 XML文件

    前面介绍的数据编码技术，都是一些在内存中的操作，就是对一些临时变量的操作和运算，但有时候我们也需要对XML文件进行传送。一些不是经常变化的信息，如：网页异常记录日志，页面参数配置文件等等，平时都存放在服务器的硬盘中，在需要的时候再调用出来。和传输其它数据一样，对XML文件的异步传输出是从客户端的请求开始的，客户端请求XML文件有两种方式：一种是通过xmlHttpRequest去异步请求，另外一种是直接声明一个ActiveXObject然后下载服务器端的XML文件。

2 图片文件

2.5.4.2在网页中引用的图片一般分为两种图片：静态图片和动态图片。

    静态图片：不会经常改变的图片文件。比如，电力系统对设备拍摄的照片，作为设备附加数据供用户查看，这种图片一般都只用于读取，不会进行改写，即某一个地址对应的图片永远不变。这种图片常常是直接存放在服务器的硬盘中，服务器只需要将图片资源的在硬盘中的地址发送给客户端，再由客户端对资源地址进行引用即可。

    动态图片：根据不同请求而动态呈现的图片。比如，一般网页的验证码图片和本系统中的统计图片，这些图片虽然对应的资源链接是一样，但是却会根据不同时刻的请求，或者客户端提交不同的数据而呈现出不同的样子。

    注意：不管是传送动态图片还是静态图片，如果图片的资源地址相同，但图片内容不同时，在图片地址后面一定要加入一随机数，否则在异步通讯情况下，客户端将无法做到“无刷新”更新图片内容，客户端将永远只显示上一次下载到本地缓存中的图片资源。

    总述：不管是哪种编码访求，因为数据编码和解码是一个比较实际的一个问题，所以遇到具体的问题还需要开发人员自己多去查阅相关资料采取具体的解决方案。

2.5.5 客户端JS框架介绍

    JavaScript对数据进行解码后，然后数据就要各司其责，开始分发到浏览器上的各个控件上去进行显示。此时就需要JavaScript来动态控制浏览器客户端的显示内容了，JavaScript通过DIV+CSS来动态改变网页的外观显示，通过DOM文档对象模型来改变更新页面中的数据内容。

在进行Web应用程序开发时，服务器只作数据计算和数据传送，而不对客户端元素进行任何操作，客户端则请求和接收数据，并负责数据的展示。服务器端和客户端两种语言，各司其责，互不干涉。要做出动态性很好的客户端页面，就需要熟练掌握JavaScrpit的应用，因为JavaScript是一种解释性语言，所以个人进行大规模开发是很难的，但是现在网上有大量的客户端JS框架来供大家使用，很多都是开源的，这大大降低了客户端编程的门槛。