配電網WebGIS研究與開發[4]

 

配電網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:歡迎轉貼，但請在頁面中加個連結註明出處