冀玉超

（東營市氣象局，山東 東營 257091）

0 引言

目前主流風(fēng)向風(fēng)速的可視化展示均無法快速判斷一定時間段內(nèi)的風(fēng)向轉(zhuǎn)換和風(fēng)力變化情況，為了方便用戶特別是沒有氣象背景的用戶快速獲取本地氣象水文過程，開發(fā)了基于點元素描述多維風(fēng)浪要素的可視化展示系統(tǒng)。本文主要對系統(tǒng)設(shè)計思路、功能及特點進行闡述。

1 背 景

1.1 現(xiàn) 狀

目前，風(fēng)向和風(fēng)速曲線展示的方案主要有兩種[1]，如圖1所示。

圖1 風(fēng)向和風(fēng)速曲線方案

方案1中，橫坐標表示時間，縱坐標代表風(fēng)力，箭頭的指向即表示風(fēng)的去向。該方案使用頻次較高，但存在如下不足之處：不能快速地描述風(fēng)向轉(zhuǎn)換，當時間軸加密時，箭頭會疊加在一起，給風(fēng)向判斷帶來一定難度。

方案2中，橫坐標為時間，縱坐標分別是風(fēng)力和風(fēng)向角度值。該方案使用頻次較低，其不足之處是，用戶需對風(fēng)向和角度的對應(yīng)關(guān)系有一定的知識背景和判斷過程，不能快速描述風(fēng)向轉(zhuǎn)換；需結(jié)合兩個曲線去描述風(fēng)向風(fēng)力變化，不夠簡捷。

1.2 需 求

為了讓用戶快速獲取本地氣象水文過程，針對上述兩種方案的不足之處，利用HTML5、C#及Microsoft SQL Server技術(shù)[2]，開發(fā)了基于點元素描述多維風(fēng)浪要素的可視化展示系統(tǒng)。

2 系統(tǒng)設(shè)計

2.1 服務(wù)器端

服務(wù)器操作系統(tǒng)版本為Windows Server 2008 R2以上版本，IIS采用6.0以上版本，C#為4.0以上版本，使用的數(shù)據(jù)庫為SQL Server 2008以上版本。

2.2 客戶端

客戶端瀏覽器端需要支持HTML5，推薦使用Google瀏覽器。

2.3 工作流程

設(shè)計的系統(tǒng)工作流程如圖2所示。

圖2 系統(tǒng)流程圖

3 圖形展示

Web界面效果如圖3所示。

圖3 Web界面效果圖

3.1 橫坐標

橫坐標代表時間軸序列，上面一行代表整時（Hour），下面一行代表日（Day），對應(yīng)刻度線為淺棕色顯示。

設(shè)計亮點：能自動伸縮調(diào)整時間軸跨度和刻度線密度。

3.2 左側(cè)縱坐標

左側(cè)縱坐標代表風(fēng)力等級，共設(shè)置＜4、4、5、6、7、8、9、10以及＞10共9個等級，對應(yīng)刻度線為棕色顯示。

3.3 右側(cè)縱坐標

右側(cè)縱坐標代表波高值，單位為厘米（cm），對應(yīng)刻度線為黑色顯示。

設(shè)計亮點：為實現(xiàn)本地風(fēng)浪要素較好的相關(guān)性[3-4]，根據(jù)近10年歷史數(shù)據(jù)求得多年波高和風(fēng)力的統(tǒng)計關(guān)系，進而確定波高量程和刻度線的間隔，避免了波高縱坐標向上過度壓縮或拉伸不協(xié)調(diào)造成的不美觀。

3.4 風(fēng)向色標玫瑰圖

遵循“上北下南左西右東”原則[5]，如表1所示。本地海域?qū)ζ珫|、偏北風(fēng)比較敏感，其對應(yīng)海況一般較差，因此選用醒目的紅、黃色來表示偏東風(fēng)和偏北風(fēng)。

表1 風(fēng)向與顏色的對應(yīng)關(guān)系

設(shè)計亮點：創(chuàng)新實現(xiàn)了用像素點元素的顏色屬性來表示8個方向的功能，直觀、連續(xù)性好，能快速判斷風(fēng)向演變情況。

在最大波高曲線中，紫色曲線代表最大波高，即采樣周期內(nèi)最大的一個波高數(shù)值。

在有效波高曲線中，灰色曲線代表有效波高，即采樣周期內(nèi)前三分之一顯著波高的平均值。

3.5 功能區(qū)按鈕

