基于HTML Canvas的電磁態(tài)勢繪制方法

管英祥　任淵博　向為鋒

摘要：該文闡述了一種與地理信息系統(tǒng)（GIS）不相關(guān)的在瀏覽器中繪制電磁態(tài)勢的原理和方法。以SuperMap iServe Java 6R為例，在B/S模式的瀏覽器端，使用JavaScript腳本語言，實現(xiàn)了距離反比權(quán)值插值算法，得到明確精度的電磁態(tài)勢柵格數(shù)據(jù)，按照Canvas 2 D API 規(guī)范，在瀏覽器中客觀、形象地繪制出電磁態(tài)勢。

關(guān)鍵詞：地理信息系統(tǒng)；電磁態(tài)勢；SuperMap；插值；JavaScript canvas

中圖分類號：TP391 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2015）14-0068-03

Abstract： An new method and principle for drawing electromagnetism situation in the browser unrelated with the geographic information system（GIS）， is described in this paper. Take example of SuperMap iServe Java 6R， in the browser port of the B/S mode， The inverse distance weighted interpolation method is realized by using the script languge of JavaScript， and the data of the electromagnetism situation grid is achieved， and its precision is specific. Finally， the electromagnetism situation is drawn actually and visually in the browser， according to the Canvas 2 D API criterion.

Key words： geographic； information system； electromagnetism situation； SuperMap； interpolation； JavaScript canvas

隨著計算機技術(shù)的發(fā)展，使用瀏覽器在地理信息系統(tǒng)中顯示電磁態(tài)勢圖得到了廣泛的應(yīng)用。電磁態(tài)勢圖形象直觀地顯示出指定區(qū)域的電磁環(huán)境，有助于使用人員了解、分析和判斷指定區(qū)域內(nèi)的電磁環(huán)境。本文采用B/S模式，以SuperMap iServe Java 6R為例，設(shè)計了Java開發(fā)環(huán)境中在富客戶端繪制復(fù)雜電磁態(tài)勢的方法。該方法可以在任何支持B/S模式的地理信息系統(tǒng)中快速、直觀的顯示出數(shù)據(jù)的走勢和分布情況，為繪制大量柵格數(shù)據(jù)態(tài)勢提供了新思路。

在瀏覽器中，使用JavaScript腳本語言編程，實現(xiàn)了電磁態(tài)勢柵格數(shù)據(jù)的插值算法，并生成電磁態(tài)勢柵格數(shù)據(jù)，最后按照HTML5標(biāo)準(zhǔn)的canvas規(guī)范繪制出某區(qū)域的電磁態(tài)勢。HTML5 Canvas規(guī)范定義了二維Canvas（畫布）的繪畫API，使用這些API使得可以在Web頁面上進(jìn)行立即模式的二維圖形繪制[1]。

1 繪制方法研究

現(xiàn)有的繪制電磁態(tài)勢圖的方法主要是在SuperMap地理信息系統(tǒng)的ImageLayer層繪制，本文采用的方法是在瀏覽器中使用HTML canvas繪制。下面分別介紹了兩種繪制方法。

1.1 在ImageLayer層繪制

首先由服務(wù)器端的態(tài)勢計算模型計算出初始電磁態(tài)勢柵格數(shù)據(jù)，再由數(shù)據(jù)插值算法得到指定精度的電磁態(tài)勢柵格數(shù)據(jù)，然后將電磁態(tài)勢柵格數(shù)據(jù)轉(zhuǎn)換為png格式的圖片，最后在瀏覽器端運行JavaScript腳本，在地理信息系統(tǒng)的ImageLayer層繪制png格式的圖片。數(shù)據(jù)插值算法得到的電磁態(tài)勢柵格數(shù)據(jù)的精度為0.1度，每個像素值用4字節(jié)表示，那么世界地圖范圍內(nèi)生成的png圖像的最大為：

（360/0.1）*（180/0.1）*4=25.92MB

1.2使用HTML canvas繪制

HTML Canvas概念最早是由蘋果公司提出的，用在Safari 瀏覽器中，因此基于Gecko1.8 的Firefox和Chrome瀏覽器也支持這個新元素。通過該元素可以使用JavaScript等腳本語言在瀏覽器中進(jìn)行圖形繪制。每一個HTML canvas 元素都有一個“上下文（ context ）”，可以通過JavaScript腳本語言調(diào)用canvas 元素的API來操作HTML canvas，將柵格數(shù)據(jù)渲染到HTML canvas元素上形成電磁態(tài)勢信息。

