李正學(xué)，許捍衛(wèi)

（1.河海大學(xué) 地球科學(xué)與工程學(xué)院，江蘇 南京 210098）

基于HTML5的WebGIS儀表盤研究

李正學(xué)1，許捍衛(wèi)1

（1.河海大學(xué) 地球科學(xué)與工程學(xué)院，江蘇 南京 210098）

利用RGraph基于HTML5 Canvas 的開源圖表庫繪制儀表盤，擴(kuò)展ArcGIS API for JavaScript，實(shí)現(xiàn)在地圖上顯示儀表盤通用開發(fā)接口。通過使用擴(kuò)展的API實(shí)現(xiàn)全國省會(huì)城市空氣質(zhì)量狀況實(shí)時(shí)可視化。該技術(shù)實(shí)現(xiàn)的儀表盤可視化方法具有美觀、可交互、加載速度快的特點(diǎn)，可以跨平臺(tái)使用。實(shí)驗(yàn)結(jié)果證明，使用HTML5繪制儀表盤對(duì)地理信息可視化簡單易操作，也適合大數(shù)據(jù)環(huán)境下的實(shí)時(shí)數(shù)據(jù)可視化。

WebGIS；HTML5；儀表盤；RGraph

目前基于Silver Light、Flex等富客戶端開發(fā)技術(shù)在地圖上顯示圖表、儀表盤已經(jīng)相當(dāng)成熟[1-5]。但客戶端應(yīng)用一般體積較大，需要安裝瀏覽器插件，而且移動(dòng)平臺(tái)無法使用，在網(wǎng)絡(luò)環(huán)境較差的情況加載較慢，甚至無法運(yùn)行[5-7]。在JavaScript開發(fā)平臺(tái)中一般采用在服務(wù)端預(yù)先生成圖表，然后將圖片返回到客戶端進(jìn)行地圖展示。該方法只能繪制簡單的餅狀圖，對(duì)于復(fù)雜的儀表盤不可行，而且丟失了圖表的動(dòng)態(tài)性、靈活性等特點(diǎn)，不利于數(shù)據(jù)的實(shí)時(shí)更新[8]。

本文主要采用HTML5 Canvas繪圖技術(shù)和RGraph開源圖表組件繪制儀表盤，通過擴(kuò)展ArcGIS API for JavaScript來實(shí)現(xiàn)一個(gè)可以繪制儀表盤的圖層，且儀表盤數(shù)據(jù)可實(shí)時(shí)改變。這種純JavaScript實(shí)現(xiàn)的圖表組件可應(yīng)用于所有支持HTML5的瀏覽器，無需插件，加載快，美觀大方。

1 Canvas與RGraph簡介

Canvas是一個(gè)新的HTML元素，使用JavaScript腳本在網(wǎng)頁上繪制圖像，畫布是一個(gè)矩形區(qū)域，可以是圖表、圖片甚至游戲組件。Canvas繪圖速度快，而且不需要保留元素相應(yīng)的信息，特別是像素操作時(shí)，性能較好，非常適合實(shí)時(shí)數(shù)據(jù)可視化[9-14]。Canvas繪制的儀表盤只需要從服務(wù)端獲取一個(gè)指針數(shù)值即可繪制，無需頁面刷新，無需重新生成圖片，并且網(wǎng)絡(luò)端、服務(wù)器端、用戶端的開銷都非常少。Canvas擁有更多的繪制路徑、圓形、矩形、字符以及動(dòng)態(tài)圖像的方法。

Canvas的特點(diǎn)：

1）基于像素的Canvas 在本質(zhì)上是一個(gè)具有繪圖API 的圖像元素；

2）單個(gè)HTML元素在行為上類似于 ＜img＞；

3）視覺呈現(xiàn)通過腳本以編程方式創(chuàng)建和修改；

