基于Silverlight的城市地理系統設計

駱鵬傲，朱 紅，劉奕君，劉 菁

（徐州醫(yī)學院醫(yī)學信息學院，江蘇 徐州221004）

隨著互聯網的發(fā)展，現在的信息已無紙化、網絡化，網絡給我們帶來了方便，人們已習慣用計算機、網絡平臺去解決問題。Silverlight［1－2］是微軟開發(fā)的下一代Web的矢量接口新技術，本身具備極優(yōu)越的矢量動畫、2D繪圖與影音播放互動能力，可以大幅提升用戶的滿意度。我們開發(fā)的基于Silverlight的城市地理系統給大家?guī)砹朔奖悖瑫r，Silverlight技術制作［1，3］的地圖部分給大家?guī)硪曈X的沖擊。

該系統的具體任務就是設計一個基于Silverlight的城市地理系統，由計算機來代替人工執(zhí)行一系列諸如瀏覽、查詢、管理等操作。這樣就使用戶和管理員可以輕松快捷地完成相關任務，使地理管理工作系統化、規(guī)范化、自動化，從而達到提高管理效率的目的［4］。

1 系統總計設計

1.1 系統設計分析

本城市地理系統采用技術成熟的Microsoft visual studio 2008作為前臺開發(fā)工具。后臺數據庫采用微軟公司的SQL Server 2000數據庫［5］，因為它的靈活性、安全性和易用性為數據庫編程提供了良好的條件。

ASP.NET［6］是 NET Framework 的 Web 分支。.NET Framework完全產生于面向對象的類的層次結構，涵蓋Windows操作系統的所有編程問題。Web應用程序由頁面組成，用戶從服務器請求這些頁面，然后服務器對頁面進行處理，以HTML代碼的形式返回。

微軟Silverlight是一個跨瀏覽器、跨客戶平臺的技術，能夠設計、開發(fā)和發(fā)布有多媒體體驗與富交互的網絡交互程序。

因為Silverlight提供了一個強大的平臺，能夠開發(fā)出具有專業(yè)圖形、音頻和視頻的 Web應用程序，增強了用戶體驗，所以Silverlight吸引了設計人員和開發(fā)人員的眼球。同時，Silverlight還提供了強大的工具來提高他們的工作效率。

基于以上優(yōu)點，系統采用 ASP.NET［7］與Silverlight技術結合進行開發(fā)［8］。而城市地理系統的理論及技術已經日趨成熟，因此基于Silverlight的城市地理系統的開發(fā)手段是完全可行的。

城市地理系統是一個應用程序，主要用于客戶前臺瀏覽、開發(fā)人員后臺管理。對于復雜的地理圖形，我們首先應對其進行規(guī)劃，以確定合理的地形結構。地理系統的體系結構是實現用戶查閱的視圖表現。筆者設計的基于Silverlight的城市地理系統其構成要素包括：注冊登錄、主頁面、老校區(qū)、新校區(qū)以及各校區(qū)下的部分地方顯示，并分析了所有顯示部分作為一個有機整體的相互之間的聯系，系統總體結構示意圖，如圖1所示。

1.2 功能分析

隨著互聯網的發(fā)展，信息正向著網絡化、無紙化的方向發(fā)展，城市地理業(yè)務量急劇增加，有關各種信息量也成倍增長。在這種情況下單靠人工來處理的信息，工作量將很大，若相關信息有幾萬甚至幾十萬，人工處理將變得不可想象。用計算機可使人們從繁重的勞動中解脫出來，僅使用一些簡單的操作便可及時、準確地完成相關工作。用Silverlight制作的地理視圖給人一種視覺的沖擊，而且可以與其他技術整合，達成更好的效果。

圖1 系統總體結構示意圖

本系統主要應用于用戶瀏覽，其應用目的是為了讓用戶得到相關地理信息，因此，本系統將要實現如下功能：（1）用戶可以通過注冊、登錄；（2）查看全面圖；（3）進行某一具體位置的查看，其可以是些圖片或視頻展示。

1.2.1 流程分析

城市地理系統的基本流程主要包括：用戶注冊、登錄本系統進入地圖主頁面，在這張頁面上可以通過鼠標拖動、點擊、移入、移出實現各個功能。鼠標點擊其中的某一地方時，打開另一張頁面，在這張頁面上同樣可以實現某些功能。

1.2.2 界面分析

（1）設計用戶登錄界面。用戶需要登錄系統后才能進行相應的操作，用戶注冊，填寫正確的用戶名、密碼、郵件等才能登錄，進入系統的頁面，從而進行查看。

