基于HTML5的電力線路圖動態繪制研究

劉賢梅, 孫永穎, 趙婭

(東北石油大學 計算機與信息技術學院，大慶 163318)

基于HTML5的電力線路圖動態繪制研究

劉賢梅, 孫永穎, 趙婭

(東北石油大學 計算機與信息技術學院，大慶 163318)

對HTML5關鍵技術進行研究，提出了一種B/S架構下的基于HTML5的電力線路圖動態繪制方法。通過Canvas結合JavaScript腳本語言并利用Canvas分層繪制技術實現了電力線路圖的動態繪制，具有跨平臺、免插件、易維護等特點。同時實現了基于關鍵字的圖形與數據庫的聯動查詢，顯示線路圖中圖元的詳細信息?；趀xcel超鏈接技術實現了移動端的線路圖查看。

HTML5； Canvas； 線路圖繪制； 聯動查詢； excel超鏈接

0 引言

隨著科學技術和工程技術的發展，電力生產中的設備數量日漸增多，安全管理日趨嚴格。這就要求員工隨時查看線路信息，以便檢查線路故障。隨著移動端的迅速發展，用戶的需求不再滿足于PC端，而是轉向使用移動設備隨時隨地進行查詢管理與PC端進行管理維護相結合。電力系統中對于線路圖的繪制管理主要是基于B/S模式實現的。傳統的基于HTML的B/S模式開發客戶端表現能力較差，服務器端數據處理壓力大?；赗IA技術的B/S模式，主要包括Flash和Silverlight等，能提升客戶端的表現能力，但過于依賴瀏覽器插件，這些插件在使用之前都必須下載和安裝，有些還存在瀏覽器兼容性的問題，降低了用戶的體驗性和安全性[1,2]。目前大多數的移動端設備不支持插件，因此也不利于移動端設備的移植。

近年來出現的HTML5技術對實現數據處理量大、實時性要求高的Web應用具有較大優勢[3]。HTML5提供了Canvas和SVG接口對數據進行可視化繪制，使Web開發人員在瀏覽器端使用標準的Web技術實現免插件、跨平臺的Web數據可視化成為可能[4]。目前，幾乎所有的主流瀏覽器都支持HTML5標準，如IE9以上版本(含IE9)、Firefox(火狐瀏覽器)、Chrome(谷歌瀏覽器)和Safari(狩獵)等。而且現在移動終端的百度瀏覽器、UC瀏覽器和Opera等瀏覽器也都實現了對HTML5主要標準的支持，使在移動端實現數據的可視化成為可能。

本文提出了一種B/S架構下的基于HTML5的電力線路圖動態繪制方法?；贏SP.NET平臺設計了線路圖管理系統，實現了電力線路圖的動態繪制、基于關鍵字的圖形與數據庫的聯動查詢、移動端線路圖的查看，并結合實例對系統進行了測試與分析。

1 繪制方法流程

本文采用B/S結構，服務器端利用ASP.NET技術為基礎進行設計構建，客戶端以W3C 最近發布的HTML5參考標準為依據進行設計，基于HTML5Canvas、JavaScript等技術對線路圖的動態繪制進行研究，開發了電力生產的線路圖管理系統。按照系統的層次結構分析，將該系統分為表現層、業務邏輯層、數據層三個層次進行構建。利用MVC模式進行開發，做到了視圖、控制器和模型的分離，有利于標準化，降低層與層之間的依賴，實現了各層間連接的“高內聚，低耦合”。數據層采用數據庫Oracle10g結合AutoCAD數據解析進行設計，其主要負責存儲和管理線路圖繪制所需數據。業務邏輯層采用Web應用服務器—IIS，同時Web應用服務器端程序使用ASP.NET編寫，其主要設計完成存在于服務器文件系統中符合客戶瀏覽器端請求的線路圖繪制功能與關鍵字匹配信息聯動查詢，同時完成excel超鏈接文件及插入PNG圖片的excel文件的下載功能。根據客戶瀏覽器端的請求對線路圖數據進行預處理，包括數據關系來源、坐標變換等，然后將預處理后的數據傳輸到客戶瀏覽器端。表現層即為顯示層，分為PC端的顯示和移動端的查看。PC端不同平臺設備根據自身瀏覽器對預處理后的數據進行數據解析，通過HTML5 Canvas和Javascript腳本技術實現動態交互繪制渲染并顯示。移動端通過打開拷貝到自身的excel文件進行線路圖的查看。

2 繪制關鍵技術研究與實現

2.1 線路圖數據處理

2.1.1 數據關系來源

線路圖的數據大多來源于實際的線路布置，根據現場實際的情況，由圓、圓弧、三角、直線等基本符號中的一種或幾種組合代表線路圖中的電路元器件，如開關變臺、熔斷器、桿型、中轉站、變電所等。部分電路元器件示意圖如圖1所示。

