基于HTML5技術的煤礦WebGIS移動智能終端設計

鹿方凱 韓發 張輝

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

關鍵詞：智能移動終端；HTML5；WebGIS；分層設計；SVG優化

DOIDOI：10.11907/rjdk.181266

中圖分類號：TP317.4

文獻標識碼：A 文章編號：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.

英文關鍵詞Key Words：mobile client； HTML5； WebGIS； hierarchical design； SVG optimization

0 引言

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

1 WebGIS移動客戶端設計

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

通過對比發現，使用HTML5技術不需要安裝插件，而且具有跨平臺性。HTML5中的Canvas還可以實現快速動態繪圖功能，實現客戶端的實時展示。

2 煤礦WebGIS移動客戶端設計

煤礦WebGIS移動客戶端系統基于.NET體系結構建立，采用MVC開發3層體系架構，分別為模型、視圖與控制器。移動智能終端系統總體架構如圖1所示。

（1）應用層（表示層）。前端系統采用HTML5技術與BootStrap框架實現，可實現分層繪圖，并對不同級別人員設置不同權限，通過對各類人員分級授權的方式進行展示。

（2）業務邏輯層（中間層）。采用VB.NET編程，提供后臺編碼支持，實現煤礦不同的業務邏輯，并針對不同業務邏輯提供相應的基礎應用服務。業務邏輯層包括：基礎功能模塊（圖層管理、信息查詢、業務邏輯、實時監測、生產調度、災害預警等）與軟件平臺（包括VB.NET平臺和WebGIS應用平臺）。

（3）數據庫資源層（數據層）。系統采用ORACLE數據庫進行設計，主要包括圖層數據庫、業務數據庫、實時檢測數據庫、生產調度數據庫以及災害預警數據庫等。

3 系統實現

3.1 網頁布局設計

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

3.2 煤礦人員定位動態繪圖

系統采用SVG與HTML5中的Canvas繪圖技術構建煤礦WebGIS中的人員定位繪圖。SVG是一種不易失真的二維矢量數據格式，通過SVG能夠有效地對煤礦地理空間數據進行繪圖描述，組織煤礦地標物對象等實體模型，并進行空間數據存儲、傳輸。因為SVG是矢量圖，不易失真，在煤礦地理信息系統繪圖時，不變圖形元素用SVG描繪，一些動態的元素與屬性用HTML5中的Canvas繪制，用Ajax實現數據的異步實時顯示。Canvas是HTML5的新增組件，可以用JavaScript在上面繪制各種圖表、動畫等，從而在繪圖過程中實現動靜分離，大大提高了煤礦圖形圖像的顯示效果。隨著煤礦下人員位置的變動，網頁不斷從數據庫讀取數據，實現動態繪圖。在系統中顯示分層繪圖如圖2所示。

3.3 大型SVG圖在顯示性能中的優化

煤礦工業中實際的復雜大型SVG文件，特別是從各種編輯器和軟件導出的文件，通常包含大量冗余和無用信息，如編輯器元數據、注釋、隱藏元素、默認值或非最優值以及其它可安全刪除或轉換的內容，這些都不會影響最終渲染結果[8]。煤礦中大型復雜的SVG礦圖在網頁加載過程中耗時較長，大型的SVG礦圖可以達到幾百兆，所以通過刪除不影響最終渲染效果的元素是一種很好的解決方案。優化對比效果如下：

從以上案例中可以發現，優化后的代碼量明顯減少，簡化率為62.5%，網頁顯示時間從25ms降低到10ms，而現實渲染效果并沒有受到任何影響。

3.4 系統功能分析

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

4 結語

如今，隨著移動智能終端在煤炭企業中發揮著越來越重要的作用，本文基于HTML5技術進行煤礦WebGIS移動客戶端設計。系統采用分層架構設計思想，對圖層分層顯示并優化顯示效率，最終實現辦公人員在移動智能終端設備上可隨時隨地進行移動辦公，瀏覽不同專題的礦圖與屬性數據，隨時了解煤礦調度、生產安全監控情況等。移動智能終端的應用將改變煤炭行業傳統辦公管理模式，實現煤炭行業的數字化、信息化與辦公自動化，及時為企業領導決策層提供準確數據，從而提高煤炭企業的管理能力與員工工作效率。

參考文獻：

[1] 張增波.基于HTML5 的移動智能應用終端新特性分析與研究[J].信息安全與技術，2015（20）：91-92.

[2] 陳娜.基于WebGIS的iPhone公交信息查詢系統的設計與實現[J].測繪科學，2009，34（6）：277-278.

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

[4] 趙娜.基于 AJAX 技術的 Web GIS 系統應用研究與實現[D].上海：華東師范大學，2009.

[5] 劉文革，于雷.基于WebGIS煤礦事故應急救援系統的研究[J].中國安全科學學報，2010，20（1）：172-173.

[6] 劉志東，陳天偉.基于Bootstrap的響應式網頁設計與實現[J]. 電腦知識與技術，2017，13（7）：85-87.

[7] 李慕，趙彤洲，周萍.基于Bootstrap的響應式網頁設計中斷點研究[J].軟件導刊，2017，16（4）：25-27.

[8] 張鑫旭.SVG精簡壓縮工具svgo簡介和初體驗[EB/OL].http：//www.zhangxinxu.com.

[9] 唐彬.利用 HTML5 實現網頁圖表的研究[J].微型電腦應用，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 客戶端技術研究[J].地理信息世界，2009（3）：78-80.

[13] 錢瑞偉，孔婷.基于SVG的實時WebGIS 技術研究[J].計算機科學，2007，34（11）：86- 88.

[14] 徐卓揆.基于HTML5、Ajax和WebService的WebGIS研究[J].測繪科學，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/.

（責任編輯：黃 健）