杜 佳,張 婷,張 穎,李林娟

(1.蘭州文理學(xué)院 數(shù)字媒體學(xué)院, 甘肅 蘭州 730010;2.蘭州文理學(xué)院 教育學(xué)院, 甘肅 蘭州 730010)

2017年7月18日市政府正式批復(fù)《蘭州樹屏丹霞旅游景區(qū)總體規(guī)劃(2016-2030)》(蘭政函(2017)49號(hào))，蘭州樹屏丹霞景區(qū)有著天然的研學(xué)價(jià)值和豐富的人文資源可挖掘，被有關(guān)專家稱為絲綢之路上的“黃金旅游資源寶庫(kù)”，是目前蘭州市打造的重點(diǎn)文化旅游項(xiàng)目之一，是目前國(guó)內(nèi)已發(fā)現(xiàn)的同類型地貌中分布面積最大的丹霞地，已被列為國(guó)家發(fā)改委PPP項(xiàng)目之一.由于目前蘭州樹屏丹霞景區(qū)正處于開發(fā)建設(shè)中，因而有關(guān)此景區(qū)的旅游應(yīng)用軟件很少，其相關(guān)的資料也只存在于一些網(wǎng)頁(yè)上，為此，有必要將已發(fā)展成為旅游業(yè)第三產(chǎn)業(yè)“中流砥柱”的移動(dòng)應(yīng)用技術(shù)應(yīng)用于蘭州樹屏丹霞景區(qū)，設(shè)計(jì)一個(gè)基于用戶需求的旅游APP，方便用戶使用，提高景區(qū)知名度，推動(dòng)蘭州旅游業(yè)的發(fā)展.

文章在對(duì)客戶需求調(diào)查研究的基礎(chǔ)上，完成了蘭州樹屏丹霞景區(qū)APP的總體架構(gòu)和各功能模塊，介紹了APP開發(fā)過程使用的關(guān)鍵技術(shù).在VR虛擬游模塊的制作中，運(yùn)用了基于圖像的虛擬現(xiàn)實(shí)技術(shù)，構(gòu)建了景區(qū) 720°全景空間，并使用Unity3D引擎將此虛擬展示平臺(tái)嵌入APP 應(yīng)用程序中.用戶可在任何智能移動(dòng)終端調(diào)整視角，放大縮小或上下、前后、左右移動(dòng)位置，體驗(yàn)沉浸式虛擬觀景效果，方便快捷地了解景區(qū)文化，欣賞景區(qū)風(fēng)光，打破以往傳統(tǒng)旅游在時(shí)間空間上的限制.

1 開發(fā)環(huán)境與關(guān)鍵技術(shù)

移動(dòng)應(yīng)用APP的開發(fā)模式有多種，一般來說,較為傳統(tǒng)的開發(fā)模式是原生APP開發(fā)(Native App)，此模式針對(duì)Android、IOS等不同的手機(jī)操作系統(tǒng)采用不同的語(yǔ)言和框架，雖然Native App針對(duì)特定設(shè)備的性能較高，支持高級(jí)圖形功能，在應(yīng)用性能和用戶體驗(yàn)上具有優(yōu)勢(shì)，但是缺乏代碼移植性和優(yōu)化功能，升級(jí)靈活性較低；還有一種是HTML5應(yīng)用開發(fā)，又稱Web App開發(fā)，是一種框架型的APP開發(fā)模式，主要通過HTML5、JavaScript、CSS等技術(shù)構(gòu)建頁(yè)面.雖然H5移動(dòng)應(yīng)用直接訪問設(shè)備硬件的特性較低，在體驗(yàn)和性能上有一定的局限性，但優(yōu)勢(shì)是其編寫的代碼可以同時(shí)在Android、IOS、Windows上運(yùn)行，維護(hù)容易，跨平臺(tái)開發(fā)，更新升級(jí)非常靈活[1].考慮到低成本、快速迭代、易推廣并且易于3D展示等因素，蘭州樹屏丹霞景區(qū)APP采用了前端基于HTML5進(jìn)行開發(fā)，后端應(yīng)用Java Web技術(shù)實(shí)現(xiàn)功能的前后端分離的開發(fā)模式.APP的開發(fā)中重點(diǎn)還用到了VR全景制作技術(shù)Krpano來實(shí)現(xiàn)景區(qū)虛擬游模塊.

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

通過對(duì)目標(biāo)用戶進(jìn)行問卷調(diào)查，掌握目標(biāo)用戶對(duì)蘭州樹屏丹霞景區(qū)的了解程度、了解渠道、出游目的以及對(duì)景區(qū)旅游APP的期望和使用習(xí)慣等，剖析與挖掘游客的需求.在對(duì)游客需求進(jìn)行分析后，深入景區(qū)進(jìn)行了實(shí)地考察調(diào)研，重點(diǎn)考察了旅游路線、景區(qū)文化、周邊景點(diǎn)、美食住宿、配套設(shè)施等信息，確保信息無誤后，根據(jù)調(diào)查結(jié)果設(shè)計(jì)蘭州樹屏丹霞景區(qū)應(yīng)用的功能模塊.

