吳孟春 朱景 周捷 朱忠勇

(1.溫州市氣象局，浙江溫州， 325027；2.文成縣氣象局，浙江文成 325300)

基于WPF的氣象信息系統(tǒng)的開發(fā)和實(shí)現(xiàn)

吳孟春1朱景2周捷1朱忠勇1

(1.溫州市氣象局，浙江溫州， 325027；2.文成縣氣象局，浙江文成 325300)

為了更好地展示氣象信息發(fā)布的效果,采用微軟新一代界面開發(fā)技術(shù)WPF，并結(jié)合商業(yè)圖表控件，開發(fā)了一套圖形化氣象信息顯示系統(tǒng)。與以往簡單的文本模式的發(fā)布平臺相比，通過WPF實(shí)現(xiàn)的圖形化界面,不僅使用戶可以實(shí)時掌握氣象信息，而且能直觀地了解氣象要素的動態(tài)變化趨勢和過程，有著更好的顯示效果。本文重點(diǎn)給出了圖形化的虛擬溫度計(jì)、能見度儀表、溫度和雨量的動態(tài)曲線及后臺數(shù)據(jù)的Web Server的設(shè)計(jì)和開發(fā)過程，并給出了相應(yīng)的代碼。

WPF；Telerik控件；Visifire控件；虛擬氣象儀器；Web Service

0 引 言

近幾年，隨著極端氣象災(zāi)害性天氣的不斷增多，社會公眾對氣象信息的需求也在不斷增多。氣象部門加大了氣象業(yè)務(wù)的建設(shè)，不斷拓展氣象信息的發(fā)布渠道，以便在突發(fā)氣象災(zāi)害發(fā)生時，公眾能快速獲取氣象預(yù)警信息?；ヂ?lián)網(wǎng)、傳統(tǒng)媒體、手機(jī)終端都是信息發(fā)布的主要途徑，而安裝在社區(qū)、公共場所的終端及信息機(jī)是氣象信息展示和發(fā)布的新平臺，可顯示氣象臺發(fā)布的最新的預(yù)警信息、天氣實(shí)況及天氣預(yù)報等，是對原信息發(fā)布渠道的補(bǔ)充和拓展。

本文利用流行的WPF技術(shù)開發(fā)了虛擬氣象儀器、動態(tài)圖表來顯示實(shí)時的氣象信息，應(yīng)用于高清終端和信息機(jī)上，有著很好的視覺效果。

1 WPF技術(shù)

1.1 WFP簡介

WPF是Windows Presentation Foundation 簡寫，是微軟新一代圖形系統(tǒng)，提供了豐富的.NET界面設(shè)計(jì)框架，驚艷的動畫設(shè)計(jì)和觸摸技術(shù)，用于生成能帶給用戶震撼視覺體驗(yàn)的 Windows 客戶端應(yīng)用程序[1]。使用 WPF，可以創(chuàng)建廣泛的獨(dú)立應(yīng)用程序以及瀏覽器承載的應(yīng)用程序。WPF所使用開發(fā)語言為XAML[2](eXtensible Application Markup Language，可擴(kuò)展應(yīng)用程序標(biāo)記語言)，是一種新的基于XML的描述性語言。您可以使用任何一種.Net編程語言(C#，VB NET等開發(fā)語言)進(jìn)行開發(fā)。XAML的界面描述代碼和后臺的控制語言代碼分開，即前面界面可由美工設(shè)計(jì)，后臺的代碼可由程序設(shè)計(jì)師來寫，從而提高了開發(fā)效率并有利于團(tuán)隊(duì)開發(fā)[4-5]。

1.2 應(yīng)用優(yōu)勢

1)設(shè)計(jì)人員和開發(fā)人員的分開是WFP優(yōu)點(diǎn)，同時WFP的動畫功能也是最吸引人的特色之一，其動畫播放并與程序邏輯進(jìn)行很好的交互，功能強(qiáng)，應(yīng)用方便，應(yīng)用這個功能，可以實(shí)現(xiàn)氣象信息滾動播出。

