基于HTML5的電力線路圖動(dòng)態(tài)繪制研究

劉賢梅, 孫永穎, 趙婭

(東北石油大學(xué) 計(jì)算機(jī)與信息技術(shù)學(xué)院，大慶 163318)

基于HTML5的電力線路圖動(dòng)態(tài)繪制研究

劉賢梅, 孫永穎, 趙婭

(東北石油大學(xué) 計(jì)算機(jī)與信息技術(shù)學(xué)院，大慶 163318)

對(duì)HTML5關(guān)鍵技術(shù)進(jìn)行研究，提出了一種B/S架構(gòu)下的基于HTML5的電力線路圖動(dòng)態(tài)繪制方法。通過(guò)Canvas結(jié)合JavaScript腳本語(yǔ)言并利用Canvas分層繪制技術(shù)實(shí)現(xiàn)了電力線路圖的動(dòng)態(tài)繪制，具有跨平臺(tái)、免插件、易維護(hù)等特點(diǎn)。同時(shí)實(shí)現(xiàn)了基于關(guān)鍵字的圖形與數(shù)據(jù)庫(kù)的聯(lián)動(dòng)查詢，顯示線路圖中圖元的詳細(xì)信息?；趀xcel超鏈接技術(shù)實(shí)現(xiàn)了移動(dòng)端的線路圖查看。

HTML5； Canvas； 線路圖繪制； 聯(lián)動(dòng)查詢； excel超鏈接

0 引言

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

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

本文提出了一種B/S架構(gòu)下的基于HTML5的電力線路圖動(dòng)態(tài)繪制方法?；贏SP.NET平臺(tái)設(shè)計(jì)了線路圖管理系統(tǒng)，實(shí)現(xiàn)了電力線路圖的動(dòng)態(tài)繪制、基于關(guān)鍵字的圖形與數(shù)據(jù)庫(kù)的聯(lián)動(dòng)查詢、移動(dòng)端線路圖的查看，并結(jié)合實(shí)例對(duì)系統(tǒng)進(jìn)行了測(cè)試與分析。

1 繪制方法流程

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

2 繪制關(guān)鍵技術(shù)研究與實(shí)現(xiàn)

2.1 線路圖數(shù)據(jù)處理

2.1.1 數(shù)據(jù)關(guān)系來(lái)源

線路圖的數(shù)據(jù)大多來(lái)源于實(shí)際的線路布置，根據(jù)現(xiàn)場(chǎng)實(shí)際的情況，由圓、圓弧、三角、直線等基本符號(hào)中的一種或幾種組合代表線路圖中的電路元器件，如開關(guān)變臺(tái)、熔斷器、桿型、中轉(zhuǎn)站、變電所等。部分電路元器件示意圖如圖1所示。

(a) 開關(guān)變臺(tái)

(b) 真空熔斷器

(c) 直線桿

(d) 中轉(zhuǎn)站

(e) 變電所

圖1 電路元器件示意圖

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

2.1.2 坐標(biāo)變換

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

(1)

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

(2)

(3)

2.2 基于HTML5 Canvas的線路圖繪制

2.2.1 線路圖的分類繪制

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

var canvas= document.getElementById("mycanvas")

if (canvas.getContext){

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

}

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

var node = new JTopo.Node("");//定義節(jié)點(diǎn)

node.beginDegree = 0;//定義起點(diǎn)角度

node.width = node.height = d[i];//定義節(jié)點(diǎn)直徑

node.setLocation(x[i], y[i]);//定義節(jié)點(diǎn)坐標(biāo)

node.paint = function(g){

//繪制半徑為width/2的黑色實(shí)心圓

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

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

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

g.arc(0, 0, this.width/2, this.beginDegree, this.beginDegree+2*Math.PI);//節(jié)點(diǎn)實(shí)例化

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

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

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

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);}//進(jìn)行繪制

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

2.2.2 圖形與數(shù)據(jù)庫(kù)信息的聯(lián)動(dòng)查詢

