基于HTML5的WebGIS仪表盘研究

2015-02-06李正学许捍卫

地理空间信息 2015年2期

关键词：仪表盘图层图表

李正学，许捍卫

（1.河海大学地球科学与工程学院，江苏南京 210098）

基于HTML5的WebGIS仪表盘研究

李正学1，许捍卫1

（1.河海大学地球科学与工程学院，江苏南京 210098）

利用RGraph基于HTML5 Canvas 的开源图表库绘制仪表盘，扩展ArcGIS API for JavaScript，实现在地图上显示仪表盘通用开发接口。通过使用扩展的API实现全国省会城市空气质量状况实时可视化。该技术实现的仪表盘可视化方法具有美观、可交互、加载速度快的特点，可以跨平台使用。实验结果证明，使用HTML5绘制仪表盘对地理信息可视化简单易操作，也适合大数据环境下的实时数据可视化。

WebGIS；HTML5；仪表盘；RGraph

目前基于Silver Light、Flex等富客户端开发技术在地图上显示图表、仪表盘已经相当成熟[1-5]。但客户端应用一般体积较大，需要安装浏览器插件，而且移动平台无法使用，在网络环境较差的情况加载较慢，甚至无法运行[5-7]。在JavaScript开发平台中一般采用在服务端预先生成图表，然后将图片返回到客户端进行地图展示。该方法只能绘制简单的饼状图，对于复杂的仪表盘不可行，而且丢失了图表的动态性、灵活性等特点，不利于数据的实时更新[8]。

本文主要采用HTML5 Canvas绘图技术和RGraph开源图表组件绘制仪表盘，通过扩展ArcGIS API for JavaScript来实现一个可以绘制仪表盘的图层，且仪表盘数据可实时改变。这种纯JavaScript实现的图表组件可应用于所有支持HTML5的浏览器，无需插件，加载快，美观大方。

1 Canvas与RGraph简介

Canvas是一个新的HTML元素，使用JavaScript脚本在网页上绘制图像，画布是一个矩形区域，可以是图表、图片甚至游戏组件。Canvas绘图速度快，而且不需要保留元素相应的信息，特别是像素操作时，性能较好，非常适合实时数据可视化[9-14]。Canvas绘制的仪表盘只需要从服务端获取一个指针数值即可绘制，无需页面刷新，无需重新生成图片，并且网络端、服务器端、用户端的开销都非常少。Canvas拥有更多的绘制路径、圆形、矩形、字符以及动态图像的方法。

Canvas的特点：

1）基于像素的Canvas 在本质上是一个具有绘图API 的图像元素；

2）单个HTML元素在行为上类似于＜img＞；

3）视觉呈现通过脚本以编程方式创建和修改；

4）事件模型、用户交互是粗粒度的，仅在画布元素上，交互必须根据鼠标坐标手动编程；

5）API 不支持可访问性，除了画布，还必须使用基于标记的技术。

Canvas的特性决定了Canvas绘图在图面较小、对象数量较大时性能更佳。空间地理信息可视化中较多是点状要素，要素数量大，绘制的图面较小，图面结果复杂精细而且其中一些数据需要实时更新。用Canvas实现仪表盘是一种最简单的方式。

RGraph是基于HTML5 Canvas标签，采用JavaScript绘图的图形库，支持超过20种不同类型的图表。RGraph简单易用，支持许多属性、事件和方法。它用新的＜canvas＞标记，使用JavaScript在Web浏览器内绘制图表，可使网页页面较小，减轻Web服务器负载，网页加载更快，用户体验更好。RGraph可以方便地绘制出各种仪表盘，例如汽车、温度、油量等，这些图表具有标题、图例、3D效果、交互事件等属性，绘制的仪表盘可动态显示。

2 ArcGIS API for JavaScript扩展

Canvas可以绘制出适合空间数据可视化的仪表盘组件，但是当前WebGIS应用开发API并不提供用Canvas绘制图表的接口，来对地理要素进行渲染。本文对ArcGIS API for JavaScript进行扩展以实现这一功能。

ArcGIS API for JavaScript 是基于浏览器的API。API可以在Web页面中嵌入地图，并通过调用ArcServer发布的GP服务实现空间分析等地理处理功能。API对地图要素的管理由Layer类来控制，一个地图中可以包含多个不同类别的Layer。GraphicsLayer是Layer的一个子类，用来绘制和管理用户自定义要素。GraphicsLayer有一个或多个Graphic要素，用来在地图中创建自定义图形。Graphic由几何图形、符号和属性组成，一个Graphic就是一个自定义要素。API将用户自定义数据以Graphic的形式通过GraphicsLayer在地图上显示，支持点、线、面3种类型的要素渲染。Graphic的显示效果由Symbol类来控制，现有Symbol只支持简单的图形、文字、图片进行可视化，不支持HTML标签的渲染，因此不能使用Canvas绘制图表。

依据GraphicsLayer对要素加载和管理的特点，可以创建一个CanvasLayer来管理Canvas绘制的图表，命名为Geochart。如何将自定义CanvasLayer加载到地图上，需要了解API加载管理图层的基本原理和方法。用API实现的Web地图加载后动态生成的代码为：

＜div id="mapdiv"＞

＜div id="mapDiv_root"＞

＜div id="mapDiv_container"＞

＜div id="mapDiv_layer"＞

＜div id="map_layer0"＞＜/div＞

＜div id="map_layer1"＞

＜div id="map_layer2"＞＜/div＞

……

＜div id="Canvs_layer"＞＜/div＞

＜/div＞

