基于HTML5的油田混輸管道拓?fù)鋱D動(dòng)態(tài)繪制的研究

劉賢梅, 張錫強(qiáng), 趙婭(東北石油大學(xué),計(jì)算機(jī)與信息技術(shù)學(xué)院，大慶 163318)

基于HTML5的油田混輸管道拓?fù)鋱D動(dòng)態(tài)繪制的研究

劉賢梅, 張錫強(qiáng), 趙婭
(東北石油大學(xué),計(jì)算機(jī)與信息技術(shù)學(xué)院，大慶 163318)

隨著油田生產(chǎn)的需要與互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，油田管道的拓?fù)鋱D應(yīng)運(yùn)而生。用戶對(duì)油田管道拓?fù)鋱D的使用和交互體驗(yàn)的要求也越來(lái)越高，傳統(tǒng)的拓?fù)鋱D繪制技術(shù)已難以滿足用戶的需求。HTML5能夠解決基于插件的Web矢量拓?fù)鋱D顯示技術(shù)存在著需要下載安裝、難以使用跨平臺(tái)跨瀏覽器、存在不安全隱患以及在信息分析和交互能力上存在明顯的缺陷等問(wèn)題。采用HTML5的Canvas特性，利用HTML5的圖形圖像處理功能完成了對(duì)油田管道拓?fù)鋱D的動(dòng)態(tài)繪制。

HTML5； Canvas； 油田管道； 拓?fù)鋱D繪制

0 引言

隨著經(jīng)濟(jì)和社會(huì)的發(fā)展，石油的需求量越來(lái)越大，油田的智能化已經(jīng)成為解決油田生產(chǎn)問(wèn)題的根本關(guān)鍵，混輸管道是油田生產(chǎn)當(dāng)中最重要的基礎(chǔ)設(shè)施之一，隨著油田生產(chǎn)力的增長(zhǎng)，管道的布設(shè)也越來(lái)越多，如何直觀的反應(yīng)管道的布局、隨時(shí)隨地利用管道拓?fù)鋱D及其相關(guān)數(shù)據(jù)也變的越來(lái)越重要。然而用戶己不滿足于傳統(tǒng)的基于C/S模式獲取管道信息的方式，并且傳統(tǒng)的基于HTML的超級(jí)文本標(biāo)記語(yǔ)言的技術(shù)，不能夠直接操作數(shù)據(jù)進(jìn)行位圖繪制，這種方法需要在客戶端的瀏覽器安裝插件以讀取矢量的油田拓?fù)鋱D數(shù)據(jù)并進(jìn)行繪制和實(shí)現(xiàn)各種查詢和分析功能。但是這些插件在使用之前都必須得下載和安裝，有些還存在著瀏覽器兼容性的問(wèn)題，給用戶帶來(lái)了諸多的不便，而且由于插件大多需要獲取本地資源操作權(quán)限，也給用戶帶來(lái)不安全的隱患。HTML5的強(qiáng)大功能可在油田數(shù)據(jù)化時(shí)代給用戶帶來(lái)一種全新的應(yīng)用方式及一種新穎的用戶體驗(yàn)。在HTML5平臺(tái)上，圖像、音頻、視頻、動(dòng)畫(huà)與客戶端的各種交互過(guò)程都被標(biāo)準(zhǔn)化。HTML5在頁(yè)面上直接支持矢量數(shù)據(jù)的處理能力,并且有增加和本地?cái)?shù)據(jù)存儲(chǔ)等各種新的特性。其中全新的Canvas繪圖元素就是專門(mén)為了客戶端繪制矢量圖形而設(shè)計(jì)的，它可以實(shí)現(xiàn)無(wú)插件的矢量數(shù)據(jù)繪制與渲染，無(wú)需客戶端安裝專有的插件，為擺脫第三方插件實(shí)現(xiàn)矢量數(shù)據(jù)的可視化提供了技術(shù)基礎(chǔ)。為構(gòu)建矢量化、跨平臺(tái)跨瀏覽器的油田管道拓?fù)鋱D繪制服務(wù)提供了一種方便快捷的解決思路。本文針對(duì)結(jié)合HTML5的Canvas的多種繪制路徑，矩形，圓形，字符以及圖像處理的特性，采用了Canvas依托動(dòng)態(tài)數(shù)據(jù)繪制油田管道拓?fù)鋱D的開(kāi)發(fā)流程，對(duì)基于的矢量油田管道拓?fù)鋱D服務(wù)及相關(guān)應(yīng)用進(jìn)行了深入的研究，并通過(guò)原型的實(shí)現(xiàn)證明了該方法的實(shí)用性和可行性。

