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

冀玉超

（東營(yíng)市氣象局，山東 東營(yíng) 257091）

0 引言

目前主流風(fēng)向風(fēng)速的可視化展示均無(wú)法快速判斷一定時(shí)間段內(nèi)的風(fēng)向轉(zhuǎn)換和風(fēng)力變化情況，為了方便用戶特別是沒(méi)有氣象背景的用戶快速獲取本地氣象水文過(guò)程，開發(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)向判斷帶來(lái)一定難度。

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

1.2 需 求

為了讓用戶快速獲取本地氣象水文過(guò)程，針對(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ù)庫(kù)為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)向上過(guò)度壓縮或拉伸不協(xié)調(diào)造成的不美觀。

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

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

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

設(shè)計(jì)亮點(diǎn)：創(chuàng)新實(shí)現(xiàn)了用像素點(diǎn)元素的顏色屬性來(lái)表示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é)語(yǔ)

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