功能區(qū)包括下拉菜單、單選按鈕、文本框、普通按鈕以及提交按鈕5種控件?！罢军c”下拉列表包含近海5個灘涂站和2個平臺站，在“風(fēng)向風(fēng)速”按鈕下分別單擊“平均”“瞬時”“綜合”即可查看平均、三秒瞬時以及綜合風(fēng)向風(fēng)力，“時間”按 鈕 包 括“-240h”“-24h”“-12h”“-6h”“+6h” “+12h”“+24h”“+240h”共8個按鈕，單擊相應(yīng)按鈕實現(xiàn)整體前進或后退；“單站/多站”按鈕可查看單站或多站對應(yīng)的要素曲線，單擊“波浪”按鈕可以疊加波浪曲線；“開始時間”文本框用12位時間字符串（格式：yyyyMMddhhmm）表示年月日時分，結(jié)合“結(jié)束時間”共同實現(xiàn)時間的精準定位；“結(jié)束時間”文本框的使用方法同“開始時間”文本框，單擊“查看”按鈕可查看相應(yīng)參數(shù)對應(yīng)的要素曲線。

4 功能介紹

4.1 風(fēng)要素查詢

4.1.1 單站點查詢

查詢單站點瞬時風(fēng)向風(fēng)速時，首先選中“單站”按鈕，然后選擇站點和“瞬時”按鈕，輸入要查詢的開始和結(jié)束時間，最后單擊“查看”按鈕，即可顯示瞬時風(fēng)向風(fēng)速曲線。單站點平均風(fēng)向風(fēng)速查詢方法與單站點瞬時風(fēng)向風(fēng)速查詢方法相同，需選擇“平均”按鈕；單站點綜合風(fēng)向風(fēng)速查詢方法與單站點瞬時風(fēng)向風(fēng)速查詢方法相同，需選擇“綜合”按鈕。

4.1.2 多站點查詢

進行多站點瞬時風(fēng)向風(fēng)速查詢時，首先選中“多站”按鈕，然后選中“瞬時”按鈕和相應(yīng)多個站點，單擊“查看”按鈕即可顯示多站點瞬時風(fēng)向風(fēng)速曲線。多站點平均風(fēng)向風(fēng)速查詢方法與多站點瞬時風(fēng)向風(fēng)速查詢方法相同，需選擇“多站”“平均”單選按鈕。多站點綜合風(fēng)向風(fēng)速查詢方法與多站點瞬時風(fēng)向風(fēng)速查詢方法相同，需選擇“多站”“綜合”單選按鈕。

4.2 風(fēng)浪要素綜合查詢

4.2.1 單站點查詢

查詢單站點瞬時風(fēng)向風(fēng)速和波高時，首先在站點下拉列表中選中站點，然后選中“瞬時”單選按鈕，輸入要查詢的開始時間和結(jié)束時間，單擊“查看”按鈕，系統(tǒng)顯示瞬時風(fēng)向風(fēng)速曲線，再單擊“波高”按鈕可疊加波高曲線。

單站點平均風(fēng)向風(fēng)速和波高的查詢方法與單站點瞬時風(fēng)向風(fēng)速和波高查詢方法相同，需選擇“平均”單選按鈕。單站點綜合風(fēng)向風(fēng)速和波高的查詢方法與單站點瞬時風(fēng)向風(fēng)速和波高查詢方法相同，需選擇“綜合”單選按鈕。

4.2.2 多站點查詢

多站點風(fēng)浪要素綜合查詢方法和單站點查詢方法大致相同。不同之處在于，查詢多站點瞬時風(fēng)向風(fēng)速和波高時，需選擇“多站”“瞬時”單選按鈕曲線；查詢多站點平均風(fēng)向風(fēng)速和波高時，需選擇“多站”“平均”單選按鈕；查詢多站點綜合風(fēng)向風(fēng)速和波高時，需選擇“多站”“綜合”單選按鈕。

4.3 時間軸快速定位

單 擊“+6h”“-6h”“+12h”“-12h”“+24h” “-24h”“+240h”“-240h”按鈕，查詢時間段整體快進或后退6h、12h、24h、240h，可實現(xiàn)快速前進查詢和快速后退查詢。

進行精準定位查詢時，在“開始時間”和“結(jié)束時間”文本框輸入12位時間字符串，能實現(xiàn)精準、快速定位查詢。

5 結(jié)語

系統(tǒng)創(chuàng)新實現(xiàn)了用像素點元素的顏色屬性來表示8個不同風(fēng)向的功能，能快速描述風(fēng)向、風(fēng)速及海浪的變化和生消特點。通過Web頁面參數(shù)設(shè)置，可實現(xiàn)任意單站或多站在任意時間段風(fēng)浪的快速可視化展示。系統(tǒng)實現(xiàn)了瀏覽器端Web頁面上的快速查詢，支持電腦、手機及平板等終端。