(a) 開關變臺

(b) 真空熔斷器

(c) 直線桿

(d) 中轉站

(e) 變電所

圖1 電路元器件示意圖

首先根據實際情況，采用AutoCAD繪圖工具繪制.dwg格式的線路圖，解析圖元的類型及存儲端點的位置、顏色等信息。對解析后的數據進行清洗，剔除畫圖過程中產生的奇異點，保證繪圖的準確性。

2.1.2 坐標變換

線路圖數據由繪制的CAD信息提供，由于繪制時的比例及大小存在人為等不可控因素，為了保證線路圖的顯示保持原圖比例，需要規定畫布的比例，從而使繪制的線路圖不會變形。設數據集中最大的寬度為Wmax，最小的寬度為Wmin，數據集中最大的高度為Hmax，最小的高度為Hmin，畫布寬度為W，畫布高度為H，其畫布比例的變換公式如式(1)。

(1)

為了讓繪制的線路圖顯示在可視化的Canvas畫布上，需要對坐標進行等比例變換，確定畫布大小，找出原始數據的極值，轉化成相對坐標，設原始數據的坐標為(X,Y)，數據集中的最小值坐標為(Xmin,Ymin)，最大值坐標為(Xmax,Ymax)，畫布高為H，寬為W，其相對坐標變換公式如式(2)、式(3)。

(2)

(3)

2.2 基于HTML5 Canvas的線路圖繪制

2.2.1 線路圖的分類繪制

線路圖管理中的線路圖繪制采用HTML5標準下的Canvas接口與JavaScript腳本相結合的方法實現線路圖的可視化顯示。具體步驟如下：首先定義Canvas標簽，其目的是充當2D渲染上下文的封裝。每個Canvas元素都有一個對應的context對象(上下文對象)，CanvasAPI定義在這個context對象上面，所以需要獲取這個對象，方法是使用getContext方法。getContext方法指定參數2d，表示該Canvas對象用于生成2D圖案。

var canvas= document.getElementById("mycanvas")

if (canvas.getContext){

var context= canvas.getContext('2d');

}

然后從后臺數據庫中查詢出線路圖中代表元器件的組合形狀即圖元的端點、顏色等信息。利用ajax的方法，通過定義同名的Array()數據組進行前后臺的參數傳遞，將后臺信息傳到HTML頁，由瀏覽器進行解析繪制。對需要繪制的圖元進行分類，如圓、直線、三角等。分別編寫JavaScript腳本對一類圖元進行繪制，繪制時只需區分類型，重復調用腳本即可。以圓為例，部分繪制腳本如下：

var node = new JTopo.Node("");//定義節點

node.beginDegree = 0;//定義起點角度

node.width = node.height = d[i];//定義節點直徑

node.setLocation(x[i], y[i]);//定義節點坐標

node.paint = function(g){

//繪制半徑為width/2的黑色實心圓

g.beginPath();//開始路徑

g.moveTo(0,0);//定義繪制原點

g.fillStyle = 'rgba(0,0,0,' + this.alpha + ')';//節點顏色填充

g.arc(0, 0, this.width/2, this.beginDegree, this.beginDegree+2*Math.PI);//節點實例化

g.closePath();//結束路徑

g.save();//保存元素

//繪制半徑為width/2-1的白色實心圓

g.beginPath();

g.moveTo(0,0);

g.fillStyle ='rgba(255,255,255,' + this.alpha + ')';

g.arc(0, 0, this.width/2-1, this.beginDegree, this.beginDegree + 2*Math.PI);

g.closePath();

g.save();

this.paintText(g);}//進行繪制

scene1.add(node);//繪制結果可視化

2.2.2 圖形與數據庫信息的聯動查詢

在實際的線路圖中，所有的元器件都包含許多自身的屬性，為了讓用戶直觀的查詢各元器件的信息，本系統采用鏈接查詢的方式實現了線路圖圖元與數據庫信息聯動查詢。根據識別圖中的關鍵字信息，與數據庫中的關鍵字進行匹配，從而查詢出相關信息。用戶通過點擊具體塊名稱的文字，發出查詢請求，查詢oracle數據庫，數據庫根據關鍵字進行數據匹配，將匹配后的數據通過頁面的形式顯示給用戶，完成圖形與數據庫的鏈接。

2.2.3 線路圖的分層繪制

為了解決繪制時部分圖形的遮擋問題，使用HTML5Canvas的分層繪制技術進行繪制。首先對圖形進行分類?？赡鼙徽趽醯膱D形位于畫布的上層，其它圖形位于畫布的下層。在本文中，圓位于下層，其它圖形位于上層。使用Canvas分層繪制時，在DOM中創建不同Canvas畫布使各畫布共存于視區的同一位置，按照畫布應該顯示的順序來樣式化z-index樣式，從而管理圖層順序。

