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

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

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

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

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

1.1 系統(tǒng)設(shè)計(jì)分析

本城市地理系統(tǒng)采用技術(shù)成熟的Microsoft visual studio 2008作為前臺(tái)開發(fā)工具。后臺(tái)數(shù)據(jù)庫(kù)采用微軟公司的SQL Server 2000數(shù)據(jù)庫(kù)［5］，因?yàn)樗撵`活性、安全性和易用性為數(shù)據(jù)庫(kù)編程提供了良好的條件。

ASP.NET［6］是 NET Framework 的 Web 分支。.NET Framework完全產(chǎn)生于面向?qū)ο蟮念惖膶哟谓Y(jié)構(gòu)，涵蓋Windows操作系統(tǒng)的所有編程問題。Web應(yīng)用程序由頁(yè)面組成，用戶從服務(wù)器請(qǐng)求這些頁(yè)面，然后服務(wù)器對(duì)頁(yè)面進(jìn)行處理，以HTML代碼的形式返回。

微軟Silverlight是一個(gè)跨瀏覽器、跨客戶平臺(tái)的技術(shù)，能夠設(shè)計(jì)、開發(fā)和發(fā)布有多媒體體驗(yàn)與富交互的網(wǎng)絡(luò)交互程序。

因?yàn)镾ilverlight提供了一個(gè)強(qiáng)大的平臺(tái)，能夠開發(fā)出具有專業(yè)圖形、音頻和視頻的 Web應(yīng)用程序，增強(qiáng)了用戶體驗(yàn)，所以Silverlight吸引了設(shè)計(jì)人員和開發(fā)人員的眼球。同時(shí)，Silverlight還提供了強(qiáng)大的工具來提高他們的工作效率。

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

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

1.2 功能分析

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

圖1 系統(tǒng)總體結(jié)構(gòu)示意圖

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

1.2.1 流程分析

城市地理系統(tǒng)的基本流程主要包括：用戶注冊(cè)、登錄本系統(tǒng)進(jìn)入地圖主頁(yè)面，在這張頁(yè)面上可以通過鼠標(biāo)拖動(dòng)、點(diǎn)擊、移入、移出實(shí)現(xiàn)各個(gè)功能。鼠標(biāo)點(diǎn)擊其中的某一地方時(shí)，打開另一張頁(yè)面，在這張頁(yè)面上同樣可以實(shí)現(xiàn)某些功能。

1.2.2 界面分析

（1）設(shè)計(jì)用戶登錄界面。用戶需要登錄系統(tǒng)后才能進(jìn)行相應(yīng)的操作，用戶注冊(cè)，填寫正確的用戶名、密碼、郵件等才能登錄，進(jìn)入系統(tǒng)的頁(yè)面，從而進(jìn)行查看。

（2）設(shè)計(jì)地圖顯示部分界面。設(shè)計(jì)主頁(yè)面，用戶通過主頁(yè)面可以看到一塊區(qū)域的地圖展示，通過Silverlight的程序編寫顯示路、景區(qū)、學(xué)校等。設(shè)計(jì)其子頁(yè)面，同樣是用Silverlight程序?qū)崿F(xiàn)的。

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

硬件平臺(tái)：CPU：P41.8GHz。內(nèi)存：256MB以上。軟件平臺(tái)：操作系統(tǒng)：Windows XP／Windows 2000；數(shù)據(jù)庫(kù)：SQL Server 2000。

2 模塊設(shè)計(jì)

基于Silverlight的城市地理系統(tǒng)頁(yè)面主要包括以下功能模塊：

（1）用戶登錄注冊(cè)模塊：為用戶進(jìn)入頁(yè)面提供一個(gè)入口；

（2）地圖顯示模塊：展示一個(gè)地方的縮放圖，可以通過鼠標(biāo)事件實(shí)現(xiàn)更詳細(xì)的信息顯示。

2.1 登錄模塊的設(shè)計(jì)

用戶要使用本系統(tǒng)，首先必須通過系統(tǒng)的身份認(rèn)證，這個(gè)過程叫做登錄。登錄過程需要完成以下任務(wù)：

（1）根據(jù)用戶名和密碼來判斷是否可以進(jìn)入本系統(tǒng)。

（2）成功登錄的用戶將進(jìn)入系統(tǒng)的主界面。

（3）若還沒有注冊(cè)，則不能登錄該系統(tǒng)，會(huì)出現(xiàn)提示，你可以通過注冊(cè)頁(yè)面進(jìn)行注冊(cè)后再進(jìn)入主界面。系統(tǒng)登陸界面如圖2所示。

圖2 系統(tǒng)登陸界面

2.2 地圖模塊的設(shè)計(jì)

可以通過Express Blend 2進(jìn)行畫圖，接下來利用VS2008編寫一些代碼。呈現(xiàn)一些地圖主要有4張頁(yè)面，其中一個(gè)是主頁(yè)面，其余3個(gè)是它的子頁(yè)面，通過鼠標(biāo)事件來實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)。

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

3 關(guān)鍵技術(shù)

3.1 Silverlight技術(shù)

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

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

我們選擇使用Silverlight來開發(fā)該地理系統(tǒng)，是因?yàn)镾ilverlight有如下優(yōu)點(diǎn)：

（1）輕量級(jí)的瀏覽器 plug－in。

（2）原生的展現(xiàn)層Runtime。

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

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

（5）能夠讓網(wǎng)頁(yè)設(shè)計(jì)師及美工設(shè)計(jì)人員，通過Express Design及Express Blend設(shè)計(jì)inlineXAML形式的Silverlight控件及程序。

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

（7）能夠與現(xiàn)有的HTML技術(shù)、DOM、CSS與ASP.NET網(wǎng)頁(yè)技術(shù)進(jìn)行集成?？膳c目前各種Client Side及Server Side的AJAX技術(shù)進(jìn)行集成，當(dāng)然也包括了ASP.NET AJAX。

3.2 ASP.NET技術(shù)

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

4 系統(tǒng)實(shí)現(xiàn)

4.1 用戶注冊(cè)、登錄

若你已注冊(cè)了，則直接輸入用戶名和密碼進(jìn)入地圖顯示界面，如沒注冊(cè)，則點(diǎn)擊注冊(cè)，進(jìn)入注冊(cè)頁(yè)面 。系統(tǒng)注冊(cè)界面如圖3所示。

圖3 系統(tǒng)注冊(cè)界面

如果用戶注冊(cè)時(shí)輸入了空的用戶名，兩次輸入的密碼不相同，或者輸入了錯(cuò)誤格式的Email，都將給出相應(yīng)的提示，以便讓用戶順利注冊(cè)成功。若注冊(cè)成功，系統(tǒng)會(huì)彈出“注冊(cè)成功”的小提示窗口，關(guān)閉該窗口將進(jìn)入地圖顯示頁(yè)面。

4.2 地圖顯示

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

以徐州市某高校地圖為例，我們來演示利用鼠標(biāo)在地圖上實(shí)現(xiàn)的移動(dòng)、全屏與正常模式顯示、縮放功能。

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

圖4 地圖全屏顯示

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

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

在這張視圖上我們又能實(shí)現(xiàn)一些事件，鼠標(biāo)移到路上時(shí)，路的顏色會(huì)改變，這就是鼠標(biāo)移動(dòng)導(dǎo)致觸發(fā)事件。

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

點(diǎn)擊圖片顯示的旋轉(zhuǎn)動(dòng)畫效果，如圖6所示。

圖6 點(diǎn)擊圖片旋轉(zhuǎn)動(dòng)畫效果

點(diǎn)擊圖片旋轉(zhuǎn)動(dòng)畫效果實(shí)現(xiàn)的部分代碼如下：

5 結(jié)語(yǔ)

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

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

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

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

［4］張建飛.XML實(shí)用培訓(xùn)教程［M］.北京：科學(xué)出版社，2011：7－19.

［5］馬曉梅.SQL Server 2000實(shí)驗(yàn)指導(dǎo)［M］.北京：清華大學(xué)出版社，2009：37－40.

［6］王國(guó)輝，牛強(qiáng)，李南南.ASP工程應(yīng)用與項(xiàng)目實(shí)踐［M］.北京：機(jī)械工業(yè)出版社，2012：55－78.

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

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