基于SVG和CIM/G的統(tǒng)一圖形包實(shí)現(xiàn)

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

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

1 SVG 與G 語(yǔ)言差異性分析

作為兩種不同的圖形描述語(yǔ)言，SVG 和G 語(yǔ)言之間存在差異性，主要從定義、格式描述、當(dāng)前應(yīng)用范圍、圖形展示等幾個(gè)方面進(jìn)行分析。

定義：SVG（Scalable Vector Graphics）是一種使用XML 定義的具有國(guó)際W3C 標(biāo)準(zhǔn)的語(yǔ)言，用來描述二維矢量及矢量/柵格圖形。G 語(yǔ)言是一種電力系統(tǒng)圖形描述語(yǔ)言，由全國(guó)電網(wǎng)運(yùn)行與控制標(biāo)準(zhǔn)化管理委員會(huì)發(fā)布，是在IEC61970-453基于CIM 的圖形交換基礎(chǔ)上，針對(duì)SVG 文本較大且網(wǎng)絡(luò)傳輸較慢所發(fā)展起來的、針對(duì)電力系統(tǒng)的一種新型高效的圖形描述語(yǔ)言[1]。

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

應(yīng)用范圍：SVG 由于具有規(guī)范、可交互、動(dòng)態(tài)、高保真等優(yōu)勢(shì)，被廣泛應(yīng)用于互聯(lián)網(wǎng)且發(fā)展速度很快。G 語(yǔ)言則屬于是電力行業(yè)的規(guī)范，目前主要應(yīng)用于電力行業(yè)內(nèi)部描述電網(wǎng)接線圖。

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

2 統(tǒng)一圖形包實(shí)現(xiàn)

在電力公司內(nèi)部存在著眾多在不同時(shí)期建設(shè)的信息化系統(tǒng)，部分系統(tǒng)對(duì)瀏覽器的依賴性很大，因此瀏覽器的版本無法進(jìn)行統(tǒng)一或升級(jí)，面向WEB應(yīng)用的統(tǒng)一圖形包需兼容各個(gè)版本的不同瀏覽器。

2.1 功能實(shí)現(xiàn)

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

圖1 圖形包文件展示

圖形包解析XML 格式的SVG 或G 語(yǔ)言的圖形文件描述，并按照配置信息對(duì)文件內(nèi)容進(jìn)行預(yù)處理，如SVG 中元件顏色顯示規(guī)則、部分元素信息忽略、字體轉(zhuǎn)換等；圖形包將XML 中的TAG 段按照?qǐng)D元定義器進(jìn)行讀取和解析，從而實(shí)現(xiàn)從XML中的描述到內(nèi)存中圖元的轉(zhuǎn)換，如將中的內(nèi)容轉(zhuǎn)換為內(nèi)存模型中的circle 對(duì)象等；圖形包將XML 文件的讀取結(jié)果在內(nèi)存中進(jìn)行內(nèi)存模型的構(gòu)建，實(shí)現(xiàn)將XML 格式描述的SVG 對(duì)象轉(zhuǎn)換為樹形的對(duì)象關(guān)系描述；對(duì)內(nèi)存模型中樹形結(jié)構(gòu)進(jìn)行遍歷，調(diào)用每一個(gè)內(nèi)存圖元的展示方法，從而按照?qǐng)D元將整個(gè)圖形顯示到界面上；按照信息文件中描述的內(nèi)容，對(duì)所展示的圖形上的部分內(nèi)容進(jìn)行變化，如電網(wǎng)接線圖中的潮流信息、開關(guān)的開合狀態(tài)顯示等。在完成上述過程后，即實(shí)現(xiàn)了圖形包將圖形文件展示到前端界面的過程。

2.2 關(guān)鍵點(diǎn)

在統(tǒng)一圖形包的實(shí)現(xiàn)過程中，存在著一些關(guān)鍵點(diǎn)對(duì)圖形包的展示效率、后期操作的便捷性等起著至關(guān)重要的作用。

2.2.1 內(nèi)存模型的構(gòu)建

作為圖形顯示的中間環(huán)節(jié)，內(nèi)存模型的構(gòu)建及整合直接影響了圖形包的效率。在本圖形包的實(shí)現(xiàn)中使用的是樹形結(jié)構(gòu)進(jìn)行內(nèi)存模型的管理，針對(duì)SVG 或G 語(yǔ)言文件的內(nèi)容描述，將其中的文本描述轉(zhuǎn)換成為圖元對(duì)象的描述后，以

圖2 內(nèi)存模型結(jié)構(gòu)

2.2.2 事件響應(yīng)設(shè)計(jì)

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

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