基于HTML5技術(shù)的煤礦WebGIS移動(dòng)智能終端設(shè)計(jì)

鹿方凱 韓發(fā) 張輝

摘要：為實(shí)現(xiàn)煤礦WebGIS在移動(dòng)智能終端的可視化，以及辦公人員可隨時(shí)隨地進(jìn)行移動(dòng)辦公，提高煤炭企業(yè)工作效率，基于HTML5技術(shù)進(jìn)行WebGIS移動(dòng)客戶端設(shè)計(jì)。采用前端框架與.NET開(kāi)發(fā)技術(shù)實(shí)現(xiàn)移動(dòng)客戶端實(shí)時(shí)數(shù)據(jù)顯示，在前端頁(yè)面顯示方面采用一張圖分層顯示設(shè)計(jì)思想，以不失真的SVG礦圖為靜態(tài)底圖，需要變化的元素采用HTML5中的Canvas實(shí)現(xiàn)動(dòng)態(tài)繪圖，并且在不影響渲染結(jié)果的情況下優(yōu)化SVG代碼與頁(yè)面顯示速度。實(shí)踐結(jié)果表明，該系統(tǒng)大大提高了客戶端的網(wǎng)頁(yè)顯示效率，縮短了顯示時(shí)間，可實(shí)現(xiàn)隨時(shí)隨地移動(dòng)辦公，查詢、瀏覽各類專題圖與屬性數(shù)據(jù)，并在智能移動(dòng)終端實(shí)時(shí)獲取生產(chǎn)、調(diào)度、災(zāi)害報(bào)警、審批代辦等信息。

關(guān)鍵詞：智能移動(dòng)終端；HTML5；WebGIS；分層設(shè)計(jì)；SVG優(yōu)化

DOIDOI：10.11907/rjdk.181266

中圖分類號(hào)：TP317.4

文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-7800（2018）008-0216-03

英文摘要Abstract：In order to realize the visualization of coalmine WebGIS in mobile intelligent terminal so that office workers can do their offices anywhere and anytime and the work efficiency of coal enterprises can be improved，this paper presents a WebGIS mobile client design idea based on HTML5 technology，front-end framework and.net development technology to realize real-time data display of mobile client.It adopts front-end framework and.net development technology to realize real-time data display of mobile client.Before the front page display，a coal graph is used to display the design idea and make the real SVG mine map as a static base； the changing elements implement dynamic drawing in HTML5 Canvas.The SVG code and page display speed are optimized without affecting the rendering results.The practical results show that the system greatly improves the display efficiency of graphs for clients.This system greatly improves the efficiency of picture display，shortens the display time，enables the staff to work anytime and anywhere，browse various kinds of thematic maps and attribute data，and access production，scheduling，such as disaster alarm，the examination and approval agency information and the intelligent mobile terminal.The office efficiency of coal enterprises is thus improved.

英文關(guān)鍵詞Key Words：mobile client； HTML5； WebGIS； hierarchical design； SVG optimization

0 引言

隨著我國(guó)智能手機(jī)移動(dòng)端的快速普及和發(fā)展，移動(dòng)互聯(lián)網(wǎng)的應(yīng)用范圍越來(lái)越廣，人們通過(guò)iPad、手機(jī)等各種移動(dòng)終端鏈接到Internet中，這種移動(dòng)便攜式的終端設(shè)備實(shí)現(xiàn)功能與電腦相同，可以運(yùn)行各種應(yīng)用程序、瀏覽網(wǎng)頁(yè)等[1]。然而智能手機(jī)移動(dòng)終端屏幕相對(duì)較小，且操作方式不同，降低了用戶使用體驗(yàn)，所以很多公司開(kāi)始研究適合智能終端的服務(wù)模式[2]。隨著煤礦行業(yè)的發(fā)展，其對(duì)數(shù)字可視化的要求也越來(lái)越高，要求在手機(jī)智能終端上實(shí)現(xiàn)隨時(shí)隨地移動(dòng)辦公，隨時(shí)了解煤礦調(diào)度、生產(chǎn)安全監(jiān)控情況等。現(xiàn)有技術(shù)可以開(kāi)發(fā)安卓或IOS系統(tǒng)，但是該方法的缺點(diǎn)是無(wú)法實(shí)現(xiàn)跨平臺(tái)，需要開(kāi)發(fā)兩套系統(tǒng)，并且需要下載APP。國(guó)內(nèi)已有很多基于WebGIS的移動(dòng)端查詢系統(tǒng)，但尚未在煤炭行業(yè)得到應(yīng)用，且煤炭企業(yè)的辦公需求實(shí)現(xiàn)相對(duì)復(fù)雜。因此，本文提出一種新的方案，使用HTML5與WebGIS技術(shù)實(shí)現(xiàn)跨平臺(tái)的實(shí)時(shí)移動(dòng)辦公[3]，該方式可避免安裝不必要的插件，而且操作方便，可隨時(shí)隨地瀏覽、審閱礦圖，提高了工作效率。

