基于點(diǎn)元素描述多維風(fēng)浪要素的可視化展示

冀玉超

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

0 引言

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

1 背 景

1.1 現(xiàn) 狀

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

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

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

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

1.2 需 求

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

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

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è)計(jì)的系統(tǒng)工作流程如圖2所示。

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

3 圖形展示

Web界面效果如圖3所示。

圖3 Web界面效果圖

3.1 橫坐標(biāo)

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

設(shè)計(jì)亮點(diǎn)：能自動(dòng)伸縮調(diào)整時(shí)間軸跨度和刻度線密度。

3.2 左側(cè)縱坐標(biāo)

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

3.3 右側(cè)縱坐標(biāo)

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

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

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

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

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

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

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

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

3.5 功能區(qū)按鈕

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

4 功能介紹

4.1 風(fēng)要素查詢

4.1.1 單站點(diǎn)查詢

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

4.1.2 多站點(diǎn)查詢

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

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

4.2.1 單站點(diǎn)查詢

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

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

4.2.2 多站點(diǎn)查詢

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

4.3 時(shí)間軸快速定位

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

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

5 結(jié)語

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