基于googlemap和highcharts的精細(xì)化預(yù)報顯示平臺的開發(fā)和實現(xiàn)

杜友強　吳孟春

摘要：當(dāng)前氣象部門都建立了精細(xì)化預(yù)報系統(tǒng)，向公眾提供了精細(xì)化預(yù)報服務(wù)。精細(xì)化預(yù)報產(chǎn)品不斷增多，如何更好、更直觀的展現(xiàn)這些預(yù)報產(chǎn)品是氣象業(yè)務(wù)技術(shù)人員需要去解決的問題。本文主要介紹了Google Map、HighCharts、Ajax的技術(shù)特點，并結(jié)合Asp.net和數(shù)據(jù)庫的開發(fā)環(huán)境，實現(xiàn)精細(xì)化預(yù)報要素實時動態(tài)展示并給出相應(yīng)的方法和代碼。

關(guān)鍵詞：Google Map HighCharts Ajax 精細(xì)化預(yù)報 數(shù)據(jù)交互

中圖分類號：TP311 文獻標(biāo)識碼：A 文章編號：1007-9416（2016）06-0187-01

隨著氣象業(yè)務(wù)的不斷發(fā)展，氣象預(yù)報的模式和方法也在不斷地改進，更精確、更精細(xì)的預(yù)報模式帶來預(yù)報時間的變化：預(yù)報時間從1～2天的短期數(shù)值天氣預(yù)報，到制作一個星期左右的中長期數(shù)值天氣預(yù)報，而且預(yù)報的準(zhǔn)確率也在不斷提高，同時，城市化快速發(fā)展以及災(zāi)害性天氣不斷增多，這也對氣象服務(wù)提出的更高要求和挑戰(zhàn)，氣象部門需要建立多種渠道的精細(xì)化預(yù)報服務(wù)平臺來發(fā)布信息。

1 技術(shù)應(yīng)用

1.1 Google Map

Google Map是基于互聯(lián)網(wǎng)的地圖信息系統(tǒng)，提供開放的地理信息服務(wù)，其應(yīng)用很廣泛，可實現(xiàn)全球地理位置搜索、交通情況查詢、汽車導(dǎo)航甚至街景展示和顯示三維模型等功能。Google提供了基于JavaScript、flash等技術(shù)的應(yīng)用程序開發(fā)接口即Google Map API，用戶可通過這一接口應(yīng)用Google Map進行二次開發(fā)，Google Map API可以讓Google Map 嵌入自己的網(wǎng)頁中。

1.2 HighCharts

Highcharts 是一個用純JavaScript編寫的一個圖表庫， 能夠很簡單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費提供給個人學(xué)習(xí)、個人網(wǎng)站和非商業(yè)用途使用。HighCharts支持的圖表類型有曲線圖、區(qū)域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表。HighCharts還有很好的兼容性，能夠完美支持當(dāng)前大多數(shù)瀏覽器。在HighCharts圖表中可以展示氣象要素的動態(tài)變化過程，同時還可以疊加氣象要素相關(guān)的圖標(biāo)，有很好的應(yīng)用和展示效果。

1.3 jQuery Ajax技術(shù)

Ajax的核心是JavaScript對象XmlHttpRequest，它是一種支持異步請求的技術(shù)。簡而言之，XmlHttpRequest使您可以使用JavaScript向服務(wù)器提出請求并處理響應(yīng)，而不阻塞用戶，用戶從感覺上幾乎所有的操作都會很快響應(yīng)沒有頁面重載的等待，既無需刷新頁面便可向服務(wù)器傳輸或讀寫數(shù)據(jù)（又稱無刷新更新頁面），在網(wǎng)頁設(shè)計中使用Ajax技術(shù)，有很的交互及優(yōu)化用戶體驗，。

2 設(shè)計思路

2.1 平臺設(shè)計框架和應(yīng)用方法

（1）平臺是采用Asp.net技術(shù)開發(fā)框架，后臺服務(wù)端采用IIS搭建Web服務(wù)器，數(shù)據(jù)庫為SQL 2005；平臺前端為js腳本調(diào)用Google Map地圖，數(shù)據(jù)交互文件為ashx。

（2）后臺數(shù)據(jù)是72小時的站點預(yù)報數(shù)據(jù)，需要在Google Map中顯示所有站點，站點定時動態(tài)移動，同時在HighCharts上顯示某時間序列的各時次的天氣要素，并在table表中顯示其它的氣象要素值。

2.2 Highcharts應(yīng)用方法

需要在Highcharts上顯示要素為：氣溫、降水、實況及天氣圖標(biāo)等。Series是Highcharts的重要屬性，是設(shè)置數(shù)據(jù)點數(shù)據(jù)， 也就是圖表顯示的值，在項目中通常從數(shù)據(jù)庫中取出數(shù)據(jù)來實現(xiàn)數(shù)據(jù)的動態(tài)顯示。

series： [{ type： ‘spline， name： ‘氣溫， marker： {symbol： ‘url（images/02.png）}，data：<%= returnValue %> ， yAxis： 0， color： ‘#FF9C23 }， { type： ‘column， name： ‘降水， data：<%= returnValue1 %> ， yAxis： 1， color： ‘#FFFFFF }]

其中marker： {symbol： ‘url（images/02.png），是在氣溫曲線上疊加圖標(biāo)；變量returnValue與returnValue1則是后臺返回的數(shù)據(jù)。

3 數(shù)據(jù)交互

（1）精細(xì)化數(shù)據(jù)是數(shù)值預(yù)報模式計算產(chǎn)生的逐3小時的3天預(yù)報數(shù)據(jù)。 與后臺的數(shù)據(jù)交互則是通過從數(shù)據(jù)庫中取出數(shù)據(jù)形成ashx文件：ashx文件即一般處理程序（HttpHandler）是·NET眾多web組件的一種，ashx程序適合產(chǎn)生供瀏覽器處理的、不需要回發(fā)處理的數(shù)據(jù)格式，用于生成動態(tài)文本內(nèi)容。（2） 建立data.ashx文件，從數(shù)據(jù)庫讀取數(shù)據(jù)，返回前臺調(diào)用。

4 結(jié)語

本文Google Map、HighCharts結(jié)合，并應(yīng)用Ajax開發(fā)的精細(xì)化預(yù)報顯示平臺具有以下幾點優(yōu)點：

（1）Google Map提供免費的地圖服務(wù)，HighCharts也是免費的圖表控件，結(jié)合Ajax和數(shù)據(jù)庫，便可應(yīng)用開發(fā)，開發(fā)應(yīng)用成本低，網(wǎng)站部署簡單，管理方便。

（2）氣象數(shù)據(jù)是時空變化數(shù)據(jù)，通過上述技術(shù)能夠直觀有效地動態(tài)顯示，相對簡單的文本、圖片、表格來說，有更好的表現(xiàn)效果。

（3）具有通用性，相類似的氣象要素數(shù)據(jù)或時空序列數(shù)據(jù)都可通過此方法來開發(fā)實現(xiàn)。