虛擬校園全景漫游導(dǎo)航圖的設(shè)計(jì)

劉智濃++張永利

摘要：在虛擬校園全景漫游系統(tǒng)的設(shè)計(jì)中，導(dǎo)航圖的作用是實(shí)現(xiàn)虛擬場(chǎng)景的人機(jī)交互和位置跳轉(zhuǎn)。論文以應(yīng)用Flash技術(shù)設(shè)計(jì)虛擬校園漫游導(dǎo)航圖為目標(biāo)，研究了制作矢量導(dǎo)航圖和實(shí)現(xiàn)漫游導(dǎo)航控制的方法。實(shí)例應(yīng)用表明，漫游導(dǎo)覽性好，交互操作簡(jiǎn)單。

關(guān)鍵詞：虛擬校園；全景漫游系統(tǒng)；導(dǎo)航圖

中圖分類(lèi)號(hào)：TP 311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）33-0133-02

The Design of Virtual Campus Panoramic Walkthrough Navigation Chart

LIU Zhi-nong ZHANG Yong-li

（ Naval Flight Academy， Huludao 125001， China）

Abstract：In the design of virtual campus panoramic walkthrough system， the navigation chart makes human-computer interaction and position jump come true. Taking aim at the design of virtual campus panoramic walkthrough navigation chart with flash technology， the essay also mentions some methods of making vector navigation chart and how to control the panoramic walkthrough system. Examples show that the system plays a good role of guiding and the interactive operation is simple to use.

Key words： virtual campus； panoramic walkthrough system； navigation chart

1 概述

隨著數(shù)字校園工程的推進(jìn)，許多高校建設(shè)了基于Web技術(shù)的虛擬校園，其中校園全景漫游系統(tǒng)成為虛擬校園技術(shù)應(yīng)用的一個(gè)熱點(diǎn)。虛擬校園全景漫游技術(shù)就是一種基于圖像的虛擬現(xiàn)實(shí)技術(shù)，它以全景圖的方式虛擬出一個(gè)現(xiàn)實(shí)校園的真實(shí)場(chǎng)景，通過(guò)Flash、Pano2VR等軟件制作的虛擬場(chǎng)景播放器，采用導(dǎo)航圖和熱點(diǎn)鏈接等方式，在Web瀏覽器上實(shí)現(xiàn)虛擬校園多場(chǎng)景之間的漫游，具有很好的交互性和真實(shí)感[1]。

對(duì)于一個(gè)功能完善的漫游系統(tǒng)來(lái)說(shuō)，應(yīng)該為用戶提供良好的漫游導(dǎo)覽功能，從而實(shí)現(xiàn)對(duì)多個(gè)漫游場(chǎng)景的人機(jī)交互和位置跳轉(zhuǎn)。基于校園電子地圖制作漫游導(dǎo)航圖是目前虛擬校園全景漫游系統(tǒng)設(shè)計(jì)中普遍采用的導(dǎo)航機(jī)制。

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

Web虛擬校園技術(shù)主要有三種：一是Flash技術(shù)，二是地圖技術(shù)，三是插件技術(shù)，我國(guó)高校目前實(shí)現(xiàn)虛擬校園廣泛采用還是Flash技術(shù)。[2]。Flash是美國(guó)Macromedia公司推出的產(chǎn)品，支持矢量圖形和流媒體技術(shù)，特別是可通過(guò)內(nèi)嵌的腳本語(yǔ)言ActionScript編程，設(shè)計(jì)出交互性較強(qiáng)的各種網(wǎng)絡(luò)應(yīng)用程序，現(xiàn)已成為交互式矢量動(dòng)畫(huà)的標(biāo)準(zhǔn)。

本虛擬校園全景漫游系統(tǒng)的設(shè)計(jì)采用的是Flash技術(shù)。系統(tǒng)的主要功能模塊有兩個(gè)，一是虛擬場(chǎng)景模塊，將校園內(nèi)的代表景觀用全景圖的方式在網(wǎng)絡(luò)上展示，其中的關(guān)鍵技術(shù)是全景圖像的采集、拼接和融合；二是漫游導(dǎo)航模塊，不僅要實(shí)現(xiàn)全景視點(diǎn)本身的控制，即全景窗口本身的移動(dòng)、旋轉(zhuǎn)、縮放等交互控制，還要實(shí)現(xiàn)對(duì)多個(gè)場(chǎng)景的漫游切換控制，即為用戶提供良好的漫游導(dǎo)航交互。

