基于SVG和CIM/G的統一圖形包實現

江蘇省電力有限公司 閆朝陽 葛亞明 柴 赟 李 驍 楊 康 周 航 張振華 張首魁

電網中早期主要使用SVG 描述電網接線圖，在國家電網CIM/G 規范出來后，則存在著SVG 和CIM/G 兩種不同的圖形格式。目前雖已存在成熟的SVG 圖形展示技術，也存在CIM/G 的圖形包，但一方面這兩類圖形包基本都是面向客戶端應用、或依賴于瀏覽器的高版本和IE 的插件，不能兼容不同瀏覽器；另一方面這兩種圖形包在展示效果上存在一定的差異性。隨著電力系統各應用的深化建設，電網接線圖的應用范圍越來越廣泛。為更好支撐電網的各類圖形化應用，需要研究開發一個為WEB 應用服務的圖形包，不依賴于客戶端瀏覽器的版本或插件，突破SVG 與G 文件之間的差異，將其描述內容以統一的方式進行展現。

1 SVG 與G 語言差異性分析

作為兩種不同的圖形描述語言，SVG 和G 語言之間存在差異性，主要從定義、格式描述、當前應用范圍、圖形展示等幾個方面進行分析。

定義：SVG（Scalable Vector Graphics）是一種使用XML 定義的具有國際W3C 標準的語言，用來描述二維矢量及矢量/柵格圖形。G 語言是一種電力系統圖形描述語言，由全國電網運行與控制標準化管理委員會發布，是在IEC61970-453基于CIM 的圖形交換基礎上，針對SVG 文本較大且網絡傳輸較慢所發展起來的、針對電力系統的一種新型高效的圖形描述語言[1]。

格式描述：SVG 是使用XML 格式進行定義的。一般一個SVG 文件對應一個圖形描述，在這個文件描述中，需包含XML 的聲明、SVG DTD 的引用及圓、矩形等詳細的內部圖元定義。G 語言包括兩大類，一類是系統公有信息，包括電壓等級定義、圖元、間隔、菜單等，類似于C 語言的頭文件，交換頻率較低；另一類是某幅具體圖形的描述，采用類似于C 語言中函數調用的方式引用頭文件。這樣可大大降低圖形文件交換的數據量。本質上G 語言是一種基于標記的遵循xml 標準的純文本語言，并可和SVG 之間進行轉換。

應用范圍：SVG 由于具有規范、可交互、動態、高保真等優勢，被廣泛應用于互聯網且發展速度很快。G 語言則屬于是電力行業的規范，目前主要應用于電力行業內部描述電網接線圖。

圖形展示：SVG 由于其開放性應用廣泛。在客戶端展示過程中存在著眾多成熟的圖形包，如batik、Sketsa 等，而在瀏覽器端進行展示時存在著瀏覽器版本兼容的問題，Mozilla、Firefox、Opera、Chrome 都支持SVG，而在微軟發布的Internet Explorer9及后續版本中提供了對SVG 格式的支持，但對微軟IE9以前版本SVG 圖形不能被直接展示，需在IE 中增加第三方插件，如Adobe SVGViewer等。G 語言主要服務于電力領域，在客戶端的展示過程中各廠家開發了各種客戶端圖形包進行支撐。在瀏覽器端目前一般是將G 語言轉換為SVG 文件格式，然后使用成熟的SVG 展示插件顯示，這種方式和G語言設計初衷中的提升圖形傳輸顯示效率是有沖突的，因此G 語言在瀏覽器端尚沒有成熟的圖形包[2]。

2 統一圖形包實現

在電力公司內部存在著眾多在不同時期建設的信息化系統，部分系統對瀏覽器的依賴性很大，因此瀏覽器的版本無法進行統一或升級，面向WEB應用的統一圖形包需兼容各個版本的不同瀏覽器。

2.1 功能實現

統一圖形包中包括文件解析器、圖元定義器、內存模型處理、圖元展示器等幾個重要部分。其中文件解析器主要用于讀取圖形文件并處理SVG 與G圖形之間的差異；圖元定義器按照類型定義了用于展示的各個圖元組件，如圓、矩形等；內存模型處理主要用于對內存中的圖形描述信息進行結構優化、整合等；圖元展示器用于將各個圖元組件在前端界面上進行展示。在圖1中描述了圖形文件的處理過程，主要包括以下幾步：

圖1 圖形包文件展示

圖形包解析XML 格式的SVG 或G 語言的圖形文件描述，并按照配置信息對文件內容進行預處理，如SVG 中元件顏色顯示規則、部分元素信息忽略、字體轉換等；圖形包將XML 中的TAG 段按照圖元定義器進行讀取和解析，從而實現從XML中的描述到內存中圖元的轉換，如將中的內容轉換為內存模型中的circle 對象等；圖形包將XML 文件的讀取結果在內存中進行內存模型的構建，實現將XML 格式描述的SVG 對象轉換為樹形的對象關系描述；對內存模型中樹形結構進行遍歷，調用每一個內存圖元的展示方法，從而按照圖元將整個圖形顯示到界面上；按照信息文件中描述的內容，對所展示的圖形上的部分內容進行變化，如電網接線圖中的潮流信息、開關的開合狀態顯示等。在完成上述過程后，即實現了圖形包將圖形文件展示到前端界面的過程。

2.2 關鍵點

在統一圖形包的實現過程中，存在著一些關鍵點對圖形包的展示效率、后期操作的便捷性等起著至關重要的作用。

2.2.1 內存模型的構建

作為圖形顯示的中間環節，內存模型的構建及整合直接影響了圖形包的效率。在本圖形包的實現中使用的是樹形結構進行內存模型的管理，針對SVG 或G 語言文件的內容描述，將其中的文本描述轉換成為圖元對象的描述后，以

圖2 內存模型結構

2.2.2 事件響應設計

在圖形得以在WEB 端進行展示后，還需對圖形進行各種類型的操作，如對鼠標事件的響應等。在這種情況下SVG 文件內容是不能更改的，目前存在兩種形式實現這個目標：一是在圖形文件加載過程中直接在各個圖元上綁定相關的事件響應，使用戶后期的圖形操作效果類似于在網頁操作過程中的元素事件響應；二是在鼠標事件觸發的過程中計算鼠標在屏幕上的位置，并對應到圖形展示過程中的絕對定位，然后在內存模型樹中查找到該位置的圖元，再獲取到圖元響應的信息，實現對用戶操作的響應。

兩種方法各有優勢，前者在用戶實際操作時響應很快，但存在著一定的顯示延時，以及內存消耗較大；后者則相反，在響應事件時需經過一系列計算和映射，因此存在一定延時。在本圖形包的實現過程中，經過對電網接線圖中圖元數量的研究，以及顯示操作效率的比較，最終在事件響應的設計上使用第一種方案[3]。