根據(jù)調(diào)查結(jié)果，結(jié)合蘭州樹屏丹霞的突出優(yōu)勢(shì),整合其天然的地質(zhì)地貌、豐富的人文民俗等特點(diǎn)，設(shè)計(jì)出以景區(qū)展示為主、其他功能為輔的景區(qū)APP五大模塊：主界面設(shè)計(jì)、全部景點(diǎn)、VR虛擬游，景區(qū)資訊和其他菜單(如圖1所示).

圖1 蘭州樹屏丹霞景區(qū)APP的功能構(gòu)架圖

為使界面操作簡(jiǎn)單，并充分體現(xiàn)軟件的定位特點(diǎn)，主界面設(shè)計(jì)了景區(qū)輪播圖、景區(qū)簡(jiǎn)介、主要景點(diǎn)、周邊景點(diǎn)、民俗文化、精選體驗(yàn)項(xiàng)目等與景區(qū)展示密切相關(guān)的模塊.用戶可通過首頁(yè)了解景區(qū)概況、周邊景點(diǎn)和游玩項(xiàng)目等基本信息.全部景點(diǎn)的設(shè)計(jì)主要采用圖片、文字信息和語(yǔ)音導(dǎo)游相結(jié)合的方式.景區(qū)講解能夠?qū)崿F(xiàn)語(yǔ)音導(dǎo)游，幫助游客了解景區(qū)信息，從而免去游客在旅游過程中觀看景區(qū)文字介紹的不便.景區(qū)資訊包括游玩路線、住宿美食、通知公告、大型活動(dòng)、咨詢電話等服務(wù)信息.主界面的右上角還設(shè)計(jì)了其它菜單，對(duì)應(yīng)的子模塊為：地質(zhì)地貌、科普研學(xué)、生態(tài)景觀，以展現(xiàn)景區(qū)豐富的生態(tài)景觀和明顯的研學(xué)價(jià)值.APP首頁(yè)如圖2所示.

圖2 蘭州樹屏丹霞景區(qū)APP的首頁(yè)圖

3 功能設(shè)計(jì)與實(shí)現(xiàn)

3.1 App實(shí)現(xiàn)的關(guān)鍵技術(shù)

蘭州樹屏丹霞景區(qū)前端基于HTML5，采用DCloud的Hbuilder Web開發(fā)集成環(huán)境，以MUI為前端框架進(jìn)行客戶端開發(fā).后端采用JavaBean

組件以及MVC(Model-View-Controller)框架模式來實(shí)現(xiàn)APP的全部服務(wù)功能.MVC是一種軟件架構(gòu)模式，把軟件系統(tǒng)分為模型、視圖和控制器三大核心模塊[2].此模式將應(yīng)用數(shù)據(jù)和應(yīng)用邏輯分離，降低了耦合度，使得開發(fā)更高效.編程語(yǔ)言采用PHP.服務(wù)器采用Tomcat 8.0.系統(tǒng)服務(wù)器端采用Windows Server 2012 R2平臺(tái).在數(shù)據(jù)庫(kù)方面，考慮到體積小、查詢和更新速度快、成本低等因素，選擇了中小型網(wǎng)站開發(fā)常用的MySQL數(shù)據(jù)庫(kù)，使得用戶具有較好的體驗(yàn).連接數(shù)據(jù)庫(kù)時(shí)，在JavaBean組件中的Users類和Message類中調(diào)用DButil工具類，實(shí)現(xiàn)數(shù)據(jù)的存取.

景區(qū)界面的實(shí)現(xiàn)主要使用HTML5、JavaScript、CSS、PS等技術(shù).界面的靜態(tài)布局使用HTML5+CSS3完成，其中，HTML5完成界面的內(nèi)容展示，CSS3進(jìn)行界面的風(fēng)格定位及頁(yè)面美化.界面的輪播圖、選項(xiàng)卡等動(dòng)態(tài)功能使用JavaScript來實(shí)現(xiàn).

通過前端后端的設(shè)計(jì)技術(shù)完成APP的整體制作后，可通過安裝運(yùn)行.使用此開發(fā)模式，APP端與PC端網(wǎng)站可進(jìn)行接口復(fù)用，能夠通過網(wǎng)站集成到微信小程序、微信公眾號(hào)等應(yīng)用中，使得景區(qū)的宣傳方式更為豐富多樣、便捷高效.

3.2 VR虛擬游模塊的實(shí)現(xiàn)

VR虛擬游模塊是蘭州樹屏丹霞景區(qū)的特色模塊，以便用戶足不出戶就能身臨其境般暢游樹屏丹霞各景點(diǎn)，該模塊主要包括蘭州樹屏丹霞景區(qū)絲路霞光、絲路雄鷹、九色丹青、丹秀映天、丹頂攬勝、翠峰瀾天、沙井部落、丹霞棧道等景點(diǎn)的720°全景展示.