本系統(tǒng)導(dǎo)航功能模塊的設(shè)計(jì)思路是：基于校園電子地圖，利用Flash的強(qiáng)大繪畫(huà)功能，繪制矢量導(dǎo)航地圖，并通過(guò)ActionScript語(yǔ)言編程實(shí)現(xiàn)鏈接熱點(diǎn)設(shè)定、矢量地圖移動(dòng)控制等功能，對(duì)虛擬校園漫游場(chǎng)景進(jìn)行合理地編輯和組織，實(shí)現(xiàn)二維電子地圖和三維虛擬現(xiàn)實(shí)場(chǎng)景的交互式瀏覽。系統(tǒng)的導(dǎo)航操作是通過(guò)在導(dǎo)航窗口內(nèi)拖動(dòng)校園電子圖，并選擇相應(yīng)漫游熱點(diǎn)的方式來(lái)切換漫游場(chǎng)景的，瀏覽界面如圖1所示。

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

3.1制作矢量導(dǎo)航圖

本系統(tǒng)的漫游導(dǎo)航圖采用矢量化的校園電子地圖。一般制作矢量化地圖的步驟是：首先采用掃描、拍攝、網(wǎng)絡(luò)下載或?qū)Ｓ秒娮拥貓D導(dǎo)出等方法獲得位圖格式的地圖文件，然后將位圖格式的地圖矢量化。在Flash中實(shí)現(xiàn)地圖的矢量化方法有兩種，一種是利用Flash提供的強(qiáng)大繪圖功能，直接繪制矢量地圖；一種是利用Flash自身的位圖轉(zhuǎn)換功能，將位圖格式的地圖進(jìn)行矢量化處理。第一種方法雖較費(fèi)時(shí)，但效果較好，第二種方法所需時(shí)間較短，但矢量效果較差[3]。

本導(dǎo)航圖采用第一種方法繪制矢量圖。首先通過(guò)Google地圖獲得學(xué)院的電子地圖，并導(dǎo)出位圖格式的文件，將該位圖作為模板地圖導(dǎo)入到Flash中，放入一個(gè)單獨(dú)的圖層，并根據(jù)要發(fā)布的導(dǎo)航圖分辨率調(diào)整好模版圖的尺寸。然后，在模板地圖圖層之上新建一個(gè)圖層作為矢量地圖圖層，利用Flash的各種鼠繪工具，在模板地圖上描制校園內(nèi)各樓宇、道路、場(chǎng)地等設(shè)施的二維矢量圖。最后對(duì)矢量圖進(jìn)行適當(dāng)?shù)拿阑蜐?rùn)色，最終效果如圖1所示。

3.2導(dǎo)航窗口及漫游熱點(diǎn)設(shè)計(jì)

由于導(dǎo)航圖較大，故本系統(tǒng)采用Flash的遮罩特效，設(shè)置導(dǎo)航窗口來(lái)實(shí)現(xiàn)導(dǎo)航圖的“鷹眼”顯示效果。具體實(shí)現(xiàn)是首先建立一個(gè)“導(dǎo)航圖”圖層，將導(dǎo)航圖作為影片剪輯元件導(dǎo)入該圖層，并以“dht”作為實(shí)例名。然后在“導(dǎo)航圖”圖層上建立一個(gè)“導(dǎo)航窗口”遮罩圖層，在該圖層中按導(dǎo)航窗口大小，繪制一個(gè)填充矩形，放在導(dǎo)航圖的相應(yīng)位置即可。

導(dǎo)航圖中的漫游熱點(diǎn)設(shè)定是通過(guò)在導(dǎo)航地圖相應(yīng)位置點(diǎn)設(shè)置一個(gè)圖形按鈕來(lái)實(shí)現(xiàn)的。當(dāng)單擊相應(yīng)按鈕時(shí)，即可調(diào)入對(duì)應(yīng)位置的視點(diǎn)漫游動(dòng)畫(huà)文件。以校園大門(mén)外的熱點(diǎn)按鈕為例，其Action代碼為：

on（press）{

loadMovieNum（"gate.swf"，0）； //調(diào)入校園大門(mén)的視點(diǎn)漫游動(dòng)畫(huà)文件

}

需要強(qiáng)調(diào)一點(diǎn)的是，各漫游熱點(diǎn)的按鈕要在影片剪輯dht上設(shè)定，即各漫游熱點(diǎn)按鈕和導(dǎo)航圖要制作成一個(gè)影片剪輯實(shí)例。

3.3導(dǎo)航圖的移動(dòng)