4）事件模型、用戶交互是粗粒度的，僅在畫布元素上，交互必須根據(jù)鼠標(biāo)坐標(biāo)手動(dòng)編程；

5）API 不支持可訪問性，除了畫布，還必須使用基于標(biāo)記的技術(shù)。

Canvas的特性決定了Canvas繪圖在圖面較小、對(duì)象數(shù)量較大時(shí)性能更佳?？臻g地理信息可視化中較多是點(diǎn)狀要素，要素?cái)?shù)量大，繪制的圖面較小，圖面結(jié)果復(fù)雜精細(xì)而且其中一些數(shù)據(jù)需要實(shí)時(shí)更新。用Canvas實(shí)現(xiàn)儀表盤是一種最簡單的方式。

RGraph是 基 于HTML5 Canvas標(biāo) 簽， 采 用JavaScript繪圖的圖形庫，支持超過20種不同類型的圖表。RGraph簡單易用，支持許多屬性、事件和方法。它用新的＜canvas＞標(biāo)記，使用JavaScript在Web瀏覽器內(nèi)繪制圖表，可使網(wǎng)頁頁面較小，減輕Web服務(wù)器負(fù)載，網(wǎng)頁加載更快，用戶體驗(yàn)更好。RGraph可以方便地繪制出各種儀表盤，例如汽車、溫度、油量等，這些圖表具有標(biāo)題、圖例、3D效果、交互事件等屬性，繪制的儀表盤可動(dòng)態(tài)顯示。

2 ArcGIS API for JavaScript擴(kuò)展

Canvas可以繪制出適合空間數(shù)據(jù)可視化的儀表盤組件，但是當(dāng)前WebGIS應(yīng)用開發(fā)API并不提供用Canvas繪制圖表的接口，來對(duì)地理要素進(jìn)行渲染。本文對(duì)ArcGIS API for JavaScript進(jìn)行擴(kuò)展以實(shí)現(xiàn)這一功能。

ArcGIS API for JavaScript 是基于瀏覽器的API。API可以在Web頁面中嵌入地圖，并通過調(diào)用ArcServer發(fā)布的GP服務(wù)實(shí)現(xiàn)空間分析等地理處理功能。API對(duì)地圖要素的管理由Layer類來控制，一個(gè)地圖中可以包含多個(gè)不同類別的Layer。GraphicsLayer是Layer的一個(gè)子類，用來繪制和管理用戶自定義要素。GraphicsLayer有一個(gè)或多個(gè)Graphic要素，用來在地圖中創(chuàng)建自定義圖形。Graphic由幾何圖形、符號(hào)和屬性組成，一個(gè)Graphic就是一個(gè)自定義要素。API將用戶自定義數(shù)據(jù)以Graphic的形式通過GraphicsLayer在地圖上顯示，支持點(diǎn)、線、面3種類型的要素渲染。Graphic的顯示效果由Symbol類來控制，現(xiàn)有Symbol只支持簡單的圖形、文字、圖片進(jìn)行可視化，不支持HTML標(biāo)簽的渲染，因此不能使用Canvas繪制圖表。

依據(jù)GraphicsLayer對(duì)要素加載和管理的特點(diǎn)，可以創(chuàng)建一個(gè)CanvasLayer來管理Canvas繪制的圖表，命名為Geochart。如何將自定義CanvasLayer加載到地圖上，需要了解API加載管理圖層的基本原理和方法。用API實(shí)現(xiàn)的Web地圖加載后動(dòng)態(tài)生成的代碼為：

＜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＞

＜/div＞

＜/div＞

＜/div＞