1 HTML5相關(guān)技術(shù)

1.1 HTML5

HTML5這個(gè)版本的超文本標(biāo)識(shí)語(yǔ)言是最新的主要修訂版本，目前正處于發(fā)展尖端，他的目標(biāo)是取代之前所制定的標(biāo)準(zhǔn)，并且包含了許多新的特征，并對(duì)之前的一些舊的特征尤其是基于腳本的API做了大量的更新[1]，其目的是為了減少瀏覽器對(duì)于需要插件才能運(yùn)行富網(wǎng)絡(luò)應(yīng)用(RIA)的依賴性，并提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。

HTML5增加了許多新的元素，如〈video〉,〈audio〉,〈canvas〉等[2]，同時(shí)整合了SVG內(nèi)容。這些元素的添加是為了更容易和方便地在網(wǎng)頁(yè)中添加和處理多媒體和圖片內(nèi)容，而〈canvas〉標(biāo)簽的使用將可以為管道拓?fù)鋱D繪制提供更快和更新的實(shí)現(xiàn)方法。

1.2 Canvas

Canvas 是HTML5引入的一個(gè)新元素，該元素表示一個(gè)在頁(yè)面上即時(shí)渲染的位圖區(qū)域，其可以通過(guò)Javascript對(duì)其內(nèi)容進(jìn)行操控[3]。所謂即時(shí)渲染，意思是Canvas標(biāo)簽是通過(guò)操控像素來(lái)對(duì)屏幕上內(nèi)容進(jìn)行顯示的。通過(guò)其提供的API，HTML5 Canvas會(huì)在每一幀完全重繪畫(huà)布區(qū)域的內(nèi)容。對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，所要做的工作就是在每一幀繪制之前，準(zhǔn)備好顯示的內(nèi)容，從而讓頁(yè)面元素達(dá)到開(kāi)發(fā)者預(yù)想的效果。

這點(diǎn)讓HTML5 Canvas與Flash技術(shù)，Sliverlight技術(shù)或SVG技術(shù)區(qū)別開(kāi)來(lái)，后者采用的是保留模式[3]。在這種模式中，圖像的顯示效果是由圖像渲染器決定的，開(kāi)發(fā)者只能通過(guò)修改元素的屬性來(lái)調(diào)整相關(guān)的顯示(例如，橫坐標(biāo)，豎坐標(biāo)，背景透明度等等)雖然這樣可以讓開(kāi)發(fā)者遠(yuǎn)離底層操作，專注于上層邏輯，但是另一方面，弱化了對(duì)畫(huà)布的可操作性，并不一定能得到預(yù)期的效果。

基本的HTML5Canvas API包含了對(duì)2D模型的各種操作，開(kāi)發(fā)者可以通過(guò)該API在畫(huà)布上顯示各種形狀，渲染文字，又或者直接將一幅圖片顯示在頁(yè)面的畫(huà)布上[4]。開(kāi)發(fā)者可以自行操作其顏色，對(duì)其進(jìn)行旋轉(zhuǎn)，調(diào)整色彩透明度，也可以繪制各種直線，曲線，盒子模型，填充色等等。

就起自身而言，HTML5 Canvas 2D對(duì)象提供了一些2D元素操控API，讓開(kāi)發(fā)者能夠在像素級(jí)別進(jìn)行操控圖形[5]，并且輸入想要的結(jié)果。單獨(dú)使用Canvas 技術(shù)并不能創(chuàng)建復(fù)雜的應(yīng)用程序，但是配合跨瀏覽器技術(shù)，鍵盤(pán)和鼠標(biāo)事件響應(yīng)，定時(shí)器，對(duì)象，聲音，數(shù)學(xué)函數(shù)等，那么開(kāi)發(fā)者就能夠充分利HTML提供的新技術(shù)創(chuàng)建出令人驚嘆的應(yīng)用程序。

2 管道拓?fù)鋱D繪制過(guò)程

2.1 畫(huà)布設(shè)置

