陳燕紅,郭 斌
(新疆農(nóng)業(yè)大學(xué) 計(jì)算機(jī)與信息工程學(xué)院,新疆 烏魯木齊 830052)
當(dāng)前,旅游業(yè)已成為一種非常熱門而且很有發(fā)展前景的產(chǎn)業(yè),然而受限于時(shí)空、財(cái)力甚至傳染病疫情等客觀因素影響,人們往往無法前往向往已久的特色景點(diǎn)。而應(yīng)用全景展示、虛擬現(xiàn)實(shí)技術(shù)[1],通過模擬實(shí)景,構(gòu)建一種虛擬旅游場景可以有效解決該問題[2-3]。虛擬旅游已成為有效拓展旅游產(chǎn)業(yè)的重要手段,發(fā)展虛擬旅游產(chǎn)業(yè)在國內(nèi)和國際上都具有廣闊空間。
文中從全景模型的角度出發(fā),結(jié)合交互設(shè)計(jì)和Android全景技術(shù)[4-5],研究基于全景地圖構(gòu)建與特色旅游景點(diǎn)精確標(biāo)注、地圖全景導(dǎo)航嵌入、多類外部導(dǎo)航嵌入以及景點(diǎn)多維度展示的Android全景旅游向?qū)шP(guān)鍵技術(shù)。文章詳細(xì)闡述了基于相關(guān)技術(shù)實(shí)現(xiàn)的新疆烏魯木齊特色景點(diǎn)全景向?qū)到y(tǒng)。該系統(tǒng)有效增強(qiáng)了游客與景區(qū)間的動(dòng)態(tài)交互,為用戶提供足不出戶便可享受身臨其境的特色景點(diǎn)觀光旅游體驗(yàn),有利于促進(jìn)特色景點(diǎn)的對外宣傳和業(yè)務(wù)拓展。同時(shí),系統(tǒng)利用虛擬全景技術(shù)為游客提供虛擬全景旅游[6],有助于減少旅游出行人次,一定程度上減少了碳排放和景區(qū)污染,從而開啟生態(tài)保護(hù)、綠色旅游[7]的新模式。
隨著現(xiàn)代虛擬旅游中全景技術(shù)的廣泛應(yīng)用,越來越多的旅游景區(qū)開始計(jì)劃應(yīng)用這種互動(dòng)性更強(qiáng)、展示更立體的手段來宣傳自己的特色景點(diǎn)。Android全景旅游向?qū)到y(tǒng)具有傳統(tǒng)宣傳和導(dǎo)游方式所沒有的優(yōu)勢:
(1)使用方便快捷。利用Android手機(jī)就可以隨意選擇景區(qū),全方位地進(jìn)行景點(diǎn)的360度觀賞,并可以進(jìn)行大小上下、前后左右調(diào)節(jié),使得游客體驗(yàn)到在特色美景中身臨其境的奇妙感受。
(2)給予身臨其境的觀光體驗(yàn)。Android全景技術(shù)配合景點(diǎn)精確標(biāo)注全景地圖、全景導(dǎo)航嵌入和特色景點(diǎn)多媒體展示,立體完整地保留了特色景點(diǎn)場景的真實(shí)性,為用戶全方位地展示了景點(diǎn)及其沿途的風(fēng)景。
(3)提供強(qiáng)大的功能。Android全景旅游向?qū)到y(tǒng)提供多層次人機(jī)交互和多維度全景導(dǎo)航,同時(shí)配合文字、圖像、聲音、動(dòng)畫等多媒體元素,打造全新的虛擬旅游手段。
全景(panorama),也稱為三維實(shí)景,作為一種新興的富媒體技術(shù),其“全方位展示球型范圍、360度環(huán)視、保留場景真實(shí)性”特性是與傳統(tǒng)媒體最大的區(qū)別,給觀者帶來美好的真實(shí)現(xiàn)場感。全景主要分為兩類:三維實(shí)景和虛擬實(shí)景[8-9]。3D實(shí)景主要利用街景車或單反相機(jī)拍攝照片,經(jīng)過特殊的拼合技術(shù)處理后[10],利用展示技術(shù)為觀者提供在立體場景中身臨其境的體驗(yàn);虛擬實(shí)景則是利用信息技術(shù)模擬產(chǎn)生三維場景,可以全方位地觀察三維空間中的事物[11]。
OpenGL ES是OpenGL三維圖形API的子集,主要針對手機(jī)、PDA等嵌入式設(shè)備設(shè)計(jì)。隨著設(shè)備硬件水平以及Android系統(tǒng)版本的提升,OpenGL ES最新版本支持自定義渲染管線,這使得渲染的三維場景更加真實(shí)[12],為用戶提供了全新體驗(yàn)。關(guān)鍵步驟為:
(1)載入全景圖,核心代碼為:
setContentView(R.layout.activity_main);//初始化全景控件
mGLPanorama=(GLPanorama) findViewById(R.id.mGLPanorama);
mGLPanorama.setGLPanorama(R.drawable.imggugong);//載入全景圖
(2)繪制全景圖展示球體:OpenGL ES中的立體圖像是通過多個(gè)小三角形拼接而成,球面上的每一個(gè)點(diǎn)都要滿足球的極坐標(biāo)方程[13];
(3)注冊陀螺儀傳感器:為了實(shí)現(xiàn)球隨著手機(jī)轉(zhuǎn)動(dòng)而轉(zhuǎn)動(dòng),需要使用陀螺儀快速、精準(zhǔn)地對設(shè)備旋轉(zhuǎn)角度進(jìn)行檢測;加入手勢操控,實(shí)現(xiàn)拖動(dòng)圖片轉(zhuǎn)動(dòng);
(4)獲取傳感器數(shù)據(jù):從x、y、z軸的正向位置觀看處于原始方位的設(shè)備,如果設(shè)備逆時(shí)針旋轉(zhuǎn),將會收到正值;否則,為負(fù)值,得到兩次檢測到手機(jī)旋轉(zhuǎn)的時(shí)間差(納秒),并將其轉(zhuǎn)化為秒將手機(jī)在各個(gè)軸上的旋轉(zhuǎn)角度相加,即可得到當(dāng)前位置相對于初始位置的旋轉(zhuǎn)弧度,將弧度轉(zhuǎn)化為角度;
(5)加入手勢操控,實(shí)現(xiàn)拖動(dòng)圖片轉(zhuǎn)動(dòng);加入指示器,并為指示器加入動(dòng)畫從而可以跟隨全景圖一起轉(zhuǎn)。單擊指示器時(shí),獲取當(dāng)前旋轉(zhuǎn)的角度,逆向旋轉(zhuǎn),實(shí)現(xiàn)慢慢還原的過渡效果。
Google提供的工具包gvr-android-sdk可以實(shí)現(xiàn)在手機(jī)APP中嵌入360度全景圖片、視頻文件,從而通過增加動(dòng)態(tài)互動(dòng)來提升用戶體驗(yàn)。它利用計(jì)算機(jī)生成模擬環(huán)境,實(shí)現(xiàn)多源信息交互[14]和融合的三維動(dòng)態(tài)場景和實(shí)體行為的系統(tǒng)仿真[15],為用戶提供沉浸在實(shí)景中的體驗(yàn)。加載全景圖、全景視頻:
panoOptions=new Options(); // 加載全景圖
panoOptions.inputType=Options.TYPE_STEREO_OVER_UNDER; // 圖像類型為立體圖像
istr=assetManager.open("andes.jpg");
panoWidgetView.loadImageFromBitmap(BitmapFactory.decodeStream(istr), panoOptions);
VrVideoView.Options options=new VrVideoView.Options(); // 加載全景視頻
options.inputType=VrVideoView.Options.TYPE_STEREO_OVER_UNDER; // 視頻類型為立體視頻
騰訊地圖JavaScript API可用于在應(yīng)用程序中實(shí)時(shí)載入強(qiáng)交互性的地圖和街景,并提供地圖操作、標(biāo)注、出行規(guī)劃、街景等功能豐富的接口[16]。街景是通過街景車在道路上實(shí)時(shí)拍攝的360度全景圖像,為用戶呈現(xiàn)一種走在街道上觀看的感覺。街景由多個(gè)場景組成,每個(gè)場景都有一個(gè)唯一標(biāo)識,稱為“PanoId”。加載騰訊地圖、街景的關(guān)鍵步驟如下:
(1)在頁面的前端使用script標(biāo)簽加載API服務(wù);
(2)在移動(dòng)端加載騰訊地圖,并載入騰訊地圖街景;
(3)載入騰訊地圖街景:
pano_container=document.getElementById('PanoCtn'); //街景容器
pano = new qq.maps.Panorama(pano_container, {
pano: '10011501120802180635300', //場景ID
pov:{ //視角
heading:1, //偏航角
pitch:0 //俯仰角
},
zoom:1 //縮放
})
(4)顯示街景道路覆蓋范圍的地圖疊加層:
//創(chuàng)建地圖
var map = new qq.maps.Map(document.getElementById("container"), {
center: new qq.maps.LatLng(39.916527, 116.397128),
zoom: 10
});
var panolayer = new qq.maps.PanoramaLayer(); // 添加街景路網(wǎng)圖層
panolayer.setMap(map); // 設(shè)置街景路網(wǎng)層容器
文中基于Android全景技術(shù)實(shí)現(xiàn)了新疆烏魯木齊特色景點(diǎn)全景向?qū)到y(tǒng)。系統(tǒng)主要功能包括:烏魯木齊特色景點(diǎn)地圖加載、景點(diǎn)多維度展示、全景導(dǎo)航、系統(tǒng)內(nèi)容導(dǎo)航、外部導(dǎo)航、后臺信息管理等。下面主要介紹系統(tǒng)實(shí)現(xiàn)的技術(shù)方案、效果分析以及關(guān)鍵模塊。
烏魯木齊特色景點(diǎn)全景向?qū)到y(tǒng)主要分為地圖加載、多維度景點(diǎn)展示、多類導(dǎo)航和后臺系統(tǒng)管理四個(gè)部分。系統(tǒng)使用的主要開發(fā)工具和技術(shù)有Android全景技術(shù)、騰訊地圖Javascript API、高德地圖SDK、百度地圖SDK、科大訊飛TTS、Python Django以及SQLLite后臺數(shù)據(jù)庫。具體技術(shù)方案如下:
(1)實(shí)現(xiàn)Android地圖加載,并精確標(biāo)注特色旅游景點(diǎn);
(2)Android導(dǎo)航嵌入技術(shù)是最重要的技術(shù)環(huán)節(jié)。本系統(tǒng)涉及到地圖全景導(dǎo)航嵌入、內(nèi)部導(dǎo)航、(騰訊、高德、百度)外部導(dǎo)航三種導(dǎo)航嵌入;
(3)特色景點(diǎn)多維度展示;
(4)地圖信息和景點(diǎn)信息的后臺管理;
(5)對系統(tǒng)進(jìn)行調(diào)試,并完善系統(tǒng)的設(shè)計(jì)。
Android地圖加載及特色旅游景點(diǎn)的精確標(biāo)注[17]是構(gòu)建系統(tǒng)的重要基礎(chǔ)。利用高德地圖SDK,在服務(wù)器端獲取初始位置經(jīng)緯度完成系統(tǒng)啟動(dòng)和地圖加載,并利用經(jīng)緯度進(jìn)行特色旅游景點(diǎn)在地圖中的精確標(biāo)注,見圖1。核心程序代碼如下:
圖1 系統(tǒng)啟動(dòng)并加載烏魯木齊特色景點(diǎn)地圖
/* 1、系統(tǒng)啟動(dòng)并加載地圖 */
aMap = mMapView.getMap(); // 獲得地圖對象
LatLng latLng = new LatLng(43.457701,87.2114828); // 構(gòu)造初始位置
aMap.moveCamera(CameraUpdateFactory.newLatLngZoom(latLng,10));
setMapAttribute(); // 設(shè)置地圖屬性
/* 2、特色景點(diǎn)的精確標(biāo)注 */
LatLng latLng = new LatLng(Double.parseDouble(jsonObject.get("local_x").toString()),
Double.parseDouble(jsonObject.get("local_y").toString())); // 獲取經(jīng)緯度
MarkerOptions markerOption = new MarkerOptions();
markerOption.icon(BitmapDescriptorFactory.fromBitmap(
BitmapFactory.decodeResource(getResources(), R.drawable.local))); // 自定義標(biāo)記點(diǎn)圖標(biāo)
本系統(tǒng)集成了三種導(dǎo)航嵌入,分別是全景導(dǎo)航、內(nèi)部導(dǎo)航、“騰訊、高德、百度”外部導(dǎo)航。系統(tǒng)將三種導(dǎo)航集成在特色景點(diǎn)展示頁面右下角菜單中。
選擇“全景”,會打開特定景點(diǎn)的全景導(dǎo)航(見圖2)。在該頁面中,用戶可以隨意控制觀賞角度,隨心所欲地進(jìn)行上下、左右、前后、大小調(diào)節(jié),從而體驗(yàn)浸入式全景游覽感受。在烏魯木齊周邊,還有一些出于生態(tài)保護(hù)目的而關(guān)閉的景點(diǎn),比如天山烏魯木齊河源1號冰川(見圖3),利用本系統(tǒng)可獲得該類景點(diǎn)沿途風(fēng)景的立體全景展示,從而滿足游客的好奇與向往。
圖2 通過“全景”載入全景導(dǎo)航——新疆國際大巴扎
圖3 全景導(dǎo)航——天山烏魯木齊河源1號冰川
選擇“內(nèi)部導(dǎo)航”,打開從當(dāng)前位置去向特定景點(diǎn)的高德地圖導(dǎo)航,可以快速啟程觀賞美景。
選擇“外部導(dǎo)航”,則會打開騰訊、高德、百度三種導(dǎo)航列表(見圖4),可以選擇任一導(dǎo)航開啟到任何目的地的旅程。
圖4 通過“外部導(dǎo)航”載入百度地圖導(dǎo)航
全景導(dǎo)航嵌入的核心代碼:
/*在服務(wù)端獲取全景圖URL,并利用Webview顯示 */
final String jingtu_url = intent.getStringExtra("url"); //獲取數(shù)據(jù)
WebView webView = (WebView) findViewById(R.id.
local_web); // Webview控件
webView.getSettings().setJavaScriptEnabled(true); // WebView支持JavaScript腳本
webView.loadUrl(jingtu_url); //訪問全景網(wǎng)頁
webView.setWebViewClient(new WebViewClient() {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);}} //通過WebView顯示網(wǎng)頁
/*構(gòu)建VR全景視圖 */
final MyPanoramaImageView panoramaImageView = findViewById(R.id.panorama_image_view);
gyroscopeObserver = new GyroscopeObserver();
gyroscopeObserver.setMaxRotateRadian(Math.PI/9);
本系統(tǒng)對烏魯木齊周邊的特色景點(diǎn)進(jìn)行了多維度展示,介紹了景點(diǎn)的歷史典故、發(fā)展歷程、主要景色、旅游建議、自駕路線以及公共交通等信息,見圖5。
圖5 多維度景點(diǎn)展示
多維度景點(diǎn)展示的核心代碼:
/* 景點(diǎn)多維度展示 */
Intent intent = getIntent(); // 獲取數(shù)據(jù)
final ArrayList
addressName = result.get(0);
latx = Double.valueOf(result.get(3));
laty = Double.valueOf(result.get(4));
textView.setMovementMethod(ScrollingMovementMethod.getInstance());//富文本內(nèi)容
textView.setMovementMethod(LinkMovementMethod.getInstance());
RichText.fromHtml(result.get(1)).into(textView); //特色景點(diǎn)展示
文中基于交互設(shè)計(jì)和Android全景技術(shù),研究Android全景旅游向?qū)到y(tǒng),闡述了實(shí)現(xiàn)新疆烏魯木齊特色景點(diǎn)Android全景向?qū)到y(tǒng)的技術(shù)要點(diǎn)。盡管系統(tǒng)能夠?yàn)橛脩籼峁┨厣包c(diǎn)全景導(dǎo)航以及景點(diǎn)和沿途風(fēng)景的全方位展示,但仍需要在人機(jī)智能交互[18]和虛擬現(xiàn)實(shí)觀光體驗(yàn)等方面進(jìn)一步增強(qiáng),并提供高效、價(jià)優(yōu)的智能出行規(guī)劃[19],以期能讓出游者在虛擬空間身臨其境地感受各地特色美景。