從以上代碼可以看出，地圖圖層以＜div＞的形式在HTML文檔中表現(xiàn)，通過層層嵌套的＜div＞實(shí)現(xiàn)圖層的管理和顯示。所有的地圖要素通過地圖容器來管理，不同的圖層存放在mapDiv_layers中進(jìn)行管理。在初始化一個(gè)地圖實(shí)例時(shí)提供一個(gè)根節(jié)點(diǎn)＜div＞的ID，“mapDiv” API就會(huì)自動(dòng)創(chuàng)建HTML子文檔節(jié)點(diǎn)。所有圖層都加載到ID為mapDiv_layers的節(jié)點(diǎn)內(nèi)。根據(jù)這個(gè)特點(diǎn)，可以在mapDiv_layers插入一個(gè)＜canvas＞子節(jié)點(diǎn)，作為CanvasLayer的存放容器，實(shí)現(xiàn)對(duì)自定義圖層的加載和管理。

根據(jù)以上分析，要實(shí)現(xiàn)自定義CanvasLayer圖層，需要基于API實(shí)現(xiàn)CanvasLayer和Geochart兩個(gè)類。CanvasLayer用來存儲(chǔ)和管理圖表，它可以包含一個(gè)或多個(gè)Geochart。Geochart是由RGraph繪制的圖表。CanvasLayer類除具有構(gòu)造函數(shù)外，還要實(shí)現(xiàn)Geochart的添加、移除、繪制等。

儀表盤和地圖移動(dòng)變化保持同步需要監(jiān)聽地圖的ExtentChange事件，當(dāng)?shù)貓D的顯示范圍發(fā)生變化時(shí)，儀表盤需要同時(shí)改變顯示位置。儀表盤的經(jīng)緯度信息是固定不變的，因此只需要計(jì)算該經(jīng)緯度所在的屏幕位置，并將儀表盤在該位置顯示，就可以使儀表盤和地圖位置保持不變。由于API中ExtentChange事件是在地圖顯示范圍發(fā)生改變之后才觸發(fā)，Extent變化過程中不會(huì)觸發(fā)ExtentChange事件而導(dǎo)致儀表盤位置不能和地圖保持實(shí)時(shí)同步，因此還要監(jiān)聽MouseDown、MouseDrag、MouseUp 3個(gè)鼠標(biāo)事件。鼠標(biāo)按下（MouseDown事件）記錄鼠標(biāo)所在屏幕坐標(biāo)，設(shè)置為儀表盤的初始坐標(biāo)；鼠標(biāo)拖動(dòng)（MouseDrag事件）時(shí)的實(shí)時(shí)屏幕坐標(biāo)與初始坐標(biāo)的坐標(biāo)差就是所有圖表的位置變化，根據(jù)這個(gè)值就可以改變圖表的位置，保持圖表與地圖的實(shí)時(shí)同步。

3 基于RGraph儀表盤的應(yīng)用

空氣質(zhì)量的發(fā)布方式一直采用傳統(tǒng)的文字與數(shù)字對(duì)局部信息進(jìn)行描述，無法對(duì)區(qū)域分布和相關(guān)性進(jìn)行展示。本文用RGraph繪制空氣質(zhì)量儀表盤，不同的空氣質(zhì)量等級(jí)以不同的顏色顯示。通過調(diào)用空氣質(zhì)量狀況API獲取實(shí)時(shí)AQI數(shù)據(jù)，利用擴(kuò)展的JavaScript API在地圖上實(shí)時(shí)顯示空氣質(zhì)量狀況，可體現(xiàn)出區(qū)域的差異和相關(guān)性。

利用RGraph繪制儀表盤代碼如下：

var Meter = new RGraph．Meter('canvasLayer', 0, 500, response[0]．a(chǎn)qi)

．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]．a(chǎn)rea + "AQI " + response[0]．a(chǎn)qi);

繪制的儀表盤效果如圖1所示。

圖1 RGraph繪制的AQI儀表盤

圖1中儀表盤數(shù)值范圍、顏色配置采用國家空氣質(zhì)量指數(shù)標(biāo)準(zhǔn)進(jìn)行繪制。將儀表盤添加到CanvasLayer中的代碼如下：

var point1 = new

esri．geometry．Point(pointName．long,

pointName．lat);