1 WebGIS移動(dòng)客戶端設(shè)計(jì)

WebGIS是GIS技術(shù)與Internet的結(jié)合體，是網(wǎng)絡(luò)GIS的延伸拓展，WebGIS將GIS從一種地理信息系統(tǒng)發(fā)展為一種網(wǎng)絡(luò)共享資源，從而大大提高了地理信息系統(tǒng)的使用效率[4]。WebGIS的實(shí)現(xiàn)以Web技術(shù)的多級(jí)B/S體系結(jié)構(gòu)為基礎(chǔ)，包括網(wǎng)頁(yè)瀏覽器、GIS服務(wù)器、數(shù)據(jù)庫(kù)等。B/S架構(gòu)模式一方面簡(jiǎn)化了客戶端系統(tǒng)部署，用戶使用更加方便，同時(shí)提高了系統(tǒng)的可維護(hù)性。不足之處是該模式滿足不了客戶的實(shí)時(shí)性要求，同時(shí)，主要使用的Common Gateway Interface、Server API等傳統(tǒng)服務(wù)端技術(shù)對(duì)網(wǎng)絡(luò)要求較高。隨著Java Applet等編程語(yǔ)言的不斷發(fā)展完善，前端Ajax技術(shù)的出現(xiàn)優(yōu)化了客戶端使用，但該技術(shù)通常需要下載一些插件等，使用起來(lái)不太方便，并且對(duì)網(wǎng)絡(luò)安全也造成一定威脅[5]。

通過(guò)對(duì)比發(fā)現(xiàn)，使用HTML5技術(shù)不需要安裝插件，而且具有跨平臺(tái)性。HTML5中的Canvas還可以實(shí)現(xiàn)快速動(dòng)態(tài)繪圖功能，實(shí)現(xiàn)客戶端的實(shí)時(shí)展示。

2 煤礦WebGIS移動(dòng)客戶端設(shè)計(jì)

煤礦WebGIS移動(dòng)客戶端系統(tǒng)基于.NET體系結(jié)構(gòu)建立，采用MVC開(kāi)發(fā)3層體系架構(gòu)，分別為模型、視圖與控制器。移動(dòng)智能終端系統(tǒng)總體架構(gòu)如圖1所示。

（1）應(yīng)用層（表示層）。前端系統(tǒng)采用HTML5技術(shù)與BootStrap框架實(shí)現(xiàn)，可實(shí)現(xiàn)分層繪圖，并對(duì)不同級(jí)別人員設(shè)置不同權(quán)限，通過(guò)對(duì)各類人員分級(jí)授權(quán)的方式進(jìn)行展示。

（2）業(yè)務(wù)邏輯層（中間層）。采用VB.NET編程，提供后臺(tái)編碼支持，實(shí)現(xiàn)煤礦不同的業(yè)務(wù)邏輯，并針對(duì)不同業(yè)務(wù)邏輯提供相應(yīng)的基礎(chǔ)應(yīng)用服務(wù)。業(yè)務(wù)邏輯層包括：基礎(chǔ)功能模塊（圖層管理、信息查詢、業(yè)務(wù)邏輯、實(shí)時(shí)監(jiān)測(cè)、生產(chǎn)調(diào)度、災(zāi)害預(yù)警等）與軟件平臺(tái)（包括VB.NET平臺(tái)和WebGIS應(yīng)用平臺(tái)）。

（3）數(shù)據(jù)庫(kù)資源層（數(shù)據(jù)層）。系統(tǒng)采用ORACLE數(shù)據(jù)庫(kù)進(jìn)行設(shè)計(jì)，主要包括圖層數(shù)據(jù)庫(kù)、業(yè)務(wù)數(shù)據(jù)庫(kù)、實(shí)時(shí)檢測(cè)數(shù)據(jù)庫(kù)、生產(chǎn)調(diào)度數(shù)據(jù)庫(kù)以及災(zāi)害預(yù)警數(shù)據(jù)庫(kù)等。

3 系統(tǒng)實(shí)現(xiàn)

3.1 網(wǎng)頁(yè)布局設(shè)計(jì)

系統(tǒng)設(shè)計(jì)采用Bootstrap框架響應(yīng)式布局，Bootstrap是一個(gè)基于HTML、CSS與JAVASCRIPT技術(shù)的用于快速開(kāi)發(fā)Web應(yīng)用程序與網(wǎng)站的前端框架。該框架包含貫穿整個(gè)庫(kù)的移動(dòng)設(shè)備樣式，并且支持所有主流瀏覽器，能夠自適應(yīng)于臺(tái)式機(jī)、平板電腦和手機(jī)[6-7]。采用Bootstrap框架可很好地解決對(duì)不同設(shè)備終端的適應(yīng)性問(wèn)題，而且提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)。隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列，通過(guò)定義的網(wǎng)格類快速創(chuàng)建網(wǎng)格布局，如表1所示。

