基于openlayers的北部灣氣象可視化系統研究

于瀟，潘靜，趙飛，陳崢蓉

（欽州市氣象局，廣西 欽州535000）

Webgis技術業已成為GIS在公眾應用領域的主流，相較于C/S 結構的應用，其具有跨平臺、部署方便、使用簡單等特點。Webmicaps 為Micaps 的B/S 構架產品，其提供了多種實況、預報產品的API 接口，用戶可通過REST方式方便調用。OpenLayers是一個專為Web GIS 客戶端開發提供的JavaScript 類庫包，具有部署方便，輕量級等特點[1]。非常適合于中小企業開源Web GIS 項目開發與應用。北部灣作為面向東盟的門戶，對海洋交通運輸和港口物流氣象服務的需求逐年增大，亟需開發一套北部灣氣象服務系統，當務之急是將各氣象產品可視化。基于Open-Layers 的北部灣氣象可視化系統是一個基于B/S 框架的應用系統，其采用Linux+Nginx 作為系統服務器，采用MySQL 作為數據庫，后端采用PHP 語言開發。客戶端通過Ajax向后端服務器發送數據請求，服務器訪問數據庫并將數據結果以Json格式返回到客戶端，客戶端使用Html、css、JS技術進行顯示與渲染[2-7]。

1 開發環境的搭建

本系統除前端開發必須的Html、css、JavaScript文件外還需要導入幾種JavaScript工具框架。其中通用框架—Jquery、地圖引擎—OpenLayers、圖表框架—Highcharts。業務邏輯層使用php 語言定時將cimiss、Webmicaps 上的數據存入數據庫，當客戶端發送Ajax請求時接收請求并從數據庫中提取數據處理后返回給客戶端。在數據庫中設計表結構對實況天氣數據、閃電數據、預報數據進行存儲。前端應用層也可直接訪問Webmicaps 提供的API 接口實現雷達瓦片與衛星瓦片的顯示。系統結構見圖1所示。

圖1 系統結構

2 關鍵技術

OpenLayers的工作原理是將整個地圖看作一個容器（Map），向其內部加載圖層與控件，其核心為地圖層（Layer）、對應圖層的數據源（Source）與矢量圖層樣式（Style）、地圖表現相關的地圖視圖（View）、地圖交互操作控件以及綁定在Map 和Layer 上的一系列待請求的事件。地圖數據根據數據源（Source）可分為Image、Tile、Vector 三大類型的數據源類，其中Image 類為單一圖像基類，Tile 類為瓦片抽象基類，Vector 則為矢量類[1]。矢量類又可分為點、線、面元素，點矢量元素多用于顯示站點天氣信息、閃電信息、格點天氣信息等；線、面矢量多結合在一起顯示等值線、落區、柵格等[1]。

2.1 瓦片底圖的添加

在內網環境下可使用webmicaps 提供的全球瓦片圖作為系統的底圖，在外網環境下可選用百度、天地圖等廠商提供的瓦片圖。加載底圖的關鍵代碼如下：

2.2 衛星、雷達瓦片圖的加載

雷達可使用webmicaps提供的全國雷達拼圖（見圖2），衛星可使用webmicaps 提供的風云衛星或日本葵花衛星圖。雷達和衛星皆為瓦片圖加載方式和同為瓦片圖的底圖類似。雷達拼圖加載的關鍵代碼如下：

圖2 雷達拼圖效果圖

2.3 地面站實況數據

每個地面站數據就是一個矢量點。客戶端經由Ajax 獲取后端傳來的Json 數據，畫矢量點圖標（見圖3）。首先為單個矢量點創建多種圖標樣式（Style）分別用以顯示風桿、溫度、站號，再將各矢量點結合成數組后在地圖上加載。點擊風桿或站號可從彈出的popup 氣泡窗口查看近24 小時溫度、濕度、降水、風要素（見圖4）。每個矢量點往往攜帶大量的數據，但在地圖上顯示的圖標有限，openlayers 使用popup氣泡窗口將極大的擴展矢量點的可視化程度。popup氣泡窗口是openlayers標記的一種，首先綁定一個鼠標左鍵的事件監聽，當單擊點位于圖層上或矢量點、線、面上時，使用類方法get（）獲取該圖層的攜帶的特定屬性并加載到事先創建好popup 對象上。加載矢量點關鍵代碼如下：

圖3 繪制地面站數據

圖4 點擊圖標彈出popup氣泡窗口內容

2.4 繪制閃電信息

類似于繪制矢量點，閃電坐標點大于一定閾值時，使用openlayers 的熱點圖展示，閃電坐標點沒達到閾值時，根據閃電類型，誤差級別，電流大小來設置圓點的顏色，再加上序號進行顯示，類似于繪制地面站信息需要為單矢量點創建多種圖標樣式。點擊圖標或者序號可從彈出的popup氣泡窗口查看詳細的閃電信息（見圖5～6）。

圖5 熱點圖顯示效果

圖6 閃電顯示效果

2.5 預報風場

后端定時從cimiss上獲取歐洲中心的北部灣地區細網格大風預報數據并存入數據庫。在主頁上設計一個可隱藏的預報風場時間、氣壓、時效性選項卡窗口，并為其綁定單擊事件，客戶端通過Ajax 發送POST 請求給后端數據庫，獲取Json 數據，在頁面上顯示矢量點圖標（見圖7～8）。

圖7 大風數據控件

圖8 大風預報風桿顯示界面

3 結語

采用OpenLayers 等JS 類庫搭建的北部灣氣象可視化系統，結構清晰，能對實況天氣信息進行直觀豐富的可視化顯示，還可通過雷達與衛星云圖對欽州的短期臨近預報提供指導意義，對北部灣大風的研究與預報具有重要意義。系統可擴展性強，對將來建立覆蓋北部灣地區的實況、預報、預警系統奠定了基礎。