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

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

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

1 開發(fā)環(huán)境的搭建

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

圖1 系統(tǒng)結構

2 關鍵技術

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

2.1 瓦片底圖的添加

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

2.2 衛(wèi)星、雷達瓦片圖的加載

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

圖2 雷達拼圖效果圖

2.3 地面站實況數(shù)據(jù)

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

圖3 繪制地面站數(shù)據(jù)

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

2.4 繪制閃電信息

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

圖5 熱點圖顯示效果

圖6 閃電顯示效果

2.5 預報風場

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

圖7 大風數(shù)據(jù)控件

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

3 結語

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