配电网WebGIS研究与开发[4]
作者：一点一滴的Beer http://beer.cnblogs.com/
3.2 WebGIS停电区域显示
停电区域是指供电公司在某一天的某些区域的台区进行停电，台区的下属表箱均受到影响。这是一个地域性问题，所以通过在地图上进行标识这些区域，将数据可视化地展示到分析人员面前，可以很直观看到当天停电影响区域，极大地方便了后续工作的展开。
要求：工作人员将停电计划录入到SQL数据库中，并指示当天的台区停电计划，有的台区有可能有一系列的下属表箱，每个表箱都对应着一个地理坐标，这些表箱散点构成一个区域，“停电区域显示”就是要将这些停电影响区域在地图上高亮显示出来，方便工作人员查看，同时还要提供停电区域的基本查询功能，让工作人员了解到停电区域更加详细的数据。
基于Web ADF开发的应用系统包含三结构，分别是客户端、Web端以及GIS服务器端，因此在Web ADF地图中绘制图形可以在三个层次的任何一个层次来实现。每一层的相关开发环境都不一样，因此转换和渲染地图上的图形元素的方法也不一样。由于Web ADF的目的是在同一个应用程序中使用多种数据源，因此它提供更多的是在Web端创建与管理图形的方法。
非常重要的是，开发人员必须了解通常需要在哪创建图形，以及Web ADF是如何集成每个层次的图形的。下图表明在每个层次上可以在哪里创建图形图层。Web ADF管理着一系列的数据源，如：Web ADF图形，ArcGIS Server和ArcIMS。Web ADF图形资源使用Web ADF的功能创建图形图层与生成地图图片。而ArcGIS Server与ArcIMS资源使用它们各自在GIS服务器端的服务功能，来创建图形图层，并与地图中其它图层数据合并生成一张地图图片。如果将地图控件的ImageBlendingMode属性设置为Browser，这通常是默认值，那么所有的地图图片，依据资源的顺序在浏览器中叠加。此外，客户端浏览器可使用浏览器的功能来创建图形。
图3.16 各层次创建图形的方法
客户端：
对于Web应用程序来说，客户端大多数情况总是一个浏览器。通常，浏览器的显示和交互总是和一些Web标准相关联的，例如：HTML，CSS，JavaScript等等。在其开发环境中，可用工具受限于浏览器的支持。CSS可以将页面元素，比如图形，放置在其它页面元素之上。浏览器对矢量图形的支持的区别也很大，但是SVG（Scalable Vector Graphics，可缩放矢量图形）与VML（Vector Markup Language，矢量可标记语言）在网页上的其它元素之上绘制矢量图形。
Web端：
ArcGIS在Web端提供了一个资源丰富全面的开发环境而且可以直接访问服务器端的数据源。ASP.NET Web应用程序直接继承了Microsoft .NET Framework框架和它的所有优点。.NET环境提供了一些方法对地图进行图形绘制，但是实现的方法却比较繁琐。然而，.NET框架提供给Web ADF一系列的对象去通过简单的API扩展其功能达到在地图上创建图层的目的。
服务器端：
一般情况下，在服务器端处理图片就意味着需要使用服务器来创建一个地图图片，这个图片可能随后为Web ADF使用。服务器端创建图片的能力是取决于服务器端的数据源服务的能力的。ArcIMS和ArcGIS Server都可以创建一般的地图图形。然而，既然都可以提供不同的接口去创建图形，它们也将使用不同的API接口，添加到服务器上的图形将成为地图图片的一部分返回到客户端。既然会有另外一个数据源可能覆盖掉服务器端生成的图形，你必需考虑地图数据源的一些规则去决定这些图形是否可见。
三种方法各有各的特点，因为在本次毕业设计要求绘制的停电区域是一个动态区域，所以最好是一个虚拟图层，故先排除了服务器端创建的可能性。除了动态绘制区域外，还要提供区域的点查询等功能，故选择在Web端操作图形。
Web ADF提供了一个独一无二的图形数据源。图形数据源能够以图层（Graphics Layer）的形式添加到MapResourceManager控件中然后和Map控件相关联并展示出来。一个图层数据源是一个可以包含很多DataTables的一个System.Data.DataSet类型。你可以通过Graphics Layer数据源的Graphics属性来访问Web ADF的GraphicsDataSet
Web ADF定义了两种图层类型：ElementGraphicsLayer 和 FeatureGraphicsLayer. 两种类型都是System.Data.DataTable的结构类型,因此它们都可以添加到GraphicsDataSet表集合中。图层的内容被Web应用程序存储在内存（in-memory ）中。因此，图层中的内容总量是要和Web应用程序所占用的内存相适应的。注意图层类型必需通过程序来创建和管理。
ElementGraphicsLayers（几何图形层）：只包含基本图形元素，几何信息和样式表。一个几何图形层能够存储不同的几何类型的图元。一般情况下，几何图形层可以用于展示地图上选中的要素。注意：几何图形层在设计时就不能包括任何属性信息。
FeatureGraphicsLayers（要素图形层）： 被设计成一个可以完全模拟真实的要素图层的一个虚拟图层。每个图层都只支持一种几何类型，Web ADF的渲染器可以通过对此图层的属性表的读取并将特别的标识符号应用到这种图层上面。要素图形层同样也支持查询
在绘制停电区域后，还需要根据停电时段来对不同区域进行不同颜色的渲染，这就需要对这个虚拟图层拥有一些属性信息便于着色器进行读取并进行特别的着色处理。所以本次毕业设计最终选择FeatureGraphicsLayers作为停电区域绘制的载体。Web ADF提供了一系列的几何类型，标识符号和一些着色器（渲染器）可以去处理图层，而且Web ADF的符号体系支持不同的透明度显示，使得停电区域高亮区域不至于完全覆盖掉下面的的图层。
在准备好的基本模板（有导航工具条，地图显示框等等基本控件，能够在页面显示地图并提供基本功能的基本）的情况下，在MapResourceManager控件中添加一个虚拟图层如下图左所示：
图3.17 添加虚拟图层
虚拟图层的类型为GraphicsLayer，数据存储类型是“In Memory”和添加本地实体地图数据源不同――本地实地地图数据源的类型和存储如上图右所示。
绘制停电区域的绘图流程如下：
图3.18 停电区域的绘图流程
上述流程中有一个比较重要的环节就是对SQL数据库进行查询得到停电影响区域，这里面涉及到一个根据散点群来计算外包区域的算法：
通过对数据库的查询，得到某一停电台区下属表箱相关数据，每个表箱都有一个坐标属性，要绘制停电区域就需要对这些坐标在地图上对应的散点群进行“覆盖区域”计算。从所以的表箱的纬度值中选中最大纬度和最小纬度，然后再将纬度进行分级（分级越多，最后绘制出来的区域边界也就就越平滑，但计算也越复杂，所以如何分组依据需求而定），分级后，所以的表箱坐标就分布在一些水平的纬度带状区域内部了。然后对每个带状区域内部的表箱坐标集合选出经度值的最大值和最小值，这样就找到了此处带状区域内部表箱的一个“覆盖区域”了，然后依此类推，最终找到全部表箱的整体“覆盖区域”，也就是停电区域。
除了上述算法外，还要注意在mapResourceManager里面mapResourceItem对DisplaySetting设置Image Format为PNG24，否则虚拟图层即使相互之间是透明的，但是仍然会完全遮挡住实体地图图层，除了上述问题外其余的都是一些SQL查询的单一技术问题，所以不再详细介绍。对停电区域的查询以及查询结果显示方式和上一部分的“电力参数查询”过程类似，也不再重复介绍。下面是运行效果图：
图3.19 “绘制停电区域”运行效果图
3.3 WebGIS设备统计
设备统计页面要求：用户对检索条件进行选择，或者输入筛选字段，然后向服务器提交检索条件集合，服务器向SQL数据库中查询出符号要求的设备结果并传送到客户端，客户端浏览器要将这些结果显示出来，并以统计图表的形式显示统计结果。
“设备统计页面”主要涉及的是数据库编程，除了数据库查询技术外，完成本页面功能的最重要的技术就是AJAX技术。基本的AJAX技术在第三章中进行了简单的介绍，本模块所采用的AJAX框架主要是“ASP.NET客户端回调”框架，数据编码和解码主要采用JOSN方法。
ASP.NET客户端回调（ASP.NET Client Callback）是微软在.NET环境下为开发人员提供的一种异步通讯方式，开发人员可以通过接口ICallbackEventHandler来实现客户端页面和服务器之间的异步通讯。注：在某些场合“ASP.NET客户端回调”也被称为“ASP.NET脚本回调（ASP.NET script callbacks）”
通过XmlHttpRequest进行异步通讯时要在客户端通过JavaScript声明一个异步通讯请求对象，这个对象和浏览器内核有关，例如在IE下面是ActiveXObject("Msxml2.XMLHTTP")。而通过ICallbackEventHandler来实现异步通讯时，则要在服务器端的页面代码文件中，要让页面实现ICallbackEventHandler接口，只要在页面的继承类中加入ICallbackEventHandler类即可。
在页面的继承类中加入ICallbackEventHandler类之后，那么页面中就有两个函数可以直接使用了：public void RaiseCallbackEvent(string eventArgument)和public string GetCallbackResult()。
RaiseCallbackEvent是服务器端接收客户端数据的函数，其参数eventArgument就是数据接口，用来接收客户端在请求时向服务器端发送的数据（目前为止，笔者所了解到的，这种数据格式好像仅仅限于字符串）。GetCallbackResult则返回数据，这个数据直接返回给客户端。这两个函数就是服务器端的数据通讯接口。
服务器端的clientscript = Page.ClientScript.GetCallbackEventReference(this, "arg", "AjaxCallBackComplete", null);语句则定义用于生成客户端脚本。通过查看MSDN可以知道，第二个参数"arg"指客户端要发送的JavaScript字符串变量，这个变量在服务器端由RaiseCallbackEvent(string eventArgument)的eventArgument承接，第三个参数是客户端在服务器端完成回调后接收服务器端发来的数据并进行处理的JavaScrpipt函数。
回调的流程如下：
1.用户点击页面链接触发JS函数doCallBack 2.doCallBack准备好数据放于arg变量中，并调用由服务器端生成的客户端脚本<%= clientscript %> 3.服务器端RaiseCallbackEvent收到数据并调用相关服务器端函数进行处理并赋值给一个全局字符串变量 4.由GetCallbackResult函数将服务器准备好的字符串数据返回到客户端 5.客户端由GetCallbackEventReference（）设置的JS函数接收来自服务器端返回的字符串数据，然后再对数据进行处理并操作页面元素对数据进行显示等等。
以上便是ASP.NET客户端回调的完整过程。开发人员只需要让页面继承一个ICallbackEventHandler类，然后找到数据接口和函数接口就可以轻松实现异步通讯了。此方法流程清晰，同时也将很多开发人员不关心的问题，如通讯过程，通讯等待等等过程都进行了封装，所以本次毕业设计的“设备统计”页面就选用此异步通讯方法。第三章中介绍了三种数据的编码和解码方式，在本页面中数据的通讯属于轻量级别的，所以就采用了JSON编码和解码（当然用XML技术也可以）。
需要通过AJAX技术解决的问题：
3.3.1 多级下拉框无刷新联动
在最初对此页面进行制作时，采用的是ASP.NET的服务器控件DropdownList，可以达到多级下拉框联动的效果，但是每次第一级下拉框内容变化时，为了更新二级下拉框内容，页面都会刷新一次，使得页面体验效果变得很差。正如第三章所介绍，AJAX的出现正是为增强客户端页面交互体验效果而产生的，关于AJAX的一个典型应用就是“多级下拉框无刷新联动”。
虽然上面提到为了达到比较好的客户端端体验效果，页面中应该尽量避免使用ASP.NET的服务器控件，而应该尽量选用HTML控件，但是考虑到服务器控件在经过渲染后发达到客户端页面后，实际上也对应着某一种HTML控件，比如：ASP.NET的DropdownList对应着HTML的Select控件，而且服务器控件的初始状态页面（第一次在客户端生成页面）设置在服务器端设置起来比较容易。所以在页面中用于对统计条件进行选择的下拉框选项的控件仍然选用器控件DropdownList，但只在第一次初始化页面时在服务器端进行初始化操作，在页面后期运行时，则均只在客户端用JavaScript对其进行操作，例如读取数值，设定数据等等。服务器端只负责接收数据，计算数据，发送数据。具体流程如下（涉及AJAX的部分省去）：
图3.20 “客户端下拉框无刷新联动”流程
3.3.2 客户端Grid控件显示查询结果
当用户点击页面的“查询”按钮后，客户端通过JS将客户端表单数据编码成JSON字符串，然后提交给服务器，服务器再解码得到检索条件，然后向SQL数据库中检索出满足要求的设备记录表，然后再回复到客户端。其过程和“下拉框”无刷新联动完全一样，只是编码的数据量大一点而已。但最终关于客户端如何显示这个表格数据就是一个难点，最初尝试使用服务器控件GridView，但后来发现使用此服务器控件缺点太多（可能是没有进行深入研究吧），比如翻页刷新问题，单元格变形问题等等。最后到网上找到一种JavaScript框架――ActiveWidget提供了一种客户端的JavaScript编写的Grid控件，开发人员只需要将一个JavaScript数组传递到此JS表格的数据接口就行了。这样的客户端Grid控件支持滚动条，当单元格数据长度比较长时，会自动隐藏部分数据，单元格宽度可以拖动改变……
在本页面中还使用过一个ActiveWidget框架提供的JS控件――Tab控件，可以在页面中实现类似桌面应用程序的选项卡效果，而且使用起来很简单。
3.3.3 生成统计图表
在解决如何生成统计图的问题时，曾经试过多种方法，比如利用Excel的图表插件进行编程，或者利用GDI作图，然后再到页面中引用，但效果都不理想，而且编程过程很繁琐。后来到网上找到一个专业的统计图生成控件：dotNetCharting。在程序中引用dotNetCharting控件后，然后只要将一个两列的DataTable作为数据源传递给dotNetCharting中的Chart，它就可以自动生成一个外观友好的统计图，如下图所示。
图3.21 统计图效果
关于如何在客户端异步刷新图片资源的问题，已经在第三章进行了介绍，所以在此不再赘述。每次点击“生成统计图表”按钮，客户端将在客户端第二个选项卡页面中无刷新地生成一个统计图。
页面运行效果图：
图3.22 查询结果数据表
图3.23 查询结果统计图
------------------------------------------------------------------
Author:一点一滴的Beer
Email /Gtalk:dreamzsm@gmail.com
From:http://www.cnblogs.com/beer
Notes:欢迎转贴，但请在页面中加个链接注明出处