（2）設計地圖顯示部分界面。設計主頁面，用戶通過主頁面可以看到一塊區(qū)域的地圖展示，通過Silverlight的程序編寫顯示路、景區(qū)、學校等。設計其子頁面，同樣是用Silverlight程序實現的。

1.2.3 開發(fā)及運行環(huán)境分析

硬件平臺：CPU：P41.8GHz。內存：256MB以上。軟件平臺：操作系統：Windows XP／Windows 2000；數據庫：SQL Server 2000。

2 模塊設計

基于Silverlight的城市地理系統頁面主要包括以下功能模塊：

（1）用戶登錄注冊模塊：為用戶進入頁面提供一個入口；

（2）地圖顯示模塊：展示一個地方的縮放圖，可以通過鼠標事件實現更詳細的信息顯示。

2.1 登錄模塊的設計

用戶要使用本系統，首先必須通過系統的身份認證，這個過程叫做登錄。登錄過程需要完成以下任務：

（1）根據用戶名和密碼來判斷是否可以進入本系統。

（2）成功登錄的用戶將進入系統的主界面。

（3）若還沒有注冊，則不能登錄該系統，會出現提示，你可以通過注冊頁面進行注冊后再進入主界面。系統登陸界面如圖2所示。

圖2 系統登陸界面

2.2 地圖模塊的設計

可以通過Express Blend 2進行畫圖，接下來利用VS2008編寫一些代碼。呈現一些地圖主要有4張頁面，其中一個是主頁面，其余3個是它的子頁面，通過鼠標事件來實現頁面的跳轉。

地圖中最常出現的就是路了，利用Silverlight的Path編寫路徑。地圖視圖呈現出來了，就要讓它實現一些功能，首先瀏覽器所顯示的窗口有限，我們看到的是原設計的畫面大小，這樣，為了滿足用戶的需求，需要實現地圖部分的移動、全屏與正常模式顯示、縮放功能。全屏模式與返回正常模式部分代碼：

3 關鍵技術

3.1 Silverlight技術

微軟Silverlight是一個跨瀏覽器、跨客戶平臺的技術，能夠設計、開發(fā)和發(fā)布有多媒體體驗與富交互（RIA，Rich Interface Application）的網絡交互程序。他是Windows PresentATIon Foundation的一個子產品，其利用了跨瀏覽器Web技術進行設計，以實現多操作系統，甚至是移動設備上的無縫運行。和Flash一樣，WPF／E是作為一個瀏覽器的插件，可以顯示矢量圖形、動畫和視頻。因為Silverlight提供了一個強大的平臺，能夠開發(fā)出具有專業(yè)圖形、音頻和視頻的Web應用程序，增強了用戶體驗，所以Silverlight吸引了設計人員和開發(fā)人員的眼球。

使用Silverlight技術可以得到微軟廣大資源的協助，包括24小時的技術支持、服務器、解決方案、技術資源與社區(qū)資源。Silverlight主要使用XAML語言進行開發(fā)，其開始支持JavaScript，C＃，VB，Ruby以及Python等多種開發(fā)語言。相比Adobe AIR，顯然它討好的開發(fā)者群體更加多。Silverlight具有先進的XAML理念、強大的.NET與 Windows平臺的整合優(yōu)勢等等。

我們選擇使用Silverlight來開發(fā)該地理系統，是因為Silverlight有如下優(yōu)點：

（1）輕量級的瀏覽器 plug－in。

（2）原生的展現層Runtime。

（3）具備影音播放與互動功能，就是能夠輕松地應付影音文件在Internet上的播放。

（4）程序開發(fā)層與既有技術的集成。Silverlight在設計之初并不打算成為自創(chuàng)一格的孤島，也就是一切都不以黑箱為目的，通過JavaScript您可以訪問Silverlight對象，并且可以與既有的HTML、DOM、CSS及AJAX技術進行集成與互動，它將成為一座來往便利的寶島（Rich island），讓各種技術可以互相搭配運用。

（5）能夠讓網頁設計師及美工設計人員，通過Express Design及Express Blend設計inlineXAML形式的Silverlight控件及程序。

（6）對于影音專業(yè)人士可以利用Expression Media來編輯與管理影音文件。

（7）能夠與現有的HTML技術、DOM、CSS與ASP.NET網頁技術進行集成。可與目前各種Client Side及Server Side的AJAX技術進行集成，當然也包括了ASP.NET AJAX。

3.2 ASP.NET技術

