基于googlemap和highcharts的精細化預報顯示平臺的開發和實現

杜友強　吳孟春

摘要：當前氣象部門都建立了精細化預報系統，向公眾提供了精細化預報服務。精細化預報產品不斷增多，如何更好、更直觀的展現這些預報產品是氣象業務技術人員需要去解決的問題。本文主要介紹了Google Map、HighCharts、Ajax的技術特點，并結合Asp.net和數據庫的開發環境，實現精細化預報要素實時動態展示并給出相應的方法和代碼。

關鍵詞：Google Map HighCharts Ajax 精細化預報 數據交互

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

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

1 技術應用

1.1 Google Map

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

1.2 HighCharts

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

1.3 jQuery Ajax技術

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

2 設計思路

2.1 平臺設計框架和應用方法

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

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

2.2 Highcharts應用方法

需要在Highcharts上顯示要素為：氣溫、降水、實況及天氣圖標等。Series是Highcharts的重要屬性，是設置數據點數據， 也就是圖表顯示的值，在項目中通常從數據庫中取出數據來實現數據的動態顯示。

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），是在氣溫曲線上疊加圖標；變量returnValue與returnValue1則是后臺返回的數據。

3 數據交互

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

4 結語

本文Google Map、HighCharts結合，并應用Ajax開發的精細化預報顯示平臺具有以下幾點優點：

（1）Google Map提供免費的地圖服務，HighCharts也是免費的圖表控件，結合Ajax和數據庫，便可應用開發，開發應用成本低，網站部署簡單，管理方便。

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

（3）具有通用性，相類似的氣象要素數據或時空序列數據都可通過此方法來開發實現。