基于openlayers的北部灣氣象可視化系統(tǒng)研究

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

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

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

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

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

圖1 系統(tǒng)結(jié)構(gòu)

2 關(guān)鍵技術(shù)

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

2.1 瓦片底圖的添加

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

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

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

圖2 雷達(dá)拼圖效果圖

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

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

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

圖4 點(diǎn)擊圖標(biāo)彈出popup氣泡窗口內(nèi)容

2.4 繪制閃電信息

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

圖5 熱點(diǎn)圖顯示效果

圖6 閃電顯示效果

2.5 預(yù)報(bào)風(fēng)場(chǎng)

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

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

圖8 大風(fēng)預(yù)報(bào)風(fēng)桿顯示界面

3 結(jié)語(yǔ)

采用OpenLayers 等JS 類庫(kù)搭建的北部灣氣象可視化系統(tǒng)，結(jié)構(gòu)清晰，能對(duì)實(shí)況天氣信息進(jìn)行直觀豐富的可視化顯示，還可通過(guò)雷達(dá)與衛(wèi)星云圖對(duì)欽州的短期臨近預(yù)報(bào)提供指導(dǎo)意義，對(duì)北部灣大風(fēng)的研究與預(yù)報(bào)具有重要意義。系統(tǒng)可擴(kuò)展性強(qiáng)，對(duì)將來(lái)建立覆蓋北部灣地區(qū)的實(shí)況、預(yù)報(bào)、預(yù)警系統(tǒng)奠定了基礎(chǔ)。