SVG技術(shù)在能源消耗統(tǒng)計系統(tǒng)中的應(yīng)用

術(shù)在數(shù)據(jù)分析與展示領(lǐng)域的優(yōu)勢，介紹了 SVG技在ASP.Net開發(fā)的基于數(shù)據(jù)管理系統(tǒng)的網(wǎng)站中的應(yīng)用，并將 SVG技術(shù)應(yīng)用于能源消耗統(tǒng)計系統(tǒng)。

關(guān)鍵詞：SVG；XML；ASP.NET；數(shù)據(jù)的圖形化展示

2013年初，我參與了某市能源消耗統(tǒng)計系統(tǒng)的研發(fā)工作。系統(tǒng)主要完成全市各企事業(yè)單位的能源消耗的上報、統(tǒng)計、分析工作。

經(jīng)分析，該系統(tǒng)采用B/S架構(gòu)，優(yōu)勢在于不需要安裝客戶端，部署一臺服務(wù)器，各個機關(guān)部門均可通過互聯(lián)網(wǎng)登錄該服務(wù)器報送數(shù)據(jù)，系統(tǒng)維護和升級方便。通過對多種開發(fā)工具從效率、功能、和開發(fā)速度等方面的對比，項目組決定采用ASP.NET開發(fā)，后臺數(shù)據(jù)庫采用SQLSERVER2008。

為了保證系統(tǒng)的先進性，決定采用圖像來顯示能耗的統(tǒng)計結(jié)果。初步設(shè)想為：

（1）使用一個地圖系統(tǒng)，將本市的行政區(qū)劃顯示出來，并標注各個機關(guān)單位的位置，方便用戶瀏覽。

（2）在地圖上用不同的顏色顯示每個行政區(qū)劃的能耗情況。用戶可以通過地圖來查詢某個時段本市各個行政區(qū)劃的能耗情況。

（3）在地圖上閃爍顯示指定的機關(guān)單位。如突出顯示耗能超標的單位等，這樣可以使關(guān)注單位的分布形象的展示出來。

雖然互聯(lián)網(wǎng)上有許多地圖系統(tǒng)的應(yīng)用，但是沒有一個系統(tǒng)能夠準確的界定出街道、鎮(zhèn)一級的行政區(qū)劃，也沒有一個系統(tǒng)能夠完整準確的標注出我們所關(guān)心的機關(guān)單位的地點。所以我決定開發(fā)一個小巧的專為本系統(tǒng)服務(wù)的地理信息平臺，這樣不僅能夠提高地圖顯示速度，還能為以后的功能擴展提供接口，方便系統(tǒng)的二次開發(fā)。

通過對支持B/S結(jié)構(gòu)的地理信息系統(tǒng)功能的比較，我最后決定采用SVG技術(shù)來實現(xiàn)這一功能，選擇理由為：

（1）SVG 可被非常多的工具讀取和修改（比如記事本等）。

（2）SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。

（3）SVG 是可伸縮的，可對地圖自由縮放、定位。

（4）SVG 圖像可在任何的分辨率下被高質(zhì)量地打印。

（5）SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）。

（6）SVG 可以與 Java 技術(shù)一起運行。

（7）SVG 是開放的標準。

（8）SVG 文件是純粹的 XML，符合XML語法規(guī)范。

（9）客戶端只需安裝簡單的插件即可實現(xiàn)豐富的功能。

開發(fā)工具和使用技術(shù)確定后，我們對項目的關(guān)鍵問題和解決方案做了進一步分析：

（1）邊界數(shù)據(jù)的參照：為了和互聯(lián)網(wǎng)上的數(shù)據(jù)一致，也為了將來更大范圍的擴展，邊界數(shù)據(jù)采用經(jīng)緯度坐標來保存，而不是采用本地的相對坐標。

（2）邊界數(shù)據(jù)和機關(guān)位置的確定：對于市級和區(qū)級的區(qū)劃邊界，互聯(lián)網(wǎng)上的一些地圖系統(tǒng)均可以提供，但是鎮(zhèn)、街級的數(shù)據(jù)和企事業(yè)單位的位置就需要工作人員在地圖上確定，而沒有現(xiàn)成可用數(shù)據(jù)。我們需要使用一些工具和手段，記錄下邊界數(shù)據(jù)，然后保存起來。

（3）顯示速度問題：要達到理想的顯示效果，邊界就要做的細膩，邊界點的密度就必須大，產(chǎn)生的問題是，邊界的數(shù)據(jù)量大。本市下屬十幾個區(qū)，和上百個鎮(zhèn)街，整體的數(shù)據(jù)量很大，通過網(wǎng)絡(luò)傳輸數(shù)據(jù)，再在瀏覽器上顯示出結(jié)果，速度會受到一定的影響。經(jīng)過項目組討論和分析，采用了分級的顯示方案，即：最初顯示區(qū)級的信息，根據(jù)用戶的關(guān)注點，再逐步展開顯示鎮(zhèn)街級的信息，這樣速度提升明顯，去除了大量不必要的數(shù)據(jù)。

（4）互動展示：在用戶界面設(shè)置查詢條件輸入?yún)^(qū)域，用戶可以根據(jù)需要，輸入條件，提交給后臺。后臺通過從前臺獲取的條件為SVG準備數(shù)據(jù)。區(qū)劃信息包括邊界信息、邊界顏色、填充顏色、填充效果等，單位信息包括單位坐標、單位圖標、顯示方式等。這些信息按照一定的格式，發(fā)送到客戶端，通過SVG容器顯示出來。