3.2 煤礦人員定位動(dòng)態(tài)繪圖

系統(tǒng)采用SVG與HTML5中的Canvas繪圖技術(shù)構(gòu)建煤礦WebGIS中的人員定位繪圖。SVG是一種不易失真的二維矢量數(shù)據(jù)格式，通過(guò)SVG能夠有效地對(duì)煤礦地理空間數(shù)據(jù)進(jìn)行繪圖描述，組織煤礦地標(biāo)物對(duì)象等實(shí)體模型，并進(jìn)行空間數(shù)據(jù)存儲(chǔ)、傳輸。因?yàn)镾VG是矢量圖，不易失真，在煤礦地理信息系統(tǒng)繪圖時(shí)，不變圖形元素用SVG描繪，一些動(dòng)態(tài)的元素與屬性用HTML5中的Canvas繪制，用Ajax實(shí)現(xiàn)數(shù)據(jù)的異步實(shí)時(shí)顯示。Canvas是HTML5的新增組件，可以用JavaScript在上面繪制各種圖表、動(dòng)畫等，從而在繪圖過(guò)程中實(shí)現(xiàn)動(dòng)靜分離，大大提高了煤礦圖形圖像的顯示效果。隨著煤礦下人員位置的變動(dòng)，網(wǎng)頁(yè)不斷從數(shù)據(jù)庫(kù)讀取數(shù)據(jù)，實(shí)現(xiàn)動(dòng)態(tài)繪圖。在系統(tǒng)中顯示分層繪圖如圖2所示。

3.3 大型SVG圖在顯示性能中的優(yōu)化

煤礦工業(yè)中實(shí)際的復(fù)雜大型SVG文件，特別是從各種編輯器和軟件導(dǎo)出的文件，通常包含大量冗余和無(wú)用信息，如編輯器元數(shù)據(jù)、注釋、隱藏元素、默認(rèn)值或非最優(yōu)值以及其它可安全刪除或轉(zhuǎn)換的內(nèi)容，這些都不會(huì)影響最終渲染結(jié)果[8]。煤礦中大型復(fù)雜的SVG礦圖在網(wǎng)頁(yè)加載過(guò)程中耗時(shí)較長(zhǎng)，大型的SVG礦圖可以達(dá)到幾百兆，所以通過(guò)刪除不影響最終渲染效果的元素是一種很好的解決方案。優(yōu)化對(duì)比效果如下：

從以上案例中可以發(fā)現(xiàn)，優(yōu)化后的代碼量明顯減少，簡(jiǎn)化率為62.5%，網(wǎng)頁(yè)顯示時(shí)間從25ms降低到10ms，而現(xiàn)實(shí)渲染效果并沒(méi)有受到任何影響。

3.4 系統(tǒng)功能分析

系統(tǒng)主要功能包括：①企業(yè)運(yùn)行綜合指標(biāo)?；谝苿?dòng)端實(shí)現(xiàn)對(duì)企業(yè)安全生產(chǎn)運(yùn)營(yíng)綜合評(píng)價(jià)指標(biāo)信息的展示?？梢噪S時(shí)隨地進(jìn)行移動(dòng)辦公，瀏覽、查詢各類“一張圖”中的專題圖、屬性數(shù)據(jù)；②生產(chǎn)實(shí)時(shí)信息。可隨時(shí)隨地獲取企業(yè)生產(chǎn)信息，隨時(shí)了解煤礦調(diào)度、生產(chǎn)安全監(jiān)控、值班人員等信息；③生產(chǎn)調(diào)度綜合信息。隨時(shí)隨地查詢礦井生產(chǎn)調(diào)度綜合信息，實(shí)現(xiàn)各種生產(chǎn)調(diào)度報(bào)表的遠(yuǎn)程上報(bào)、瀏覽與查詢；④安全狀況評(píng)估。隨時(shí)隨地對(duì)企業(yè)的安全狀況進(jìn)行風(fēng)險(xiǎn)評(píng)估；⑤行業(yè)動(dòng)態(tài)信息。定期給用戶推送行業(yè)最新資訊與科技動(dòng)態(tài)信息；⑥災(zāi)害報(bào)警信息。實(shí)時(shí)監(jiān)控企業(yè)的井下水、火、瓦斯、頂板等重大危險(xiǎn)源，對(duì)于異常報(bào)警自動(dòng)提醒在線處置；⑦審批代辦信息。通過(guò)移動(dòng)端進(jìn)行任務(wù)流程審批，實(shí)現(xiàn)對(duì)安全生產(chǎn)技術(shù)資料的網(wǎng)上審批；⑧安全巡檢。通過(guò)移動(dòng)端地圖選擇定位，在井下任意位置采集、錄入各類安全隱患與異常信息，包括文字、照片、視頻、語(yǔ)音等；⑨移動(dòng)GIS平臺(tái)。移動(dòng)端系統(tǒng)基于移動(dòng)GIS平臺(tái)開(kāi)發(fā)，支持使用在線、離線數(shù)據(jù)，可滿足各類工作環(huán)境，并提供開(kāi)放的服務(wù)接口與數(shù)據(jù)集成支持。系統(tǒng)開(kāi)發(fā)實(shí)現(xiàn)部分截圖如圖3～圖6所示。

