吳孟春 朱景 周捷 朱忠勇

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

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

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

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

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

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

0 引 言

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

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

1 WPF技術

1.1 WFP簡介

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

1.2 應用優(yōu)勢

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

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

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

2 設計思路

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

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

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

3 系統(tǒng)的開發(fā)設計

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

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

3.1.1 引用命名空間

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

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

3.1.2 虛擬儀表設計

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

Style=“{StaticResource ThermometerBarStyle}” />

圖2 虛擬溫度計

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

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

3.2.1 前臺XAML代碼

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

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

//綁定Chart

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

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

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

dataSeries1.LabelText=“#YValue”;

datapoint=new DataPoint();

datapoint.AxisXLabel=stime;//X軸時間點

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

datapoint.YValue=

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

dataSeries1.DataPoints.Add(datapoint);// 數(shù)據(jù)點添加到數(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ù)交互應用Web Service。Web Service服務是遠程數(shù)據(jù)調(diào)用最常用的一種數(shù)據(jù)接口，常被定義為一組模塊化的API，可通過網(wǎng)絡進行調(diào)用，來執(zhí)行遠程系統(tǒng)的請求服務，并返回用戶所需的數(shù)據(jù)集、XML或JOSN格式數(shù)據(jù)。

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

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

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

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

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

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

1)顯示形式

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

2)實現(xiàn)方式

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

4 結(jié) 語

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

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

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

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

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

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

2016-08-02