2)WPF提供了統(tǒng)一的 UI 平臺，只需掌握一個模式，就可以實(shí)現(xiàn)無限可能的 UI 體驗(yàn)。

3)通過提供能夠快速提供更好的視覺效果、獨(dú)特的用戶體驗(yàn)的技術(shù)和強(qiáng)大數(shù)據(jù)交互功能，可以實(shí)現(xiàn)氣象信息在一個全新的多媒體交互圖形界面上展示。

2 設(shè)計(jì)思路

氣象信息系統(tǒng)所要顯示的主要內(nèi)容有:溫濕度、雨量、能見度、風(fēng)向、風(fēng)速、天氣預(yù)報、預(yù)警信息以及12小時氣溫和雨量的變化過程。氣象儀器如溫濕度、雨量、能見度、風(fēng)向、風(fēng)速可進(jìn)行圖形化設(shè)計(jì)；天氣預(yù)報和預(yù)警信息可滾動顯示；12小時氣溫和雨量的變化過程則通過曲線和柱狀圖動態(tài)變化顯示。

開發(fā)中應(yīng)用了Telerik 控件和Visifire控件。Telerik 控件能開發(fā)豐富美觀的桌面應(yīng)用程序，用于創(chuàng)建溫濕度、雨量等虛擬的氣象儀表圖形；Visifire3能創(chuàng)建數(shù)據(jù)可視化的動態(tài)圖表控件，可用于創(chuàng)建氣溫和雨量數(shù)據(jù)的動態(tài)變化過程。今天天氣欄用文本組件顯示天氣預(yù)報，最下方滾動顯示預(yù)警信息，則應(yīng)用WPF的動畫技術(shù)。系統(tǒng)的整體布局如圖1所示。

圖1 系統(tǒng)整體布局

3 系統(tǒng)的開發(fā)設(shè)計(jì)

本系統(tǒng)主要是以圖表、文本方式展示天氣預(yù)報、天氣實(shí)況要素，來展示所在地的氣象信息。天氣預(yù)報應(yīng)用文本控件，滾動的預(yù)警信息應(yīng)用WPF的動畫功能。

3.1 虛擬氣象儀器的開發(fā)設(shè)計(jì)

3.1.1 引用命名空間

xmlns:telerik=“http://schemas.telerik.com/2008/xaml/presentation”

xmlns:c=“clr-namespace:Visifire.Charts;assembly=WPFVisifire.Charts”

3.1.2 虛擬儀表設(shè)計(jì)

以溫度計(jì)為例。需要在溫度計(jì)的圖形上繪出刻度和水銀柱，如圖2所示。用到的方法為telerik:LinearScale和telerik:LinearBar。相應(yīng)代碼如下 ：

Style=“{StaticResource ThermometerBarStyle}” />

圖2 虛擬溫度計(jì)

3.2 氣溫、雨量的動態(tài)實(shí)現(xiàn)

氣溫、雨量除了顯示實(shí)時的數(shù)據(jù)外，通常還要展示其在某個時間段的變化過程。Visifire控件在曲線和柱狀圖等表現(xiàn)方面有著驚艷的視覺效果，故應(yīng)用Visifire控件來展示氣溫、雨量數(shù)據(jù)。

3.2.1 前臺XAML代碼

引用Visifire3的Chart控件，加載chart的XAML代碼如下，

后臺加載數(shù)據(jù)的C#代碼：

//綁定Chart

DataPoint datapoint=null; //定義數(shù)據(jù)點(diǎn)

DataSeries dataSeries1=new DataSeries();//雨量數(shù)據(jù)系列

dataSeries1.RenderAs=RenderAs.Column;//雨量柱狀

dataSeries1.LabelText=“#YValue”;

datapoint=new DataPoint();

datapoint.AxisXLabel=stime;//X軸時間點(diǎn)

在閱讀教學(xué)中，學(xué)生的“說”，除了表現(xiàn)在回答問題外，還表現(xiàn)在小組討論的合作學(xué)習(xí)中。小組討論，指的是在教師的指導(dǎo)下，通過眾多的學(xué)生之間的對話，相互交流，實(shí)現(xiàn)教學(xué)目標(biāo)的一種方法。

datapoint.YValue=

