基于HTML5的WebGIS儀表盤研究

李正學，許捍衛

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

＜/div＞

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

[13] 唐彬．利用HTML5實現網頁圖表的研究[J]．微型電腦應用,2012(10):28-30

[14] 王曉．基于HTML5的矢量地圖發布關鍵技術研究[D]．南京:南京師范大學,2011

P208

B

1672-4623（2015）02-0123-03

10.3969/j.issn.1672-4623.2015.02.044

李正學，碩士，主要研究方向為WebGIS開發與應用。

2014-03-10。

項目來源：國家自然科學基金資助項目（41101374）。