Canvas繪圖元素以〈canvas〉標(biāo)簽的形式出現(xiàn)，對(duì)應(yīng)著一個(gè)矩形區(qū)域畫(huà)布。畫(huà)布的大小可以通過(guò)width和height屬性來(lái)調(diào)整。例如油田管道拓?fù)鋱D繪制系統(tǒng)中，定義一個(gè)1366*768的畫(huà)布，只需在HTML文檔中加入如下代碼即可。

〈canvas width="1366" height="768" id="canvas"〉

除了用于展示的畫(huà)布以外，為了實(shí)現(xiàn)對(duì)繪制好的圖像進(jìn)行拖拽、放大、縮小等功能，需要定義一個(gè)scene(場(chǎng)景)用于承載畫(huà)布，然后通過(guò)完成對(duì)scene的拖拽和縮放來(lái)實(shí)現(xiàn)上述功能[6]，實(shí)例化scene代碼如下：

var scene = new JTopo.Scene();

stage.add(scene);

值得一提的是，為了保證繪制圖形的比例與實(shí)際場(chǎng)景的比例大致相同，也就是對(duì)原場(chǎng)景或樣圖的比例及相對(duì)位置保證一個(gè)高的還原度，我們需要人為的規(guī)定畫(huà)布的大小，來(lái)保證畫(huà)布的橫縱比，從而使繪制出的圖像不會(huì)出現(xiàn)變形等情況，橫縱比公式如下[7]：

畫(huà)布寬度W=

2.2 動(dòng)態(tài)數(shù)據(jù)矢量化

油田管道坐標(biāo)數(shù)據(jù)存放在后臺(tái)的數(shù)據(jù)庫(kù)中，由于各大油田都有自己的一套數(shù)據(jù)采集、管理系統(tǒng)，所以油田管道的原始坐標(biāo)數(shù)據(jù)的來(lái)源各不相同，可能是衛(wèi)星獲取的相對(duì)于地球的坐標(biāo)信息，也可能是以某管道起點(diǎn)為原點(diǎn)相對(duì)坐標(biāo)信息，如何對(duì)坐標(biāo)數(shù)據(jù)進(jìn)行處理以適應(yīng)于畫(huà)布的大小，最終給用戶一個(gè)直觀全面的展示是本系統(tǒng)中的一個(gè)難點(diǎn)。

首先，我們需要確定整個(gè)畫(huà)布的最大長(zhǎng)度和寬度；然后尋找原始數(shù)據(jù)中的最大值與最小值，最后通過(guò)以下公式將原始數(shù)據(jù)轉(zhuǎn)化成相對(duì)坐標(biāo)[8]：

2.3 前后臺(tái)數(shù)據(jù)傳送

整個(gè)動(dòng)態(tài)數(shù)據(jù)的矢量過(guò)程都是在程序的后臺(tái)完成，而HTML5則完全應(yīng)用于前臺(tái)。主流的傳參主要用一下幾種方法[9]：

(1) 在前臺(tái)讀寫(xiě)數(shù)據(jù)庫(kù)；

(2) session/cookie；

(3) 寫(xiě)在ajax里面作為URL param或者POST body傳參；

HTML5完善的前臺(tái)數(shù)據(jù)處理機(jī)制，使我們可以在前臺(tái)連接數(shù)據(jù)庫(kù)，盡管可以有效的減輕后臺(tái)服務(wù)器的壓力的同時(shí)，卻造成了暴露數(shù)據(jù)庫(kù)連接代碼的危險(xiǎn)，所以并不能作為商業(yè)開(kāi)發(fā)的最佳選擇，而常用的session也會(huì)因?yàn)閷?duì)于進(jìn)程的依賴性以及瀏覽器端對(duì)cookie的限制而不能達(dá)到理想的傳參效果。

最終本系統(tǒng)采用了ajax的方法，通過(guò)作為URL param或者POSTbody的方法進(jìn)行傳參。首先，在程序的后臺(tái)通過(guò)Array()數(shù)據(jù)的形式存儲(chǔ)矢量化的數(shù)據(jù)[10]，而后在前臺(tái)通過(guò)javascript腳本語(yǔ)言定義同名的數(shù)據(jù)，最終使用Respone.Write()函數(shù)將矢量化后的動(dòng)態(tài)數(shù)據(jù)以URL 的形式傳遞到前臺(tái)[11]。最終實(shí)現(xiàn)了拓?fù)鋱D的精確繪制。

