基于SVG的電網(wǎng)拓?fù)淇梢暬芯?/h1>
2019-10-21 23:04:21管亞安宋海龍王海東李軍海
中國電氣工程學(xué)報(bào) 2019年8期
管亞安 宋海龍 王海東 李軍海
摘 要：可視化技術(shù)可以幫助運(yùn)行人員在最短時(shí)間內(nèi)直觀準(zhǔn)確的掌握電力系統(tǒng)中最關(guān)鍵、最核心的問題。本文主要介紹了SVG的技術(shù)特點(diǎn)和SVG在電力系統(tǒng)軟件圖形化應(yīng)用中的基本方法，并重點(diǎn)闡述了基于SVG的電網(wǎng)拓?fù)淇梢暬夹g(shù)在電力系統(tǒng)中的應(yīng)用。
關(guān)鍵詞：可視化，SVG，電網(wǎng)，圖形化
引 言
SVG 依靠自身的優(yōu)勢成為新一代的圖形交互標(biāo)準(zhǔn)，可被多種工具讀寫和修改，與傳統(tǒng)圖像格式相比尺寸更小、可壓縮性更強(qiáng)，可在多種分辨率下高質(zhì)量打印。SVG圖像中的文本是可選的、可搜索的，是開放的標(biāo)準(zhǔn)，不需要額外的程序來處理，非常利于在網(wǎng)上發(fā)布，提升了電力系統(tǒng)的可視化程度。目前很多電力系統(tǒng)應(yīng)用軟件或者仿真軟件可以做到對電力系統(tǒng)可視化圖形的顯示和支持，但是這些系統(tǒng)采用各自不同的實(shí)現(xiàn)技術(shù)和方法，不同系統(tǒng)之間的圖形和數(shù)據(jù)共享困難，并且對于不同的操作平臺(tái)系統(tǒng)的移植和兼容性較差，本文主要介紹了SVG的技術(shù)特點(diǎn)和SVG在電力系統(tǒng)軟件圖形化應(yīng)用中的基本方法，闡述了SVG在電力系統(tǒng)中的具體應(yīng)用。
1、電力圖元的SVG 描述
1.1、電力系統(tǒng)中的SVG 圖元的要求
電力系統(tǒng)中的圖形是由大量的圖元（Element）構(gòu)成的，因此，將圖元進(jìn)行SVG的描述是標(biāo)準(zhǔn)化圖形的基礎(chǔ)。完備的圖元描述要求有：對圖元幾何形狀的完整表述;利于定義圖元的應(yīng)用屬性及擴(kuò)充;利于定義圖元與外界交互功能;能夠?qū)D元的幾何形狀和應(yīng)用屬性進(jìn)行存取和顯示。
1.2 、電力SVG 圖元的具體描述
1.2.1、幾何信息
幾何信息是基本圖形的概述，應(yīng)包含圖形類型，坐標(biāo)位置和坐標(biāo)單元。SVG提供了六種基本元素，在SVG文檔中，圖元的幾何形狀定義部分一般由元素構(gòu)成，可以在元素中定義包含于這個(gè)元素中的樣式風(fēng)格、信息等特性。
1.2.2、交互事件
交互事件應(yīng)包括事件名和響應(yīng)函數(shù)的描述，在SVG中還定義了大量的標(biāo)準(zhǔn)事件支持圖元與腳本語言的交互功能，交互事件的定義只需要定義一個(gè)事件響應(yīng)函數(shù)，并建立它與圖元的事件名之間的映射關(guān)系。
1.2.3 、Ajax與SVG的結(jié)合
Ajax與SVG圖形可以很有效的結(jié)合，并通過Web發(fā)布圖形。其步驟是：首先執(zhí)行Javascript事件觸發(fā)，用戶操作Web頁面中的SVG圖形的某個(gè)控件或文字鏈接，觸發(fā)一個(gè)Javascript事件;然后Javascript事件處理函數(shù)執(zhí)行，并根據(jù)情況向服務(wù)器發(fā)送電力設(shè)備數(shù)據(jù)或信息的查詢要求，將用戶請求提交給服務(wù)器;服務(wù)器接收用戶請求后，根據(jù)URL地址判斷并響應(yīng)用戶行為，并將相應(yīng)結(jié)果以HTMUXHTML格式返回;Javascript調(diào)用DOM處理解析的數(shù)據(jù)，將解析出來的電網(wǎng)數(shù)據(jù)寫入到SVG圖形的相應(yīng)節(jié)點(diǎn)中，從而更新界面。
2、電力SVG圖形 文件的設(shè)計(jì)實(shí)現(xiàn)
2.1、電力SVG 文件的設(shè)計(jì)
電力SVG文檔是基于XML的，或者說SVG本身就是XML，所以對于XML文檔的管理和操作的方法對SVG 文檔而言是普遍適用的。在XML 文檔的解析中，有兩種主要的方法：文檔對象模型接口（DOM）和XML 簡易應(yīng)用程序編程接口（SAX）。我們采用Notepad++和Inkscape 作為開發(fā)的平臺(tái)，并用IE瀏覽器作為測試的平臺(tái)，用DOM接口分別對電力中的SVG 文件實(shí)現(xiàn)管理和操作，然后結(jié)合傳統(tǒng)的索引結(jié)構(gòu)，以DOM 作為解析器，對電力大體積的SVG 文件管理建立了索引結(jié)構(gòu)，并且給出具體的實(shí)現(xiàn)的方法和結(jié)果。
2.2、圖層的定義
對SVG文件本身而言，并沒有圖層元素，但是由于SVG采用DOM的管理結(jié)構(gòu)，因此實(shí)現(xiàn)圖層的管理很方便。在電力SVG文件中，我們一般采用元素對圖層進(jìn)行定義。這樣我們在進(jìn)行電力系統(tǒng)圖形的交互的時(shí)候，就可以把各類電力設(shè)備圖元按照CIM模型進(jìn)行層次管理，在每一層下面放一類設(shè)備，這樣既可以增強(qiáng)整個(gè)文件的直觀性，也可以方便的實(shí)現(xiàn)設(shè)備的屬性、以及對設(shè)備元件進(jìn)行選中、刪除等操作。
2.3、樣式
在電力系統(tǒng)中有很多標(biāo)準(zhǔn)字體和顏色，例如不同電壓等級的設(shè)備顯示顏色是不同的，所以在公共部分定義一些公共字體和顏色是非常有好處的，SVG中幾乎所有的可視化元素可以使用“Style”屬性，“Style”屬性的值是在CSS樣式定義的字符串，樣式項(xiàng)使用“樣式參數(shù)值”的形式表示，各項(xiàng)之間使用分好隔開?！皊tyle”屬性作為被說明元素的一個(gè)屬性而存在，其屬性值（即參數(shù)的內(nèi)容）說明了本元素應(yīng)該怎樣被渲染?！皊tyle”的參數(shù)多種多樣，幾乎涵蓋了從文字到圖形、從色彩到濾鏡等各個(gè)方面。
對于SVG內(nèi)嵌的CSS語句，需要通過在元素中定義
管亞安 宋海龍 王海東 李軍海
摘 要：可視化技術(shù)可以幫助運(yùn)行人員在最短時(shí)間內(nèi)直觀準(zhǔn)確的掌握電力系統(tǒng)中最關(guān)鍵、最核心的問題。本文主要介紹了SVG的技術(shù)特點(diǎn)和SVG在電力系統(tǒng)軟件圖形化應(yīng)用中的基本方法，并重點(diǎn)闡述了基于SVG的電網(wǎng)拓?fù)淇梢暬夹g(shù)在電力系統(tǒng)中的應(yīng)用。
關(guān)鍵詞：可視化，SVG，電網(wǎng)，圖形化
引 言
SVG 依靠自身的優(yōu)勢成為新一代的圖形交互標(biāo)準(zhǔn)，可被多種工具讀寫和修改，與傳統(tǒng)圖像格式相比尺寸更小、可壓縮性更強(qiáng)，可在多種分辨率下高質(zhì)量打印。SVG圖像中的文本是可選的、可搜索的，是開放的標(biāo)準(zhǔn)，不需要額外的程序來處理，非常利于在網(wǎng)上發(fā)布，提升了電力系統(tǒng)的可視化程度。目前很多電力系統(tǒng)應(yīng)用軟件或者仿真軟件可以做到對電力系統(tǒng)可視化圖形的顯示和支持，但是這些系統(tǒng)采用各自不同的實(shí)現(xiàn)技術(shù)和方法，不同系統(tǒng)之間的圖形和數(shù)據(jù)共享困難，并且對于不同的操作平臺(tái)系統(tǒng)的移植和兼容性較差，本文主要介紹了SVG的技術(shù)特點(diǎn)和SVG在電力系統(tǒng)軟件圖形化應(yīng)用中的基本方法，闡述了SVG在電力系統(tǒng)中的具體應(yīng)用。
1、電力圖元的SVG 描述
1.1、電力系統(tǒng)中的SVG 圖元的要求
電力系統(tǒng)中的圖形是由大量的圖元（Element）構(gòu)成的，因此，將圖元進(jìn)行SVG的描述是標(biāo)準(zhǔn)化圖形的基礎(chǔ)。完備的圖元描述要求有：對圖元幾何形狀的完整表述;利于定義圖元的應(yīng)用屬性及擴(kuò)充;利于定義圖元與外界交互功能;能夠?qū)D元的幾何形狀和應(yīng)用屬性進(jìn)行存取和顯示。
1.2 、電力SVG 圖元的具體描述
1.2.1、幾何信息
幾何信息是基本圖形的概述，應(yīng)包含圖形類型，坐標(biāo)位置和坐標(biāo)單元。SVG提供了六種基本元素，在SVG文檔中，圖元的幾何形狀定義部分一般由
1.2.2、交互事件
交互事件應(yīng)包括事件名和響應(yīng)函數(shù)的描述，在SVG中還定義了大量的標(biāo)準(zhǔn)事件支持圖元與腳本語言的交互功能，交互事件的定義只需要定義一個(gè)事件響應(yīng)函數(shù)，并建立它與圖元的事件名之間的映射關(guān)系。
1.2.3 、Ajax與SVG的結(jié)合
Ajax與SVG圖形可以很有效的結(jié)合，并通過Web發(fā)布圖形。其步驟是：首先執(zhí)行Javascript事件觸發(fā)，用戶操作Web頁面中的SVG圖形的某個(gè)控件或文字鏈接，觸發(fā)一個(gè)Javascript事件;然后Javascript事件處理函數(shù)執(zhí)行，并根據(jù)情況向服務(wù)器發(fā)送電力設(shè)備數(shù)據(jù)或信息的查詢要求，將用戶請求提交給服務(wù)器;服務(wù)器接收用戶請求后，根據(jù)URL地址判斷并響應(yīng)用戶行為，并將相應(yīng)結(jié)果以HTMUXHTML格式返回;Javascript調(diào)用DOM處理解析的數(shù)據(jù)，將解析出來的電網(wǎng)數(shù)據(jù)寫入到SVG圖形的相應(yīng)節(jié)點(diǎn)中，從而更新界面。
2、電力SVG圖形 文件的設(shè)計(jì)實(shí)現(xiàn)
2.1、電力SVG 文件的設(shè)計(jì)
電力SVG文檔是基于XML的，或者說SVG本身就是XML，所以對于XML文檔的管理和操作的方法對SVG 文檔而言是普遍適用的。在XML 文檔的解析中，有兩種主要的方法：文檔對象模型接口（DOM）和XML 簡易應(yīng)用程序編程接口（SAX）。我們采用Notepad++和Inkscape 作為開發(fā)的平臺(tái)，并用IE瀏覽器作為測試的平臺(tái)，用DOM接口分別對電力中的SVG 文件實(shí)現(xiàn)管理和操作，然后結(jié)合傳統(tǒng)的索引結(jié)構(gòu)，以DOM 作為解析器，對電力大體積的SVG 文件管理建立了索引結(jié)構(gòu)，并且給出具體的實(shí)現(xiàn)的方法和結(jié)果。
2.2、圖層的定義
對SVG文件本身而言，并沒有圖層元素，但是由于SVG采用DOM的管理結(jié)構(gòu)，因此實(shí)現(xiàn)圖層的管理很方便。在電力SVG文件中，我們一般采用
2.3、樣式
在電力系統(tǒng)中有很多標(biāo)準(zhǔn)字體和顏色，例如不同電壓等級的設(shè)備顯示顏色是不同的，所以在公共部分定義一些公共字體和顏色是非常有好處的，SVG中幾乎所有的可視化元素可以使用“Style”屬性，“Style”屬性的值是在CSS樣式定義的字符串，樣式項(xiàng)使用“樣式參數(shù)值”的形式表示，各項(xiàng)之間使用分好隔開?！皊tyle”屬性作為被說明元素的一個(gè)屬性而存在，其屬性值（即參數(shù)的內(nèi)容）說明了本元素應(yīng)該怎樣被渲染?！皊tyle”的參數(shù)多種多樣，幾乎涵蓋了從文字到圖形、從色彩到濾鏡等各個(gè)方面。
對于SVG內(nèi)嵌的CSS語句，需要通過在