系統(tǒng)內(nèi)部對不同的關(guān)注級別，設(shè)置有不同的顏色。系統(tǒng)根據(jù)條件對數(shù)據(jù)庫中數(shù)據(jù)進行分析處理，確定某個區(qū)劃或者某個單位應(yīng)該顯示的顏色。如果有特殊關(guān)注，還可以使用SVG的動畫效果來提高用戶的關(guān)注度。

我們使用了如下的技術(shù)和實現(xiàn)方案來實現(xiàn)預(yù)期效果：

（1）邊界數(shù)據(jù)和位置數(shù)據(jù)全部保存在數(shù)據(jù)庫中，而不是保存在SVG文件中，這樣做可以根據(jù)用戶需求有選擇的向客戶端發(fā)送顯示數(shù)據(jù)，而不是一次將所有數(shù)據(jù)全發(fā)到客戶端，再由客戶端來選擇顯示。這種方案不但減少了數(shù)據(jù)傳輸量，提高了客戶端的顯示速度，而且方便對數(shù)據(jù)的維護，比如單位地點改變，區(qū)劃范圍變化等維護任務(wù)，可以通過工具對數(shù)據(jù)庫的操作來完成，而不必修改該文件。

（2）每個區(qū)劃或者單位，在系統(tǒng)中擁有自己唯一的編號，而且客戶端和后臺統(tǒng)一，這樣可以方便的通過后臺控制區(qū)劃或者單位的顯示方式。

（3）將對SVG操作的函數(shù)封裝在一個JS文件中，通過JS文件中的函數(shù)來向后臺異步發(fā)送請求并接收后臺返回的數(shù)據(jù)，接收數(shù)據(jù)成功后，對數(shù)據(jù)進行分析，顯示在客戶端。這就需要客戶端數(shù)據(jù)分析模塊和后臺對數(shù)據(jù)的整理模塊采用統(tǒng)一的協(xié)議。

用戶查詢地圖圖像的生成步驟：

（1）獲取用戶設(shè)置的查詢參數(shù)

用戶在查詢頁面中設(shè)置相應(yīng)的查詢參數(shù)，如查詢方式、查詢?nèi)掌凇⒉樵兎秶挝恍再|(zhì)等等，并點擊確定按鈕后，程序首先會驗證用戶的參數(shù)設(shè)置是否正確，若不正確，則彈出錯誤提示；若通過驗證，再按照用戶設(shè)置的查詢參數(shù)傳到后續(xù)程序中。

這里的驗證分為兩部分，一部分是在瀏覽器端進行的，使用javascript代碼，在向服務(wù)器發(fā)送數(shù)據(jù)前完成驗證，這里的驗證是測試用戶輸入的數(shù)據(jù)是否合法，如日期格式、數(shù)字格式是否正確，參數(shù)是否設(shè)置完整等等。

另一部分驗證是在服務(wù)器端進行的，它主要驗證用戶是否擁有操作權(quán)限，以及數(shù)據(jù)庫中是否存在數(shù)據(jù)。只有通過驗證后，才能在數(shù)據(jù)庫中查詢相應(yīng)的數(shù)據(jù)。

（2）從數(shù)據(jù)庫中查詢數(shù)據(jù)

按照用戶設(shè)置的查詢模式，轉(zhuǎn)到相應(yīng)模式的查詢代碼中。然后再根據(jù)查詢參數(shù)，從數(shù)據(jù)庫中獲取相應(yīng)的數(shù)據(jù)。如：用戶設(shè)置的查詢模式為“按季度查詢，查詢區(qū)域為全市，時間段為2013年第一季度”，然后調(diào)用預(yù)設(shè)的方法來生成查詢參數(shù)，再傳入三層架構(gòu)中的業(yè)務(wù)邏輯層中的取得數(shù)據(jù)的方法，就得到了查詢的結(jié)果。

（3）對數(shù)據(jù)進行分析處理，并組織為適合顯示的形式

前面查詢得到的是一個數(shù)據(jù)表對象，里面的數(shù)據(jù)是與數(shù)據(jù)庫中對應(yīng)起來的，但這樣的數(shù)據(jù)卻不便于生成圖像，因此要對它進行重組，轉(zhuǎn)換為能源消耗數(shù)據(jù)和相關(guān)文字提示信息。在通過特定的協(xié)議，生成數(shù)據(jù)流，發(fā)送給客戶端的數(shù)據(jù)接收模塊。

（4）地圖的顯示

客戶端數(shù)據(jù)接收模塊接收到服務(wù)器傳來的數(shù)據(jù)流，初步校驗和分析后，發(fā)給不同的數(shù)據(jù)分析模塊，數(shù)據(jù)分析模塊根據(jù)特定的協(xié)議，將數(shù)據(jù)流組織成標準格式的XML，發(fā)送給圖像顯示模塊。圖像顯示模塊將數(shù)據(jù)顯示在客戶端瀏覽器的SVG容器內(nèi)。用戶便能在電子地圖上，瀏覽到自己發(fā)送請求后，產(chǎn)生的分析結(jié)果了，而且能支持放大、縮小、移動、打印等操作。

通過一段時間的開發(fā)和測試，該系統(tǒng)正式投入使用。該系統(tǒng)的應(yīng)用不但能為用戶提供豐富的數(shù)據(jù)查詢的服務(wù)，而且能將數(shù)據(jù)直觀的顯示在電子地圖上，為用戶的分析決策提供了很大的幫助。

參考文獻

[1]黃凱偉.SVG開發(fā)實踐[M].北京：電子工業(yè)出版社，2008.

[2]邱李華.SQLServer2008數(shù)據(jù)庫應(yīng)用教程[M].北京：人民郵電出版社，2012.