基于HTML5/JavaScript的WebGIS功能界面设计与开发

李晶莹，王方雄，侯英姿，张 闯

(1.辽宁师范大学 辽宁省自然地理与空间信息科学重点实验室，辽宁 大连 116029；2.辽宁师范大学 城市与环境学院，辽宁 大连 116029；3.杭州吉翱地理信息技术有限公司，浙江 杭州 310012)



基于HTML5/JavaScript的WebGIS功能界面设计与开发

李晶莹1,2，王方雄1,2，侯英姿1,2，张 闯3

(1.辽宁师范大学 辽宁省自然地理与空间信息科学重点实验室，辽宁 大连 116029；2.辽宁师范大学 城市与环境学院，辽宁 大连 116029；3.杭州吉翱地理信息技术有限公司，浙江 杭州 310012)

基于HTML5与JavaScript设计开发了一套WebGIS的功能界面。利用HTML5中的

、

、
• 等元素设计实现了多级功能菜单和查询结果显示窗口等，利用Canvas、Audio与Video等新增元素优化了Web浏览器中的统计图绘制和多媒体播放技术；应用基于SuperMap iClient的JavaScript API设计实现了弹窗、气泡、翻页等丰富的动态界面效果。系统界面美观自然、操作流畅、响应时间短，改进了用户体验。

  HTML5；JavaScript；WebGIS；界面设计

  0 引言

  随着Web技术的发展，现代人对于客户端的交互性和实时性的要求也在不断提升，对于WebGIS系统界面的美观程度与操作体验的需求也日益提升。HTML是开发网页的主要语言，W3C所推出的HTML5标准相对于以往版本来说不仅是为了网页展示某种内容，而且面向Web应用程序，因此功能更强大，并且很大程度上解决了跨浏览器问题[1-3]；JavaScript常用来为网页添加各式各样的动态功能,为用户提供更加流畅美观的浏览效果。另一方面，JavaScript代码由用户的处理器运行，而不是服务器，从而节省了带宽并降低了服务器的负荷[4]。jQuery是一个兼容多浏览器的开源JavaScript库，可以更加简便地编写JavaScript代码，在界面开发过程中被广泛应用。SuperMap iClient for JavaScript[5]是一套由JavaScript语言编写的GIS客户端应用开发包，可在服务式GIS体系下为用户提供更好的Web应用支撑。

  应用以上技术设计并实现WebGIS功能界面，使界面的实时性、交互性都比较强，可以很好地适应现代人对于WebGIS系统界面的高品质要求。

  1 界面设计

  界面设计主要包括多级菜单设计、统计图界面设计、多媒体界面设计和查询结果显示界面设计。

  功能菜单整体包含在一层

  元素中，理论上可设计为n级菜单，一级菜单为菜单项标题，由元素定义，二级菜单与其各菜单项由

  元素嵌套
  • 元素的结构定义，默认为展开状态，点击一级菜单可收缩/显示二级菜单。三级菜单包含在二级菜单项下，结构同二级菜单，默认为隐藏状态，当鼠标悬停在二级菜单项上时即显示三级菜单。以下各级菜单结构均与二、三级菜单一致，如图1所示。

    统计图可由弹窗或气泡做为容器弹出，统计图包括折线图、饼状图、柱状图等形式，界面设计如图1所示，本文采用HTML5新增的Canvas元素绘制矢量统计图，Canvas元素是HTML5中新增的页面元素，该元素是一个图形绘制容器，拥有一个基于JavaScript的API，可由脚本动态绘制图像。Canvas绘图速度快，而且不需要保留元素相应的信息，特别是像素操作时，性能较好，非常适合实时数据可视化[6-7]。统计图窗口下方设置标签页，由

  • 元素定义每个标签以切换不同形式的统计图显示窗口，当前选中的标签页背景用深色突出表示。

    查询结果显示界面的设计采用列表的形式显示查询结果，列表最外层结构由

    元素定义，第二层由

    元素定义，分别表示每条信息，各条信息内的具体内容由
    • 元素定义，界面下方显示分页符，采用分页的形式显示多条查询结果，如图1所示。翻页功能由基于jquery的pagination插件实现。点击某条列表信息可关联到相应地图位置并弹出气泡窗口。

      

      图1 WebGIS功能界面设计图

      多媒体界面可由弹窗或气泡做为容器弹出，由HTML5新增的Audio、Video两个元素设计并实现。为保证界面美观，为视频设计播放器窗口，在窗口中使用元素定义播放、暂停、重新加载等按钮，并为其设置预览界面。

      2 界面开发

      2.1 多级菜单

      一级菜单即菜单项标题，为了突出表示，将其backgroundcolor属性定义为深色，color属性设置为#FFF，以便区分。本文根据需要只实现到三级菜单项。运用jQuery中的slideToggle()方法，可实现二级菜单的滑动显示、隐藏效果。三级菜单默认为隐藏状态，应用CSS的hover选择器，设置三级菜单的visibility属性为visible，即可实现鼠标悬停显示三级菜单的效果，如图2所示。

      2.2 统计信息显示界面

      

      图2 WebGIS多级菜单与统计信息显示界面的实现

      本文的统计信息显示界面以气泡的形式弹出，界面效果如图2所示。首先利用SuperMap.Popup.FramedCloud()构造函数，初始化一个带箭头指向和边框的浮动弹窗。使用getBounds类中的getCenterLonLat()方法，返回当前地理范围的中心点，将气泡的显示位置固定在点上。定义contentHTML变量，其值为HTML5所定义的popup界面框架及查询结果数据，因查询结果为动态变化的属性值，需从数据库中动态获取。利用SuperMap feature类中的attributes属性，可描述要素的任意可序列化属性，由此查询到用户自定义的属性表，获取表中相应数据显示在popup中。之后将此变量作为参数传入SuperMap.Popup.FramedCloud构造函数中，即可定义popup样式并在主界面中生成popup。若要关闭popup窗口，则调用map.removePopup()函数，将想要移除的popup对象作为参数传入函数，即可移除指定的popup对象。

      在气泡下方添加标签页，使用CSS的hover选择器将处于选中状态的标签的background属性设为深色以突出表现。定义slide()函数，结合JavaScript中的hide()、append()、animate()等方法实现鼠标悬停即可实现切换标签页的效果，并将标签页的切换效果设计为向左滑入滑出的效果，使用delayTime()与interTime()方法设置切换效果持续时间和切换速度，使标签页的切换效果更加自然。

      最后将统计图添加到标签页中，绘制图形时引用基于Canvas的chart.js JavaScript图表库，本文以折线图为例，使用chart类下的line()方法，并使用getAccessDatas()方法从数据库中获取相关统计数据，设置横纵坐标、字体颜色、填充颜色、线条颜色等样式参数，将以上各项作为参数传入line()方法中，即可绘制出相应的折线图，绘制的统计图界面效果如图2所示。

      2.3 查询结果显示界面

      查询结果显示界面中的信息分页显示，利用SuperMap feature类中的attributes属性，查询到用户自定义的属性表，获取表中相应数据显示在界面中。每条信息左侧的编号图标由CSS3中的border-radius属性实现。下方的翻页功能由基于jquery的pagination插件实现，将分页符的样式、每页显示的信息条数等相关信息作为参数传到pagination()方法中，然后使用PageCallback()函数调用翻页。

      使用get()方法获取列表中每次添加进去的最后一个

      元素，为其增加click事件，触发bin()方法，可定位到地图元素并弹出相关信息弹窗，实现列表中的信息与地图中相应地物关联的功能。定义全局变量g_featuresOnlyMk，即仅供标注使用的features集合，将查询结果g_featuresHavAtt转换为点要素，保持g_featuresHavAtt和g_featuresOnlyMk标号一致。遍历所有元素，以结果要素中心点为坐标，创建标注要素。使用SuperMap.Size、SuperMap.Pixel等创建size、pixel等实例，用于设置标注图标样式，并用if语句判断排序是否在7以前(假设每页设置显示7条信息)，使用g_featuresOnlyMk[i].data.icon方法分别设置排序7以前和排序7以后的标注图标样式和图标大小，单独设置鼠标移入时的标注样式图标。构造registMarker()函数，为每个标注都添加mouseover事件和mouseout事件，并分别设置新的样式，实现鼠标移入即改变图标样式，移出后恢复原标注样式的效果，界面效果如图3所示。

      2.4 多媒体显示界面

      在HTML5之前，在网页中播放视频、音频等通常都需要借助第三方插件，比如Flash，不仅繁琐，而且容易导致安全性问题。HTML5新增了Audio、Video两个元素，通过这两个元素播放视频或音频无需在浏览器上安装任何插件，大大简化了开发工作。以此为基础，获取网站上或本地所要播放的视频数据或音频数据，将其地址或路径加入到或标签中，即可在网页中播放该视频或音频[8-10]。

      在JavaScript脚本中使用HTMLVideoElement对象支持的play(),pause()等方法，可控制视频的播放、暂停等。使用preload属性的metadata值，设置用户开始播放之前只能载入视频的元数据(宽度、高度、长度、第一帧、长度和其他此类信息)，即提供了预览画面，效果如图3所示。

      本文中的多媒体窗口以弹窗的形式弹出，实现方法即在页面中添加一个新的HTML窗口，将其display属性设置为none，为实景视频按钮添加click事件，使用JavaScript的getElementById().style.display方法动态更改其display属性，即可控制弹窗的显示与关闭。

      

      图3 WebGIS查询结果与多媒体显示界面的实现

      3 结束语

      本文基于HTML5和JavaScript设计开发WebGIS系统界面，使用HTML5中的

      、

      、
      • 等元素构成多级功能菜单及查询结果显示界面，利用HTML5新增的Canvas元素及Audio与Video元素优化了在Web浏览器中进行矢量统计图绘制及多媒体播放的一般方法，结合JavaScript及SuperMap iClient for JavaScript API对页面元素进行控制，生成弹窗及气泡等动态界面效果，使得WebGIS界面更加美观生动、使用流畅，可跨平台并易于维护。

        [1] 徐卓揆．基于HTML5、Ajax和WebService的WebGIS研究[J].测绘科学，2012(1):42-47.

        [2] 李正学,许捍卫.基于HTML5的WebGIS仪表盘研究[J].地理空间信息,2015(2):123-125.

        [3] CROWTHER R, LENNON J, BLUE A, et al. HTML5 inAction[M]. Manning, 2014.

        [4] SMITH D， NEGRINO T. JavaScript基础教程(第8版)[M].陈剑欧，柳涛，译.北京:人民邮电出版社,2012.

        [5] SuperMap图书编委会.SuperMap iServer Java 从入门到精通[M].北京：清华大学出版社，2012.

        [6] 周玲芳,李长云,胡淑新,等.基于HTML5的WebGIS实时客户端设计[J].微型机与应用,2015,34(16):66-69.

        [7] 谷伟.基于HTML5 Canvas的客户端图表技术研究[J].信息技术,2013(9):107-110.

        [8] ZHU G, ZHANG F, ZHU W, et al. HTML5 based media player for real-time video surveillance[C].Image and Signal Processing (CISP), 2012 5th International Congress on. IEEE, 2012: 245-248.

        [9] 黄雄.基于HTML5的视频传输技术研究[J].广东技术师范学院学报,2014(11):20-25.

        [10] 雷忠诚,胡文山,邬静阳，等.基于Web的3D智能家居系统设计与实现[J].电子技术应用,2014,40(9):114-117.

        Interface design and development of WebGIS based on HTML5/JavaScript

        Li Jingying1,2,Wang Fangxiong1,2,Hou Yingzi1,2,Zhang Chuang3

        (1. Liaoning Key Laboratory of Physical Geography and Geomatics, Liaoning Normal University, Dalian 116029, China；2. School of Urban and Environmental Sciences, Liaoning Normal University, Dalian 116029, China;3. Hangzhou JiAo Geographical Information Technology Co. Ltd., Hangzhou 310012, China)

        We designed and developed a function interface of WebGIS based on HTML5 and JavaScript. Using the elements of HTML5 such as

        ,

        and
        • , we designed and implemented the multi-level function menu and the query result display window, and optimized the method of vector plotting and video playing in the Web browser by the elements like Canvas, Audio and Video. Combined with JavaScript and JavaScript API of SuperMap iClient, a rich dynamic interface, like the popup window, popping bubble, and so on were implemented. The interface is natural and beautiful ,shorten response time, smooth operation, and it can improve user experience.

          HTML5; JavaScript; WebGIS; interface design

          TP23

          A

          1674-7720(2016)07- 0019- 03

          李晶莹，王方雄，侯英姿，等. 基于HTML5/JavaScript的WebGIS功能界面设计与开发[J].微型机与应用，2016,35(7)：19-21.

          2015-12-26)

          李晶莹(1992-)，女，硕士研究生，主要研究方向：WebGIS研究与开发。

          王方雄(1973-)，通讯作者，男，博士，副教授，主要研究方向：WebGIS、GIS建模与集成研究。E-mail:wfxwhu@163.com。

          侯英姿(1974-)，女，博士，讲师，主要研究方向：GIS建模与技术应用研究。

    杂志排行

    1. 1《人生与伴侣·共同关注》2024年3期

    2. 2《花卉》2024年8期

    3. 3《天津教育》2024年8期

    4. 4《现代经济信息》2024年5期

    5. 5《世界热带农业信息》2024年3期

    6. 6《家庭医学》2024年2期

    7. 7《中国中医药现代远程教育》2024年10期

    8. 8《客联》2024年1期

    9. 9《创新创业理论研究与实践》2024年5期

    10. 10《江苏农业科学》2024年7期

关于参考网