4 結(jié)語(yǔ)

如今，隨著移動(dòng)智能終端在煤炭企業(yè)中發(fā)揮著越來(lái)越重要的作用，本文基于HTML5技術(shù)進(jìn)行煤礦WebGIS移動(dòng)客戶端設(shè)計(jì)。系統(tǒng)采用分層架構(gòu)設(shè)計(jì)思想，對(duì)圖層分層顯示并優(yōu)化顯示效率，最終實(shí)現(xiàn)辦公人員在移動(dòng)智能終端設(shè)備上可隨時(shí)隨地進(jìn)行移動(dòng)辦公，瀏覽不同專題的礦圖與屬性數(shù)據(jù)，隨時(shí)了解煤礦調(diào)度、生產(chǎn)安全監(jiān)控情況等。移動(dòng)智能終端的應(yīng)用將改變煤炭行業(yè)傳統(tǒng)辦公管理模式，實(shí)現(xiàn)煤炭行業(yè)的數(shù)字化、信息化與辦公自動(dòng)化，及時(shí)為企業(yè)領(lǐng)導(dǎo)決策層提供準(zhǔn)確數(shù)據(jù)，從而提高煤炭企業(yè)的管理能力與員工工作效率。

參考文獻(xiàn)：

[1] 張?jiān)霾?基于HTML5 的移動(dòng)智能應(yīng)用終端新特性分析與研究[J].信息安全與技術(shù)，2015（20）：91-92.

[2] 陳娜.基于WebGIS的iPhone公交信息查詢系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].測(cè)繪科學(xué)，2009，34（6）：277-278.

[3] 徐莎，楊帆，徐昌慶.基于HTML5的WebGIS的研究與應(yīng)用[J].信息技術(shù)，2012（4）：149-151.

[4] 趙娜.基于 AJAX 技術(shù)的 Web GIS 系統(tǒng)應(yīng)用研究與實(shí)現(xiàn)[D].上海：華東師范大學(xué)，2009.

[5] 劉文革，于雷.基于WebGIS煤礦事故應(yīng)急救援系統(tǒng)的研究[J].中國(guó)安全科學(xué)學(xué)報(bào)，2010，20（1）：172-173.

[6] 劉志東，陳天偉.基于Bootstrap的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)[J]. 電腦知識(shí)與技術(shù)，2017，13（7）：85-87.

[7] 李慕，趙彤洲，周萍.基于Bootstrap的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中斷點(diǎn)研究[J].軟件導(dǎo)刊，2017，16（4）：25-27.

[8] 張?chǎng)涡?SVG精簡(jiǎn)壓縮工具svgo簡(jiǎn)介和初體驗(yàn)[EB/OL].http：//www.zhangxinxu.com.

[9] 唐彬.利用 HTML5 實(shí)現(xiàn)網(wǎng)頁(yè)圖表的研究[J].微型電腦應(yīng)用，2012，10（28）：29.

[10] GRADY M.Functional programming using JavaScript and the HTML5 canvas element [J].Journal of Computing Sciences in Colleges，2010，26（2）：97-105.

[11] Performance of Canvas versus SVG[EB/OL].http：//www.borismus.com/canvas-vs-svg-performance.

[12] 吳 磊，張福慶.基于 HTML canvas 的 WebGIS 客戶端技術(shù)研究[J].地理信息世界，2009（3）：78-80.

[13] 錢瑞偉，孔婷.基于SVG的實(shí)時(shí)WebGIS 技術(shù)研究[J].計(jì)算機(jī)科學(xué)，2007，34（11）：86- 88.

[14] 徐卓揆.基于HTML5、Ajax和WebService的WebGIS研究[J].測(cè)繪科學(xué)，2012（1）：23-24.

[15] Masinter.Getting the browsers GeoLocation with HTML5[EB/OL].http：//maxheapsize.com/ 2009 /04/11/getting- the-browsers-geolocation-with-html-5/.

（責(zé)任編輯：黃 ?。?/p>