2.4 圖像繪制

完成了圖像繪制所需要的坐標(biāo)參數(shù)的計(jì)算、傳輸后，可以進(jìn)行基本圖元的繪制，最終通過(guò)循環(huán)語(yǔ)句完成拓?fù)鋱D的繪制。

油田管道拓?fù)鋱D主要由管道節(jié)點(diǎn)及管道組成，在拓?fù)鋱D中，管道節(jié)點(diǎn)以點(diǎn)的形式存在，具體代碼如下：

var node_name1 =jdmc[i];

var node = newJTopo.CircleNode(node_name1);//定義節(jié)點(diǎn)名稱

node.fillStyle = '200,255,0'/節(jié)點(diǎn)顏色填充

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

node.layout = { type: 'circle', radius: 3 };//節(jié)點(diǎn)實(shí)例化

scene.add(node);//添加到場(chǎng)景中

代碼分對(duì)節(jié)點(diǎn)的字體信息、形狀、半徑、顏色等進(jìn)行描述。在完成了基本圖形的繪制后，通過(guò)scene.add()函數(shù)完成在場(chǎng)景中的繪制[12]，最終通過(guò)畫(huà)布展示給用戶。

節(jié)點(diǎn)繪制結(jié)束后，通過(guò)Line()函數(shù)完成節(jié)點(diǎn)之間的連線，最終通過(guò)循環(huán)函數(shù)，完成全部節(jié)點(diǎn)的繪制及連線。

var link = new JTopo.Link(node, zdnode); // 連線

link.strokeColor = '0,0,0';//定義線條顏色

link.lineWidth = 0.5;//定義線條寬度

scene.add(link);//在scene中繪制線條

2.5 程序效果展示

通過(guò)綜上所述技術(shù)點(diǎn)，靈活運(yùn)用HTML5的Canvas畫(huà)布功能，結(jié)合油田管道數(shù)據(jù)的分析，實(shí)現(xiàn)了油田管道拓?fù)鋱D像的繪制,如圖1所示。

圖1 油田管道拓?fù)鋱D

除了正常的拓?fù)鋱D繪制外，還增加了工具欄菜單，主要功能是可針對(duì)已繪制的拓?fù)鋱D進(jìn)行放大縮小等輔助功能，縮小功能代碼如下：

$('#zoomCheckbox').click(function(){

if($'#zoomCheckbox').attr('checked')){

stage.wheelZoom = 0.85; // 設(shè)置鼠標(biāo)縮放比例

}else{

stage.wheelZoom = null; // 取消鼠標(biāo)縮放比例

}

});

主要是通過(guò)javascript代碼來(lái)獲取鼠標(biāo)對(duì)工具欄按鈕的操作來(lái)調(diào)整整個(gè)包含已繪制圖像的容器的大小，最終完成對(duì)拓?fù)鋱D的放大或縮小功能。

3 總結(jié)

隨著對(duì)Web應(yīng)用的需求越來(lái)越高，傳統(tǒng)的B/S應(yīng)用程序和基于第三方插件的Web應(yīng)用開(kāi)發(fā)，越來(lái)越不能應(yīng)付復(fù)雜的Web圖形和用戶界面的需求。新生的HTML5技術(shù)，提供了豐富的多媒體應(yīng)用功能，極大的減少了傳統(tǒng)Web應(yīng)用對(duì)插件的依賴。HTML5的Canvas技術(shù)，徹底改變了傳統(tǒng)的Web圖形圖像處理技術(shù)，它只需要一個(gè)簡(jiǎn)單的頁(yè)面元素，通過(guò)調(diào)用其內(nèi)置的圖形繪制函數(shù)和像素級(jí)的處理功能，就能完成以前復(fù)雜的圖形圖像處理功能。

