基于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/.

（责任编辑：黄 健）