劉智濃++張永利

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

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

中圖分類號：TP 311 文獻標(biāo)識碼：A 文章編號：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ù)字校園工程的推進，許多高校建設(shè)了基于Web技術(shù)的虛擬校園，其中校園全景漫游系統(tǒng)成為虛擬校園技術(shù)應(yīng)用的一個熱點。虛擬校園全景漫游技術(shù)就是一種基于圖像的虛擬現(xiàn)實技術(shù)，它以全景圖的方式虛擬出一個現(xiàn)實校園的真實場景，通過Flash、Pano2VR等軟件制作的虛擬場景播放器，采用導(dǎo)航圖和熱點鏈接等方式，在Web瀏覽器上實現(xiàn)虛擬校園多場景之間的漫游，具有很好的交互性和真實感[1]。

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

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

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

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

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

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

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

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

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

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

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

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

on（press）{

loadMovieNum（"gate.swf"，0）； //調(diào)入校園大門的視點漫游動畫文件

}

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

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

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

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

_root.dht.onMouseDown=function（）{

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

_root.dht.onMouseMove=function（）{

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

_root.dht._x=1017；

}

…

}

_root.dht.onMouseUp=function（）{

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

}}

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

_root.dht.stopDrag（）；

_root.dht.onMouseDown=function（）{

_root.dht.stopDrag（）；

}}

4 結(jié)論

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

參考文獻：

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

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

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

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

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

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

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

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

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