Convert.ToDouble(dtChart.Rows[i][“Precipitation”].ToString()); //Y軸

dataSeries1.DataPoints.Add(datapoint);// 數(shù)據(jù)點(diǎn)添加到數(shù)據(jù)系列

dataSeries1.LegendText=“雨量(mm)”;//圖例顯示的信息

this.DataChart.Series.Add(dataSeries1); //添加到圖表

//增加溫度數(shù)據(jù)

……

title.Text=“12小時溫度(°C)、雨量(mm)變化圖”;

this.DataChart.ShadowEnabled=true;

3.2.2 數(shù)據(jù)交互

數(shù)據(jù)交互應(yīng)用Web Service。Web Service服務(wù)是遠(yuǎn)程數(shù)據(jù)調(diào)用最常用的一種數(shù)據(jù)接口，常被定義為一組模塊化的API，可通過網(wǎng)絡(luò)進(jìn)行調(diào)用，來執(zhí)行遠(yuǎn)程系統(tǒng)的請求服務(wù)，并返回用戶所需的數(shù)據(jù)集、XML或JOSN格式數(shù)據(jù)。

1) 建立Web Service數(shù)據(jù)接口。Web Service是通過連接數(shù)據(jù)庫，執(zhí)行查詢返回所需數(shù)據(jù)，并填充到DataSet中。

2)在前臺應(yīng)用程序中需添加服務(wù)引用，即在程序中添加Add Service References 服務(wù)引用，加入Web Service數(shù)據(jù)接口，為Chart提供數(shù)據(jù)。

在構(gòu)建后臺的數(shù)據(jù)服務(wù)后，運(yùn)行的整體效果如圖3所示。

圖3 系統(tǒng)整體效果圖

3.3 預(yù)報信息的動態(tài)顯示

前端主要應(yīng)用WPF的動畫功能來實(shí)現(xiàn)，在WPF中我們采用Storyboard(故事板)的方式來編寫動畫。

1)顯示形式

在界面的底端，以文字信息從右向左緩慢移動顯示，并加載些圖標(biāo)，如預(yù)警信號等。

2)實(shí)現(xiàn)方式

建立數(shù)據(jù)接口和配置文件，當(dāng)有數(shù)據(jù)更新時，觸發(fā)信息的實(shí)時更新和顯示，應(yīng)用于各類預(yù)警信息的發(fā)布。

4 結(jié) 語

應(yīng)用WPF的圖形技術(shù)開發(fā)的應(yīng)用系統(tǒng)的界面具有超強(qiáng)的視覺效果。本文應(yīng)用WPF的編程模型、語言和框架，結(jié)合儀表控件，開發(fā)了虛擬的氣象儀器；結(jié)合曲線控件，開發(fā)了氣象要素的動態(tài)顯示；通過WPF動畫功能可讓信息滾動顯示，讓用戶更直觀更快捷地掌握當(dāng)?shù)刈钚碌臍庀笮畔⒌耐瑫r，有著更好的視覺體驗(yàn)。本系統(tǒng)已用于文成氣象局的大屏監(jiān)控平臺，可擴(kuò)展建立后臺更多的數(shù)據(jù)推送服務(wù)，并通過配置站點(diǎn)文件可讓多站點(diǎn)輪詢顯示。后期還將加入GIS功能，結(jié)合WPF的觸摸技術(shù)用于觸摸屏，點(diǎn)擊站點(diǎn)，可顯示站點(diǎn)的氣象信息。

[1] http://www.cnblogs.com/xdotnet/archive/2009/01/09/wpf_1.html.

[2] [美]Matthew MacDonald；王德才(譯).WPF編程寶典(C#2010版)[M]. 北京：清華大學(xué)出版社, 2011.

[3] http://www.cnblogs.com/xinweichen/archive/2011/12/08/2280447.html.

[4] 劉鐵猛.深入淺出WPF[M].北京：中國水利水電出版社，2010.

[5] 陳鄭軍，劉振東，胡方霞，等.WPF應(yīng)用開發(fā)項(xiàng)目教程[M].北京：中國水利水電出版社,2015.

2016-08-02