ASP.NET是.NET Framework的Web分支。ASP.NET運行庫將被請求的.aspx頁面的源代碼轉換為從page基類繼承的.NET Framework類的實例。客戶端腳本編寫功能在ASP.NET中也得到實現：即動態(tài) HTML對象模型（DHTML）。ASP.NET服務器控件分為兩類，即HTML服務器控件和Web服務器控件。System.Web.UI.Web－Controls將Web服務器控件劃為一類。HTML服務器控件是表示得到大多數瀏覽器支持的標準HTML標記的類，其屬性集與相應標記的屬性集完全匹配。

4 系統實現

4.1 用戶注冊、登錄

若你已注冊了，則直接輸入用戶名和密碼進入地圖顯示界面，如沒注冊，則點擊注冊，進入注冊頁面 。系統注冊界面如圖3所示。

圖3 系統注冊界面

如果用戶注冊時輸入了空的用戶名，兩次輸入的密碼不相同，或者輸入了錯誤格式的Email，都將給出相應的提示，以便讓用戶順利注冊成功。若注冊成功，系統會彈出“注冊成功”的小提示窗口，關閉該窗口將進入地圖顯示頁面。

4.2 地圖顯示

通過一段段的程序編寫就組成了我們所能看到的地圖。地圖視圖雖然呈現出來了，但瀏覽器所顯示的窗口有限，我們看到的是原設計的畫面大小，為了滿足用戶的需求，系統須具備地圖部分的移動、全屏與正常模式顯示、縮放功能。

以徐州市某高校地圖為例，我們來演示利用鼠標在地圖上實現的移動、全屏與正常模式顯示、縮放功能。

在徐州市某高校地圖中，在顯示的地圖上通過鼠標移動，點擊可以實現對應的事件。在地圖中間部分位置上拖動鼠標，就可以移動這塊區(qū)域的地圖。把鼠標移到縮放下面的小按鈕時，鼠標會變成手狀，上下拖動會實現中間地圖部分的縮放，這樣就可以看得更清楚些。點擊全屏，就可以實現全屏觀看地圖。地圖全屏模式如圖4所示。

圖4 地圖全屏顯示

鼠標在地圖中點擊其中的該高校的老校區(qū)字體部分，會觸發(fā)事件，打開了另一張頁面，見圖5所示顯示某高校老校區(qū)的畫面。

圖5 某高校老校區(qū)畫面

在這張視圖上我們又能實現一些事件，鼠標移到路上時，路的顏色會改變，這就是鼠標移動導致觸發(fā)事件。

接下來就要在.html.js中定義相關的JavaS－cript事件過程，也就是說.html.js是.html程序的延續(xù)。這樣才能讓JavaScript訪問Silverlight中的對象，并進行控制視頻播放。這樣Silverlight完美的影音播放互動功能就體現出來了，接下來也就是它的動畫功能了，在展示徐州市地圖中某高校的教學樓時，我們就用到了這個技術，在這里設計了2張圖片，用鼠標事件實現動畫效果，在里面定義動畫資源，這樣就可以進行調用，實現鼠標事件的響應。當點擊鼠標的時候，實現地圖的翻轉。

點擊圖片顯示的旋轉動畫效果，如圖6所示。

圖6 點擊圖片旋轉動畫效果

點擊圖片旋轉動畫效果實現的部分代碼如下：

5 結語

經過幾個月的設計和開發(fā)，基于Silverlight的城市地理系統基本開發(fā)完畢。其功能基本符合用戶需求，能夠完成地理信息瀏覽。對于本系統的設計，首先對實際情況認真了解，做出了用戶的需求分析；接著根據分析進行了功能模塊的設計工作；最后，根據對系統所作的分析和設計，完成了基于Silverlight的城市地理系統的開發(fā)。但由于時間倉促、水平有限，系統還存在某些功能不足，有待改進和開發(fā)。

［1］奚江華.圣殿祭司的Silverlight完美入門［M］.北京：電子工業(yè)出版社，2011：79－82.

［2］董大偉.Silverlight權威講座——ASP.NET整合秘技與獨家案例剖析［M］.北京：電子工業(yè)出版社，2010：11－15.

［3］呂高旭.Silverlight（ASP.NET與 AJAX開發(fā)實戰(zhàn)）［M］.北京：清華大學出版社，2011：111－116.

［4］張建飛.XML實用培訓教程［M］.北京：科學出版社，2011：7－19.

［5］馬曉梅.SQL Server 2000實驗指導［M］.北京：清華大學出版社，2009：37－40.

［6］王國輝，牛強，李南南.ASP工程應用與項目實踐［M］.北京：機械工業(yè)出版社，2012：55－78.

［7］周納.ASP動態(tài)網站編程與應用［M］.北京：北京交通大學出版社，2010：88－152.

［8］郝思嘉.ASP.NET課程設計案例精編［M］.北京：中國水利水電出版社，2009：25－73.