在實(shí)際的線路圖中，所有的元器件都包含許多自身的屬性，為了讓用戶直觀的查詢各元器件的信息，本系統(tǒng)采用鏈接查詢的方式實(shí)現(xiàn)了線路圖圖元與數(shù)據(jù)庫(kù)信息聯(lián)動(dòng)查詢。根據(jù)識(shí)別圖中的關(guān)鍵字信息，與數(shù)據(jù)庫(kù)中的關(guān)鍵字進(jìn)行匹配，從而查詢出相關(guān)信息。用戶通過(guò)點(diǎn)擊具體塊名稱的文字，發(fā)出查詢請(qǐng)求，查詢oracle數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)根據(jù)關(guān)鍵字進(jìn)行數(shù)據(jù)匹配，將匹配后的數(shù)據(jù)通過(guò)頁(yè)面的形式顯示給用戶，完成圖形與數(shù)據(jù)庫(kù)的鏈接。

2.2.3 線路圖的分層繪制

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

2.3 基于excel超鏈接的移動(dòng)端線路圖查看

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

3 應(yīng)用與分析

本文所采用的實(shí)驗(yàn)室平臺(tái)為操作系統(tǒng)Windows7，內(nèi)存為2.00G，CPU為2.00GHz，服務(wù)器為IIS7.0，瀏覽器為360安全瀏覽器8.1的極速模式。在實(shí)驗(yàn)平臺(tái)上使用VS2010開發(fā)平臺(tái)，結(jié)合C#、JavaScript腳本語(yǔ)言，基于HTML5標(biāo)準(zhǔn)開發(fā)了線路圖管理子系統(tǒng)。本文對(duì)其中線路圖的繪制模塊進(jìn)行研究，實(shí)現(xiàn)了線路圖的繪制以及放大、縮小等功能，如圖2所示。

同時(shí)實(shí)現(xiàn)了圖形與數(shù)據(jù)庫(kù)的聯(lián)動(dòng)查詢，如圖3所示。

移動(dòng)端實(shí)現(xiàn)了基于excel超鏈接技術(shù)的線路圖如圖4所示，圖4-a中Excel超鏈接文件顯示了所有的線路名稱。選取了某個(gè)線路圖名稱鏈接，顯示的線路圖信息如圖4-b所示。測(cè)試結(jié)果表明，系統(tǒng)中繪圖模塊運(yùn)行穩(wěn)定，頁(yè)面響應(yīng)迅速，可視化效果良好，移動(dòng)端可隨時(shí)查看。

圖2 線路圖

圖3 圖形與數(shù)據(jù)庫(kù)的聯(lián)動(dòng)查詢圖

(a) Excel鏈接文件圖

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

4 總結(jié)

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

[1] 張慶，王浩. 基于RIA架構(gòu)的網(wǎng)絡(luò)監(jiān)控系統(tǒng)的研究和實(shí)現(xiàn)[J].計(jì)算機(jī)應(yīng)用與軟件，2012, 29(4): 163-166.

[2] Alexey Demin，代浣興，李新,等. 基于HTML5和WebGL的機(jī)器人3D環(huán)境下的運(yùn)動(dòng)學(xué)仿真[J].東北大學(xué)學(xué)報(bào)(自然科學(xué)版)，2014, 35(4): 664-668.

[3] 劉維峰，左澤軍，趙利強(qiáng),等. 基于HTML5的生產(chǎn)裝置實(shí)時(shí)監(jiān)測(cè)可視化[J].計(jì)算機(jī)工程與設(shè)計(jì)，2015，36(3): 810-813.

[4] 王淑慶，韓勇，張小壘,等. 基于HTML5的時(shí)空軌跡動(dòng)態(tài)可視化方法[J].計(jì)算機(jī)工程與設(shè)計(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

黑龍江省教育科學(xué)規(guī)劃重點(diǎn)課題(GJB1215019)的階段研究成果。

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

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

TP393

A

2017.05.11)