對(duì)于景區(qū)的VR制作一般有兩種方式：一種是通過三維建模軟件構(gòu)建三維場(chǎng)景模型，此方法對(duì)開發(fā)人員要求高，工作量大、耗時(shí)長(zhǎng)、模型生硬造成視覺真實(shí)感不強(qiáng)；另一種是基于圖像的VR全景拍攝方式，這是一種低成本、高效率的場(chǎng)景構(gòu)建方式.由于制作方式基于真實(shí)拍攝的圖片，所以能夠真實(shí)可信地還原景區(qū)場(chǎng)景，為用戶提供身臨其境的沉浸感[3],非常適合景區(qū)虛擬展示等應(yīng)用.蘭州樹屏丹霞景區(qū)APP中的VR虛擬游模塊運(yùn)用了基于圖像的全景制作方式，其實(shí)現(xiàn)過程如下：

(1)利用相機(jī)+全景云臺(tái)的拍攝方法，對(duì)蘭州樹屏丹霞景區(qū)進(jìn)行拍照采集.拍攝時(shí)，全景云臺(tái)分別調(diào)至斜向上45°、水平以及斜向下45°三個(gè)方向，形成三個(gè)水平層級(jí)，每個(gè)水平面均以60°為單位進(jìn)行360°旋轉(zhuǎn)拍攝，這樣，每個(gè)場(chǎng)景得到18張具有重合區(qū)域的圖片.

(2)將上述從不同角度、不同方位采集到的圖片運(yùn)用PTGui軟件進(jìn)行拼接及HDR融合處理，形成全景圖；利用Photoshop軟件進(jìn)行補(bǔ)天、補(bǔ)地等美化操作并進(jìn)行色階、飽和度等調(diào)整工作.

(3)將處理好的圖片利用在線VR全景制作技術(shù)Krpano進(jìn)行全景圖的合成，添加熱點(diǎn)鏈接，生成全景漫游.Krpano是目前最流行的全景引擎.它基于Flash的內(nèi)核,同時(shí)提供了HTML5的解決方案[4].Krpano提供兩種類型的HotSpot熱點(diǎn)元素，將HotSpot標(biāo)簽添加到全景圖的xml文件中便可實(shí)現(xiàn)熱點(diǎn)的添加，單擊熱點(diǎn)鏈接會(huì)觸發(fā)onclick事件，加載其他場(chǎng)景.通過熱點(diǎn)鏈接將多張全景圖進(jìn)行連接，完成從一個(gè)場(chǎng)景鏈接到其他場(chǎng)景的漫游效果.

(4)將制作好的蘭州樹屏丹霞景區(qū)全景漫游內(nèi)容嵌入到APP系統(tǒng)的VR虛擬游模塊當(dāng)中，實(shí)現(xiàn)景點(diǎn)720°全方位立體的虛擬展示效果.景區(qū)VR界面如圖3所示.

圖3 VR虛擬游界面圖

4 測(cè)試評(píng)估

文獻(xiàn)[5]指出“通過用戶進(jìn)行系統(tǒng)測(cè)試來進(jìn)一步獲取用戶的直接反饋數(shù)據(jù)，根據(jù)用戶的反饋數(shù)據(jù)不斷優(yōu)化產(chǎn)品性能，提高用戶體驗(yàn)和可用性水平”，因此，蘭州樹屏丹霞景區(qū)APP應(yīng)用開發(fā)完成后，選擇了旅游類手機(jī)APP使用經(jīng)驗(yàn)豐富的青年男女作為測(cè)試對(duì)象，通過不同的手機(jī)品牌進(jìn)行了系統(tǒng)的安裝、卸載測(cè)試；針對(duì)不同的屏幕分辨率進(jìn)行了兼容性、圖形、內(nèi)容、翻頁(yè)、滑動(dòng)等功能測(cè)試和手勢(shì)、登錄等基本操作；通過填寫調(diào)查問卷的方法反饋在測(cè)試使用中發(fā)現(xiàn)的問題及改進(jìn)意見，并進(jìn)行了修改更新.經(jīng)過測(cè)試，該系統(tǒng)界面良好，滿足各模塊要求的基本功能.

5 結(jié)語(yǔ)

蘭州樹屏丹霞景區(qū)APP整合了景區(qū)的優(yōu)質(zhì)資源，在滿足APP基本服務(wù)的基礎(chǔ)上，特別設(shè)計(jì)了“全景虛擬游”“民俗文化”等模塊，不但能夠幫助游客合理的安排行程、規(guī)劃旅游路線，而且能夠讓游客提前直觀、沉浸式體驗(yàn)絲路霞光、絲路雄鷹、九色丹青等景點(diǎn)，了解當(dāng)?shù)氐拿袼孜幕椭苓吀艣r.建設(shè)與開發(fā)蘭州樹屏丹霞景區(qū)旅游APP，一方面用傳統(tǒng)旅游與科學(xué)技術(shù)相結(jié)合的方式來提升景區(qū)形象和知名度，有效為蘭州市的旅游宣傳貢獻(xiàn)力量，推動(dòng)我市的經(jīng)濟(jì)發(fā)展.另一方面可將信息技術(shù)與旅游景區(qū)規(guī)劃管理工作有機(jī)結(jié)合，更科學(xué)地保護(hù)旅游資源，為景區(qū)開發(fā)管理所需的科學(xué)決策提供參考依據(jù).