本文通過(guò)使用HTML5中的Canvas標(biāo)簽，介紹如何利用Canvas和JavaScript腳本在Web頁(yè)面上獲取后臺(tái)傳輸?shù)牟东@的油田管道相對(duì)地球坐標(biāo)的動(dòng)態(tài)數(shù)據(jù)進(jìn)行繪圖。通過(guò)Canvas標(biāo)簽繪制的圖像，不僅無(wú)需第三方插件，同時(shí)還可以保存成圖片，此外可以節(jié)約帶寬，減少服務(wù)器繪制圖像的負(fù)擔(dān)，依靠客戶端機(jī)器本身的性能進(jìn)行繪圖，同時(shí)解決了如Flash等第三方插件不能在服務(wù)器端認(rèn)證和不能共享瀏覽器的會(huì)話狀態(tài)等問(wèn)題，因此其強(qiáng)大的生命力，將勢(shì)必引起新一輪Web應(yīng)用開(kāi)發(fā)技術(shù)的革新。

[1] 余飛.基于HTML5的圖形圖像協(xié)同處理技術(shù)研究與實(shí)現(xiàn)[D].長(zhǎng)江大學(xué), 2015,(6).

[2] 劉華星，楊庚,等.HTML5——下一代Web開(kāi)發(fā)標(biāo)準(zhǔn)研究[J].計(jì)算機(jī)技術(shù)與發(fā)展，2011,(8):54.

[3] 楊帆.基于HTML5的圖形化網(wǎng)頁(yè)數(shù)據(jù)展示[J].無(wú)線互聯(lián)科技，2013,(7):42-43.

[4] 徐卓揆.基于HTML5、Ajax和WebService的WebGIS研究[J].測(cè)繪科學(xué)，2012,(1):145-147.

[5] 李燁民.基于HTML5的前端本地化存儲(chǔ)技術(shù)[J].成都大學(xué)學(xué)報(bào)，2012,(1):67-69.

[6] 胡晶.HTML5中Canvas與Flash的應(yīng)用研究[J].辦公自動(dòng)化，2014,(5):195.

[7] 徐莎，楊帆，徐昌慶.基于HTML5的WebGIS的研究與應(yīng)用[J].信息技術(shù)，2015,(13):149-151.

[8] 戴松，許冉，周忠.基于HTML5的算法動(dòng)畫(huà)可視化平臺(tái)[J].系統(tǒng)仿真學(xué)報(bào)，2013,(10):2436-2448.

[9] 周輝，程陳，任海軍,等.基于HTML5的全景圖展示[J].微型機(jī)與應(yīng)用，2012,(20):73-79,86.

[10] 王淑慶，韓勇，張小壘,等.基于HTML5的時(shí)空軌跡動(dòng)態(tài)可視化方法[J].北京交通大學(xué)學(xué)報(bào)，2015,(12):3318-3323.

[11] Tu Min, Zhu Yi-bing. Application and Research of HTML5 Representing future WEB Developed Standard. Proceedings of 2011 3rd IEEE International Conference on Information Management and Engineering(ICIME 2011)，2011.

[12] Jingming XIE.HTML5 Visual Composition of REST-like Web Services[C]. 2013 IEEE 4th International Conference on Software Engineering and Service Science，2013.

ResearchonOilfieldMixedPipelineTopologyDynamicMapBasedonHTML5

Liu Xianmei， Zhang Xiqiang, Zhao Ya
(Northeast Petroleum University, Daqing 163318)

With the need of oil field production and the rapid development of the Internet technology, oilfield pipeline topology graph appears at the moment.The requeirments of users on the use of the oil field pipeline topologygraph and interaction experience become increasingly higher, the traditional topology graphdrawingingtechnology connot meet the needs of users.HTML5 can solve the problems about Web vector network topology graph based on plug-in technology which needs to download and install, but it is hard to cross-platform, cross-browser， unsafe. Its information analysis and interaction ability exit obvious shortcomings and other issues. This paper achieves drawing oilfield pipeline topology graph dynamically by using the new attributes Canvasand the graphic image processing function of HTML5.

HTML5; Canvas; OilfiedpiPeline; Drawing topology graph

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

劉賢梅(1968-)，女，教授，碩士生導(dǎo)師，中國(guó)計(jì)算機(jī)學(xué)會(huì)高級(jí)會(huì)員(E200007945S)，研究領(lǐng)域：虛擬現(xiàn)實(shí)、三維可視化等.

張錫強(qiáng)(1992-)，男，遼寧省，碩士研究生，研究方向：虛擬現(xiàn)實(shí)方向.

1007-757X(2017)11-0027-03

2016.12.10)