以HTML5為基礎的煤礦We b GIS移動智能終端設計分析

張利剛，李 波

（國能烏海能源黃白茨礦業有限責任公司，內蒙古 烏海 016044）

引言

新時期，基于HTML5的移動智能應用終端已經迅速進入了人們的工作、學習、生活領域，并且成效顯著。WebGIS是其中之一，其主要利用Javascript工具開發，可以解決傳統GIS矢量數據在數據量存儲、刷新性能方面的瓶頸，滿足跨平臺分享需求。因此，根據煤礦業運行需求，以HTML5為基礎，探索WebGIS移動智能終端的設計方法對煤礦業發展具有非常重要的意義。

1 需求分析

1.1 移動辦公

煤礦WebGIS移動智能終端需要滿足辦公人員跨越時間、跨越空間移動辦公需求，快速顯示客戶端網頁，集中呈現多類型專題圖、屬性數據以及災害報警信息，奠定煤炭企業整體高效率工作基礎。

1.2 礦圖不失真

煤礦WebGIS移動智能終端需要在前端頁面利用一張圖進行礦圖的分層顯示。靜態底圖為不失真的SVG礦圖，動態灰土則借助HTML5功能，在保證渲染效果的情況下進行SVG代碼、頁面顯示速度優化。

2 設計框架

2.1 系統架構

HTML5基礎下的WebGIS移動智能終端架構如下：

如圖1所示，HTML5基礎下的WebGIS移動智能終端架構包括客戶端、Web服務器、數據庫三個部分。其中服務器數據源為SQL Server，設計語言為Java，可滿足服務器端對客戶端多操作反應需求。因IE瀏覽器不支持HTML5＜canvas＞標簽，客戶端選擇谷歌Chrome瀏覽器，獲取數據庫數據，與客戶端進行信息交互。

2.2 客戶端結構

作為W3C推出的新標準，HTML5強大的功能可滿足多數瀏覽器運行需求，而其新增語義化標簽、智能化表單以及JavaScript API（WebStorage、Canvas、WevSocket）功能，為實時客戶端的實現提供了可能[1]。因此，為解決以往WebGIS移動智能終端繪圖效率不高、無法支持矢量繪圖問題，可以HTML5為基礎，進行WebGIS移動智能終端實時客戶端的構建。

如圖2所示，利用HTML5，配合JavaScript技術，可以滿足數據地圖實時繪制、存儲、數據傳輸需求，在降低服務器傳輸壓力的同時，增加數據傳輸效率。

3 終端功能設計

3.1 煤礦生產信息實時獲取存儲

煤礦生產信息實時獲取存儲功能主要是幫助煤礦企業跨越時間、跨越地點獲取與生產有關的信息，如生產安全監控信息、煤礦調度信息、值班人員信息等。并在評估企業生產風險的基礎上，進行不同類型生產調度報表的遠距離上傳以及“一張圖”中屬性數據的查詢、瀏覽。

為實現上述功能，可以利用HTML5的WevStorage API功能，以Key-Value的形式，從Session-Storage、LocalStorage兩個方面，持久性存儲獲取的數據，改變傳統基于Cookie數據存儲空間小、效率低的問題[2]。其中SessionStorage是一種會話級別的存儲手段，僅可存儲當前頁面數據，一旦頁面關閉，數據會刪除，適用于煤礦生產矢量圖繪制緩存；Local-Storage則是一種跨多窗口的數據永久存儲手段，可滿足同源標簽共享使用需求，適用于煤礦永久存儲空間分析后數據、服務器發送用戶數據存儲。若想清除數據，就可以手動刪除或者清除函數removeltem的方式進行。

3.2 煤礦工作者定位動態繪圖

煤礦工作者定位動態繪圖主要是利用HTML5的Canvas繪圖技術，配合SVG繪圖工具，進行煤礦WebGIS人員定位動態繪圖。其中基于煤礦地標物對象實體模型的二維矢量數據負責描繪不變圖形元素，而HTML5的Canvas工具則負責實現動態元素、屬性的異步實時顯示，滿足煤礦地理空間數據繪圖不失真要求。

為實現上述功能，可以獲得上下文context為出發點，利用JavaScript定義Canvas元素的id。進而經getElementByld函數，尋找前期創建完畢的Canvas元素。最終利用JavaScript，調用Move To（）、begin-Path（）等繪圖API接口，獲得上下文隨機圖形繪制環境。在圖形繪制完畢后，則調用strongke（）、fill（）進行邊框填充，邊框填充后，則調用closePath（）完成圖形繪制[3]。需要注意的是，對于地理實體對象，可以根據OGC簡單要素規范，進行線狀、點狀、面狀、柵格實體的合理劃分，利用JavaScript表示柵格實體，直接在HTML5Canvas內進行繪制。

3.3 多類別工作環境信息共享

多類別工作環境信息共享主要是基于移動GIS平臺，開發支持在線與離線數據的移動端系統，并將開放服務數據集成，為移動端地圖定位、井下安全隱患采集錄入、任務流程審批等工作開展提供依據。

為實現上述功能，可以利用Ajax、HTML5的WebSocket API工具，以TCP連接形式，在瀏覽器、服務器之間進行高效率、雙向信息交互體系的構建。WebSocket協議數據傳輸量見表1。

如表1所示，WebSocket協議下的冗余數據傳輸量較小，可以全雙工模式保證客戶端、服務器之間的雙向連接。為實現這一功能，可以利用GIS服務器，提取空間數據庫內數據并解析為JSON格式。進而發送至已與WebSocket服務器連接的客戶端，利用onmessage事件，解析JSON字符串，最終以JavaScript對象的形式在WebGIS中顯示，并由服務器主動推送消息[4]。

表1 We bSocke t協議數據傳輸量

4 結語

作為GIS技術與Internet的結合產物，WebGIS將單獨利用計算機處理地理信息的系統工具GIS轉變為一種網絡共享資源，有助于提高地理信息使用效率，展現地理信息價值。因此，可以在簡化的多級B/S體系結構內，根據煤礦實時性管理需求，在保持服務器端技術不變的情況下，使用HTML5的新技術，發掘HTML5兼具本地存儲與高效雙向通信、動態快速繪圖等功能，構建實時客戶端。