从以上代码可以看出，地图图层以＜div＞的形式在HTML文档中表现，通过层层嵌套的＜div＞实现图层的管理和显示。所有的地图要素通过地图容器来管理，不同的图层存放在mapDiv_layers中进行管理。在初始化一个地图实例时提供一个根节点＜div＞的ID，“mapDiv” API就会自动创建HTML子文档节点。所有图层都加载到ID为mapDiv_layers的节点内。根据这个特点，可以在mapDiv_layers插入一个＜canvas＞子节点，作为CanvasLayer的存放容器，实现对自定义图层的加载和管理。

根据以上分析，要实现自定义CanvasLayer图层，需要基于API实现CanvasLayer和Geochart两个类。CanvasLayer用来存储和管理图表，它可以包含一个或多个Geochart。Geochart是由RGraph绘制的图表。CanvasLayer类除具有构造函数外，还要实现Geochart的添加、移除、绘制等。

仪表盘和地图移动变化保持同步需要监听地图的ExtentChange事件，当地图的显示范围发生变化时，仪表盘需要同时改变显示位置。仪表盘的经纬度信息是固定不变的，因此只需要计算该经纬度所在的屏幕位置，并将仪表盘在该位置显示，就可以使仪表盘和地图位置保持不变。由于API中ExtentChange事件是在地图显示范围发生改变之后才触发，Extent变化过程中不会触发ExtentChange事件而导致仪表盘位置不能和地图保持实时同步，因此还要监听MouseDown、MouseDrag、MouseUp 3个鼠标事件。鼠标按下（MouseDown事件）记录鼠标所在屏幕坐标，设置为仪表盘的初始坐标；鼠标拖动（MouseDrag事件）时的实时屏幕坐标与初始坐标的坐标差就是所有图表的位置变化，根据这个值就可以改变图表的位置，保持图表与地图的实时同步。

3 基于RGraph仪表盘的应用

空气质量的发布方式一直采用传统的文字与数字对局部信息进行描述，无法对区域分布和相关性进行展示。本文用RGraph绘制空气质量仪表盘，不同的空气质量等级以不同的颜色显示。通过调用空气质量状况API获取实时AQI数据，利用扩展的JavaScript API在地图上实时显示空气质量状况，可体现出区域的差异和相关性。

利用RGraph绘制仪表盘代码如下：

var Meter = new RGraph．Meter('canvasLayer', 0, 500, response[0]．aqi)

．Set('border', true)

．Set('tickmarks．small．num', 20)

．Set('tickmarks．big．num', 5)

．Set('segment．radius．start', 40)

．Set('text．size', 0．5)

．Set('colors．ranges', [[0, 50, '#43ce17'], [50, 100, '#efdc31'], [100, 150, '#fa0'], [150, 200, '#ff401a'], [200, 300, '#d20040'], [300, 500, '#f00']])

．Set('chart．radius', 70)

．Set("chart．labels", false)

．

Set("chart．shadow", true)

．Set('chart．background．color', "#f4f4f4")

．Set('chart．border．color', 'white')

．Set('chart．title．size', 7)

．Set('chart．title．color', "grey")

．Set("chart．title", response[0]．area + "AQI " + response[0]．aqi);

绘制的仪表盘效果如图1所示。

图1 RGraph绘制的AQI仪表盘

图1中仪表盘数值范围、颜色配置采用国家空气质量指数标准进行绘制。将仪表盘添加到CanvasLayer中的代码如下：

var point1 = new

esri．geometry．Point(pointName．long,

pointName．lat);

var Meter = new

js．esriCustomClass．GeoChart(pie, point1);

CanvasLayer．addChart(geochart1);

可视化效果如图2所示。

图2 空气质量CanvasLayer效果图（审图号：GS(2010)6011）

4 结语

本文采用HTML5 Canvas技术，利用RGraph绘图库绘制多种样式的仪表盘，然后通过对ArcGIS API for JavaScript的扩展，实现数据通过仪表盘可视化。基于HTML5的仪表盘更加美观、轻便，在实时GIS数据可视化中有很大优势。该方法使通过仪表盘进行数据可视化更加简单，可以应用于WebGIS项目或科学研究对数据的可视化。该技术可以定制各行业专用仪表盘，应用于水利、交通、电力等行业的数据可视化。

[1] 亚文辉．科技与需求推动地理信息系统普适化[N]．中国高新技术产业导报,2012-09-24(C01)

[2] 杨兴旺．地图色彩的美学设计研究[J]．地理空间信息,2007,5(3):112-114

[3] 毛先成,黄秀兰． WebGIS开发方法的研究与实现[J]．地理空间信息,2008,6(5):9-11

[4] 张振涛,张海艳,苏贵波,等．关于WebGIS关键技术与发展趋势的探讨[J]．科技信息,2011(14):228-229

[5] 杨志波．基于Ajax技术的WebGIS研究及实现[D]．北京:中国科学院研究生院,2006

[6] 郭宇峰．BI仪表盘：让信息显示更直观[N]．计算机世界,2007-03-19(B22)

[7] 钟广锐．基于ArcGIS FlexAPI的WebGIS设计[J]．测绘科学,2012(3):147-149

[8] 吴磊,张福庆．基于HTML Canvas的WebGIS客户端技术研究[J]．地理信息世界,2009(3):78-82

[9] 乐天．有了HTML 5还要Flash吗?[N]．计算机世界,2009-06-29(34)

[10] 曾文华,赵飞,任福,等．基于JFreeChart与ArcGISJavaScriptAPI的专题制图[J]．测绘科学技术学报,2012(6):450-453

[11] 刘华星,杨庚．HTML5——下一代Web开发标准研究[J]．计算机技术与发展,2011(8):54-58

[12] 朱文．基于HTML5 Canvas技术的在线图像处理方法的研究[D]．广州:华南理工大学,2013