2.3 基于excel超鏈接的移動端線路圖查看

為了滿足用戶使用移動端設備隨時隨地查詢線路圖信息的需要，采用excel超鏈接技術實現通過線路名稱查看線路圖信息的功能。由于部分移動端不支持excel鏈接到圖片，而幾乎所有的移動端都支持excel鏈接到excel，因此采用將線路圖以圖片的形式插入到excel中的方式，以便用戶查看。首先用戶根據電力部門所在的樹狀結構鏈接在PC端對該部門線路圖進行批量繪制，并導出PNG格式的圖片，將圖片插入excel中，并同時生成帶有超鏈接的excel文件。對全部的excel文件進行壓縮并打包下載到本地，解壓后拷貝到用戶的移動設備中。用戶通過點擊超鏈接進行查看線路圖信息。

3 應用與分析

本文所采用的實驗室平臺為操作系統Windows7，內存為2.00G，CPU為2.00GHz，服務器為IIS7.0，瀏覽器為360安全瀏覽器8.1的極速模式。在實驗平臺上使用VS2010開發平臺，結合C#、JavaScript腳本語言，基于HTML5標準開發了線路圖管理子系統。本文對其中線路圖的繪制模塊進行研究，實現了線路圖的繪制以及放大、縮小等功能，如圖2所示。

同時實現了圖形與數據庫的聯動查詢，如圖3所示。

移動端實現了基于excel超鏈接技術的線路圖如圖4所示，圖4-a中Excel超鏈接文件顯示了所有的線路名稱。選取了某個線路圖名稱鏈接，顯示的線路圖信息如圖4-b所示。測試結果表明，系統中繪圖模塊運行穩定，頁面響應迅速，可視化效果良好，移動端可隨時查看。

圖2 線路圖

圖3 圖形與數據庫的聯動查詢圖

(a) Excel鏈接文件圖

(b) 鏈接線路圖信息顯示圖4 Excel超連接技術線路圖

4 總結

本文提出了一種B/S架構下的基于HTML5的電力線路圖動態繪制方法，相比傳統的基于HTML和基于RIA的B/S模式下的圖形繪制，該方法具有跨平臺、免插件、后期易維護更新等方面的明顯優勢。用戶客戶端不安裝任何第三方插件就可以在瀏覽器端實現線路圖的繪制。同時實現了基于關鍵字的圖形與數據庫信息的聯動查詢。最后實現了采用excel超鏈接技術實現通過線路名稱查看線路圖信息的功能，滿足用戶隨時隨地使用移動設備檢查線路故障的要求。

[1] 張慶，王浩. 基于RIA架構的網絡監控系統的研究和實現[J].計算機應用與軟件，2012, 29(4): 163-166.

[2] Alexey Demin，代浣興，李新,等. 基于HTML5和WebGL的機器人3D環境下的運動學仿真[J].東北大學學報(自然科學版)，2014, 35(4): 664-668.

[3] 劉維峰，左澤軍，趙利強,等. 基于HTML5的生產裝置實時監測可視化[J].計算機工程與設計，2015，36(3): 810-813.

[4] 王淑慶，韓勇，張小壘,等. 基于HTML5的時空軌跡動態可視化方法[J].計算機工程與設計，2015，36(12): 3318-3323.

Research on Electricity Circuit Diagram Dynamic Map Based on HTML5

Liu Xianmei, Sun Yongying, Zhao Ya

(School of Computer & Information Technology, Northeast Petroleum University, Daqing 163318, China)

Through the research on key technologies of HTML5, a dynamic drawing method of electricity circuit diagram was propsed based on HTML5 under B/S architecture. We realized the dynamic drawing of electricity circuit diagram by combining Canvas with JavaScript script language and the Canvas hierarchical rendering technology. HTML5 has the characteristics of cross platform, free plug-in, easy maintenance, etc. At the same time, it achieves displaying detailed information about the elements in the circuit diagram with the linked query of graphics and database based on keywords. Hyperlink technology which is based on excel realizes checking the mobile terminal circuit diagram.

HTML5; Canvas; circuit diagram draw; linkage query; excel hyperlink

黑龍江省教育科學規劃重點課題(GJB1215019)的階段研究成果。

劉賢梅(1968-)，女，山東省日照市，教授，碩士生導師，研究方向:虛擬現實方向。 孫永穎(1993-)，女，黑龍江省綏化市，碩士研究生，研究方向:多媒體方向。 趙婭(1980-)，女，河南省臨水市，副教授，碩士研究生，研究方向:虛擬現實方向。

1007-757X(2017)08-0020-04

TP393

A

2017.05.11)