在漫游瀏覽時(shí)，當(dāng)鼠標(biāo)移入導(dǎo)航窗口，按下左鍵不放并拖動(dòng)時(shí)，即可實(shí)現(xiàn)導(dǎo)航圖跟隨鼠標(biāo)移動(dòng)的效果。實(shí)現(xiàn)方法是：建立一個(gè)控制圖層，放入一個(gè)矩形的按鈕元件，該按鈕元件的大小和形狀要與導(dǎo)航窗口完全一致，并設(shè)置該按鈕的Alpha值為“0”，即設(shè)置該按鈕為“隱形”按鈕，編寫(xiě)鼠標(biāo)在按鈕上滑入、滑出等事件的Action代碼，即可實(shí)現(xiàn)導(dǎo)航圖的移動(dòng)控制。在移動(dòng)導(dǎo)航圖時(shí)，當(dāng)移到導(dǎo)航圖的邊界時(shí)，應(yīng)通過(guò)導(dǎo)航圖坐標(biāo)計(jì)算來(lái)控制導(dǎo)航圖的繼續(xù)移動(dòng)。該按鈕的部分代碼如下：

on（rollOver）{ //鼠標(biāo)滑到按鈕上時(shí)，即進(jìn)入導(dǎo)航窗口時(shí)

_root.dht.onMouseDown=function（）{

_root.dht.startDrag（）；} //當(dāng)在導(dǎo)航圖dht上按下鼠標(biāo)鍵時(shí)，dht隨鼠標(biāo)一起移動(dòng)

_root.dht.onMouseMove=function（）{

if（_root.dht._x>=1017）{ //導(dǎo)航圖移動(dòng)越界時(shí)，橫坐標(biāo)調(diào)整

_root.dht._x=1017；

}

…

}

_root.dht.onMouseUp=function（）{

_root.dht.stopDrag（）； //當(dāng)在導(dǎo)航圖dht上釋放鼠標(biāo)鍵時(shí)，dht停止移動(dòng)

}}

on（rollOut）{ //鼠標(biāo)滑出導(dǎo)航窗口時(shí)，dht停止移動(dòng)

_root.dht.stopDrag（）；

_root.dht.onMouseDown=function（）{

_root.dht.stopDrag（）；

}}

4 結(jié)論

本文采用Flash技術(shù)設(shè)計(jì)的漫游導(dǎo)航圖具有實(shí)時(shí)性好、交互性強(qiáng)的特點(diǎn)，較好地實(shí)現(xiàn)了電子地圖和三維虛擬場(chǎng)景的交互式瀏覽控制，為學(xué)院的虛擬校園全景漫游系統(tǒng)提供了良好的導(dǎo)航功能，實(shí)際應(yīng)用反饋，系統(tǒng)運(yùn)行穩(wěn)定且操作簡(jiǎn)單。

參考文獻(xiàn)：

[1] 劉思鳳，賈金原. 基于 FLASH的湛江虛擬旅游全景漫游與導(dǎo)航系統(tǒng) [J]. 廣東海洋大學(xué)學(xué)報(bào)， 2009（6）.

[2] 張更路，王爽，張勝發(fā)，等. Flash技術(shù)在虛擬校園中的應(yīng)用[J]. 電腦知識(shí)與技術(shù)， 2012（10）.

[3] 何正國(guó)，陳錦昌，陳亮.基于Flash的網(wǎng)絡(luò)電子地圖[J]. 工程圖學(xué)學(xué)報(bào)， 2003（3）.

[4] 王緒宛，雷蕾. 基于三維全景圖的校園漫游系統(tǒng)[J]. 微型電腦應(yīng)用， 2013（10）.

[6] 馮建平，吳麗華. 基于全景圖像的三維全景漫游系統(tǒng)的構(gòu)建[J]. 計(jì)算機(jī)與數(shù)字工程， 2013（1）.

[7] 武剛，余武. 虛擬校園三維全景漫游系統(tǒng)探究與實(shí)現(xiàn)[J]. 現(xiàn)代教育技術(shù)， 2013（5）.

[8] 陳 梅，王健. Flash環(huán)境下虛擬校園瀏覽系統(tǒng)的設(shè)計(jì)[J].

[9] 梁廣榮，黎紅. 基于百度地圖API 的虛擬校園實(shí)現(xiàn)[J].廊坊師范學(xué)院學(xué)報(bào)：自然科學(xué)版，2012 （6）.

[10] 宋正國(guó). 實(shí)景虛擬校園系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 軟件導(dǎo)刊，2009（11）.