var Meter = new

js．esriCustomClass．GeoChart(pie, point1);

CanvasLayer．a(chǎn)ddChart(geochart1);

可視化效果如圖2所示。

圖2 空氣質(zhì)量CanvasLayer效果圖（審圖號(hào)：GS(2010)6011）

4 結(jié) 語

本文采用HTML5 Canvas技術(shù)，利用RGraph繪圖庫繪制多種樣式的儀表盤，然后通過對(duì)ArcGIS API for JavaScript的擴(kuò)展，實(shí)現(xiàn)數(shù)據(jù)通過儀表盤可視化。基于HTML5的儀表盤更加美觀、輕便，在實(shí)時(shí)GIS數(shù)據(jù)可視化中有很大優(yōu)勢。該方法使通過儀表盤進(jìn)行數(shù)據(jù)可視化更加簡單，可以應(yīng)用于WebGIS項(xiàng)目或科學(xué)研究對(duì)數(shù)據(jù)的可視化。該技術(shù)可以定制各行業(yè)專用儀表盤，應(yīng)用于水利、交通、電力等行業(yè)的數(shù)據(jù)可視化。

[1] 亞文輝．科技與需求推動(dòng)地理信息系統(tǒng)普適化[N]．中國高新技術(shù)產(chǎn)業(yè)導(dǎo)報(bào),2012-09-24(C01)

[2] 楊興旺．地圖色彩的美學(xué)設(shè)計(jì)研究[J]．地理空間信息,2007,5(3):112-114

[3] 毛先成,黃秀蘭． WebGIS開發(fā)方法的研究與實(shí)現(xiàn)[J]．地理空間信息,2008,6(5):9-11

[4] 張振濤,張海艷,蘇貴波,等．關(guān)于WebGIS關(guān)鍵技術(shù)與發(fā)展趨勢的探討[J]．科技信息,2011(14):228-229

[5] 楊志波．基于Ajax技術(shù)的WebGIS研究及實(shí)現(xiàn)[D]．北京:中國科學(xué)院研究生院,2006

[6] 郭宇峰．BI儀表盤：讓信息顯示更直觀[N]．計(jì)算機(jī)世界,2007-03-19(B22)

[7] 鐘廣銳．基于ArcGIS FlexAPI的WebGIS設(shè)計(jì)[J]．測繪科學(xué),2012(3):147-149

[8] 吳磊,張福慶．基于HTML Canvas的WebGIS客戶端技術(shù)研究[J]．地理信息世界,2009(3):78-82

[9] 樂天．有了HTML 5還要Flash嗎?[N]．計(jì)算機(jī)世界,2009-06-29(34)

[10] 曾文華,趙飛,任福,等．基于JFreeChart與ArcGISJavaScriptAPI的專題制圖[J]．測繪科學(xué)技術(shù)學(xué)報(bào),2012(6):450-453

[11] 劉華星,楊庚．HTML5——下一代Web開發(fā)標(biāo)準(zhǔn)研究[J]．計(jì)算機(jī)技術(shù)與發(fā)展,2011(8):54-58

[12] 朱文．基于HTML5 Canvas技術(shù)的在線圖像處理方法的研究[D]．廣州:華南理工大學(xué),2013

[13] 唐彬．利用HTML5實(shí)現(xiàn)網(wǎng)頁圖表的研究[J]．微型電腦應(yīng)用,2012(10):28-30

[14] 王曉．基于HTML5的矢量地圖發(fā)布關(guān)鍵技術(shù)研究[D]．南京:南京師范大學(xué),2011

P208

B

1672-4623（2015）02-0123-03

10.3969/j.issn.1672-4623.2015.02.044

李正學(xué)，碩士，主要研究方向?yàn)閃ebGIS開發(fā)與應(yīng)用。

2014-03-10。

項(xiàng)目來源：國家自然科學(xué)基金資助項(xiàng)目（41101374）。