同樣由服務(wù)器端的態(tài)勢計算模型給出初始電磁態(tài)勢柵格數(shù)據(jù)，接著將該數(shù)據(jù)通過網(wǎng)絡(luò)傳輸?shù)綖g覽器端，由瀏覽器端的JavaScript腳本實現(xiàn)數(shù)據(jù)插值算法，并按照Canvas 2D API 規(guī)范創(chuàng)建電磁態(tài)勢圖像，將創(chuàng)建的圖像繪制在Http的canvas 元素內(nèi)。電磁態(tài)勢計算模型的計算精度為1字節(jié)/度，那么世界地圖范圍內(nèi)電磁態(tài)勢柵格數(shù)據(jù)最大為：

2 設(shè)計與實現(xiàn)

2.1數(shù)據(jù)準(zhǔn)備

通過瀏覽器端提交給服務(wù)器端的經(jīng)緯度信息和電磁態(tài)勢計算參數(shù)，由布設(shè)在服務(wù)器端的態(tài)勢計算模型計算出電磁態(tài)勢柵格數(shù)據(jù)，并通過網(wǎng)絡(luò)回傳給瀏覽器端。本文采用了自定義數(shù)據(jù)格式發(fā)布電磁態(tài)勢柵格數(shù)據(jù)，使用JSON（JavaScript Object Notation） 作為電磁態(tài)勢數(shù)據(jù)的傳輸格式。JSON 格式的電磁態(tài)勢數(shù)據(jù)以普通的文本形式從服務(wù)器端傳輸?shù)綖g覽器端，在瀏覽器中JSON被快速地解析，由JavaScript腳本讀取電磁態(tài)勢柵格數(shù)據(jù)。

2.2數(shù)據(jù)插值算法

在服務(wù)器端生成的電磁態(tài)勢柵格數(shù)據(jù)精度太低，需要在瀏覽器端做插值計算。使用空間差值方法中的距離反比權(quán)值插值方法，可在瀏覽器端快速生成電磁態(tài)勢柵格數(shù)據(jù)集。

距離反比權(quán)值插值法是一種典型的數(shù)據(jù)空間插值算法，通過計算離散點群的平均值計算柵格值，生成電磁態(tài)勢柵格數(shù)據(jù)集。它是以插值點與樣本點間的距離為權(quán)重進(jìn)行加權(quán)平均，離插值點越近的樣本點的權(quán)重越大[3]。假設(shè)已知柵格數(shù)據(jù)點的坐標(biāo)為：

2.3軟件實現(xiàn)方法

瀏覽器端接收到電磁態(tài)勢柵格數(shù)據(jù)后，調(diào)用SuperMap的API接口，將該數(shù)據(jù)與SuperMap中的經(jīng)緯度信息相對應(yīng)，并將HTML Canvas 元素里的屏幕坐標(biāo)轉(zhuǎn)換成地理坐標(biāo)，通過canvas的API設(shè)定每個屏幕坐標(biāo)的顏色和透明度即可形成電磁態(tài)勢圖。繪制電磁態(tài)勢圖的軟件代碼分為服務(wù)器端和瀏覽器端兩部分，服務(wù)器端代碼用Java或C#語言編寫，瀏覽器端可用JavaScript描述語言編寫，軟件流程如圖3所示。

3 結(jié)束語

本文將地理信息系統(tǒng)（GIS）融入到了web應(yīng)用之中，使用HTML Canvas規(guī)范，設(shè)計和實現(xiàn)了在瀏覽器端繪制電磁態(tài)勢的方法。因為繪制電磁態(tài)勢的方法使用了Canvas 2D API 規(guī)范，是在瀏覽器中完成的繪制，與采用的地理信息系統(tǒng)無關(guān)，所以該方法不僅可以在SuperMap地理信息系統(tǒng)中使用，也可以在其他支持B/S模式的地理信息系統(tǒng)中使用。使用該方法相對于使用ImageLayer層繪制的電磁態(tài)勢更清晰、直觀，為電磁態(tài)勢在B/S模式下的顯示提供了一個新的方法。

參考文獻(xiàn)：

[1] 北京超圖軟件股份有限公司. SuperMap iServer Java 從入門到精通[M]. 北京： 清華大學(xué)出版社， 2012.

[2] 崔偉， 劉小勇. 基于SuperMap Objects 的等值線繪制方法研究與實現(xiàn)[J]. 測繪與空間地理信息， 2012（9）： 42-44.

[3] W3C Editor's Draft. Canvas 2D API 規(guī)范1.0[S]. 2009.

[4] 林建素， 孟康健. Eclipse開發(fā)學(xué)習(xí)筆記[M]. 北京： 電子工業(yè)出版社， 2008.

[5] Cay S Horstmann， Gary Cornell. JAVA核心技術(shù)卷Ⅰ基礎(chǔ)知識[M].葉乃文， 鄺勁筠， 杜永萍，譯. 北京： 機械工業(yè)出版社， 2012.

[6] 鮑爾斯. JavaScript學(xué)習(xí)指南[M]. 李榮春， 吳蘭陟， 甲來安， 譯.北京： 人民郵電出版社， 2009.