王圣華 譚劍

摘 ?要：文章針對移動互聯(lián)網(wǎng)中文化遺產(chǎn)宣傳推廣問題，研究Hybird APP模式下，結(jié)合VR全景圖+電子地圖技術的系統(tǒng)設計和關鍵技術，從Hybird APP框架選取、系統(tǒng)設計、電子地圖、全景圖整合、客戶端對象體系設計和其他關鍵技術、系統(tǒng)實現(xiàn)5個部分闡述系統(tǒng)研發(fā)過程，最終通過一個系統(tǒng)原型驗證了系統(tǒng)架構(gòu)和各項關鍵技術的有效性，實現(xiàn)了自然文化遺產(chǎn)全景圖、空間數(shù)據(jù)的集成、三維可視化表達和傳輸控制。為類似研究繼續(xù)開展和文化遺產(chǎn)移動互聯(lián)網(wǎng)展示提供了有益借鑒。

關鍵詞：文化遺產(chǎn);電子地圖;全景圖;Hybird APP

中圖分類號：TP311.11 ? ? ? 文獻標識碼：A 文章編號：2096-4706（2020）04-0134-06

Abstract：Aiming at the promotion of cultural heritage in mobile internet，this paper studies the system design and key technologies of Hybird APP and VR panorama plus electronic map technology. The five parts of APP framework selection，system design，electronic map，panorama integration，client object system design and other key technologies and system realization are described in the system development process. Finally，through a system prototype，the effectiveness of the system architecture and key technologies is verified，and the integration， three-dimensional visual expression and transmission control of natural and cultural heritage panorama and spatial data are realized system. It provides a useful reference for similar research and cultural heritage mobile internet display.

Keywords：cultural heritage;electronic maps;panorama;Hybird APP

0 ?引 ?言

文化遺產(chǎn)是歷史文化的物質(zhì)載體，具有很高的觀賞和研究價值，但是我國地域廣大，文化遺產(chǎn)數(shù)量多，分布分散。很多文化遺產(chǎn)藏于民間，由于缺乏觀賞和推廣而慢慢消失。為更好地推廣和宣傳文化遺產(chǎn)，借助現(xiàn)在蓬勃發(fā)展的移動互聯(lián)網(wǎng)大潮，結(jié)合最新的Hybird APP技術，本論文基于本校教學改革項目，設計并實現(xiàn)了一個文化遺產(chǎn)電子地圖全景漫游系統(tǒng)。依靠HTML5標準的傳輸特性、元素控制和交互能力和WebGL的三維表達能力，利用通用網(wǎng)絡傳輸協(xié)議和跨平臺Web瀏覽器，實現(xiàn)自然文化遺產(chǎn)全景圖、空間數(shù)據(jù)的集成、三維可視化表達和傳輸控制。

1 ?國內(nèi)外研究現(xiàn)狀

目前，文化遺產(chǎn)展示研究方面，基于全景圖和電子地圖的研究都存在，但是缺乏整體設計，尤其是基于移動互聯(lián)網(wǎng)的Hybird APP設計。文獻[1]詳細分析了全景圖的各種構(gòu)造形體和處理算法。文獻[2]從全息數(shù)字化建模方面，對實體文化遺產(chǎn)進行應用研究，建立了文化遺產(chǎn)的360°數(shù)字全景，并認為其沉浸感強烈，給觀賞者帶來身臨其境的感覺，但是并沒有進行網(wǎng)絡發(fā)布和地理信息系統(tǒng)的進一步研發(fā)。文獻[3]從感受者角度提出要建立文化遺產(chǎn)全景漫游環(huán)境，并且認為文化遺產(chǎn)的空間關聯(lián)是表達的重要部分，建立的洛陽旅游體驗網(wǎng)就提供了網(wǎng)絡文化遺產(chǎn)的360°全景展示，但是全景圖采用長軸圖片形式展示，缺乏沉浸感和縱深。文獻[4]基于HTML5標準建立了一個三維全景Web系統(tǒng)，分析了全景展示所需要的數(shù)據(jù)內(nèi)容，但是沒有涉及電子地圖相關內(nèi)容。類似采用HTML5進行全景圖展示研究的還有文獻[5，6]。

目前，Hybird APP與全景圖結(jié)合研究屬于起步階段，研究內(nèi)容比較少，也不全面，但是很多研究者都看好這個方向。文獻[7]研發(fā)了以基于移動互聯(lián)網(wǎng)的HTML5全景漫游系統(tǒng)，通過瀏覽器傳遞手機傳感器值到系統(tǒng)中，實現(xiàn)了全景漫游，但是對系統(tǒng)架構(gòu)、關鍵技術語焉不詳，也沒有結(jié)合電子地圖。文獻[8，9]分析了三種主流的APP開發(fā)方法，并認為，Hybird APP模式具有開發(fā)效率和工作性能的綜合優(yōu)勢，將來的應用會越來越廣泛。文獻[10，11]都基于PhoneGap架構(gòu)探討了Hybird APP的架構(gòu)及關鍵技術。文獻[12]認為移動互聯(lián)網(wǎng)平臺上的全景圖展示將具有更好的訪問性和沉浸感。文獻[13]提出Hybird APP中GPS Camera模式，認為全景圖完全可以作為移動定位攝像機的一種應用。

本文將通過一個文化遺產(chǎn)VR全景APP研發(fā)實例，闡述此類系統(tǒng)研發(fā)過程和關鍵技術，為類似研究提供有益借鑒。

2 ?Hybird APP框架選取

Hybird APP框架主要包括中間容器和Web應用層（含UI框架），其結(jié)構(gòu)如圖1所示。

中間容器即提供JS接口調(diào)用本地設備接口的瀏覽器，它聯(lián)通了智能手機的硬件設備與頁面應用。在已發(fā)表研究中，使用PhoneGap作為中間容器的數(shù)量很多，因為它早在2008年就已出現(xiàn)，是沿用最久的Hybird APP中間容器。

UI框架是提供用戶接口、界面定義的一系列開發(fā)庫，它提供了方便的觸控操作，并且為其他模塊的嵌入顯示提供表達規(guī)則和事件驅(qū)動。

在已發(fā)表的研究中，使用Sencha Touch和Intel XDK作為UI框架的數(shù)量很多，前者出現(xiàn)較早，后者依托Intel公司，提供了完整的開發(fā)環(huán)境。

但是，在本研究中，我們詳細考察了以上各類中間容器和UI框架，最終選定了Ionic（UI框架）+Cordova（中間容器）作為基礎SDK，其優(yōu)勢主要有以下3點：

（1）結(jié)構(gòu)清晰。Ionic采用了典型的MVC架構(gòu)，各類主體以文件形式分別管理，邏輯簡單，流程明確。相比而言，Sencha Touch將視圖、模型和控制混合存放在JavaScript代碼中，通常一個管理功能JS達到數(shù)百行，內(nèi)容有HTML標簽、數(shù)據(jù)庫操作、數(shù)學函數(shù)等等，給閱讀和管理帶來了困難。

（2）開發(fā)簡潔。Ionic前端開發(fā)直接采用JavaScript、HTML和CSS，這些文件采用一般文本編輯器即可開發(fā)，而且Ionic測試容器自帶監(jiān)聽，實時在默認瀏覽器中顯示修改結(jié)果，方便高效，如圖2所示。相比而言，Intel XDK雖然提供了全面的開發(fā)工具，但是界面復雜、編譯緩慢，調(diào)試工具運行效率低，占用了大量的開發(fā)時間。

（3）部署快捷。采用了Node.js作為部署工具，配置采用JSON，自動將Cordova中間容器及插件整合其中，與操作系統(tǒng)連接、插件更新等細節(jié)均被封裝，生成快速。相比而言，其他UI框架與中間容器的編譯需要配置Eclipse等通用開發(fā)環(huán)境，需要加入各類編譯組件，配置繁瑣，部署緩慢。

除此之外，幾類UI框架和中間容器在運行性能和界面表現(xiàn)方面差別不大，底層系統(tǒng)傳感器均有接口暴露，觸摸界面和事件反應與Native APP完全一致。

3 ?文化遺產(chǎn)全景圖系統(tǒng)設計

本系統(tǒng)旨在將宣傳文化遺產(chǎn)，讓游客更深入地去了解文化遺產(chǎn)的地理位置和環(huán)境外貌，提高旅游經(jīng)濟。作為文化遺產(chǎn)管理方，一方面可利用本系統(tǒng)作為網(wǎng)絡宣傳平臺，將文化遺址的人文歷史弘揚到各個地方，讓更多的游客有機會去了解。另一方面，可以更好地管理、保護文化遺址，并且通過三維全景圖把文化遺址的真實面貌展示在游客面前，讓游客可以提前了解歷史文化并吸引游客，以及電子地圖讓游客了解文化遺址位置，使其更方便快捷地找到自己想去的地方，促進文化遺址的旅游發(fā)展。

基于以上要點分析，我們設計了本系統(tǒng)的服務器、客戶端結(jié)構(gòu)，并建立了簡單的對象實體關系圖，如圖3所示。

服務器端采用Asp.Net構(gòu)建，因為Ionic客戶端自行管理界面，維護客戶端數(shù)據(jù)模型，所以只采用Asp.Net的Http Handler接口，開發(fā)各類數(shù)據(jù)主體的讀寫接口，與客戶端使用的AJAX異步傳輸方法匹配（Ionic中的$HTTP服務）。因為數(shù)據(jù)庫內(nèi)容比較簡單，而且都是成熟技術，在此也不再贅述。

4 ?關鍵技術難點之一：JS控件與Ionic對象體系的匹配

系統(tǒng)研發(fā)的第一個難點就是Web電子地圖客戶端（如圖4所示）和全景圖客戶端與Ionic對象體系的匹配問題。正如上文分析的，Ionic對象體系中，將界面、數(shù)據(jù)模型和控制器嚴格區(qū)分，以不同的文件形式進行管理，并在加載時，統(tǒng)一監(jiān)聽數(shù)據(jù)模型，通過控制器達到修改模型的目的。而電子地圖控件，也包括了從界面（DOM元素、CSS）、數(shù)據(jù)模型（圖層、標注、圖例等對象）到控制器（各種鼠標事件、時序事件等）的全面內(nèi)容。而且并沒有統(tǒng)一監(jiān)聽數(shù)據(jù)模型，而是通過事件驅(qū)動地圖界面的變化和后臺服務器空間數(shù)據(jù)的加載。

很多研究和開發(fā)人員在整合這兩個體系過程中發(fā)現(xiàn)了這個問題，本質(zhì)上，就是Ionic對象體系會接管靜態(tài)的DOM元素，消除對應的腳本事件，以自己的標簽和控制器驅(qū)動界面變化，導致電子地圖的初始化、事件腳本失效。

為解決這一問題，我們深入研究了Ionic對象體系中對外部SDK可能的接入方式。Directive（指令）就是非常適合解決這一問題的對象。一個Directive對象在HTML中的表現(xiàn)形式十分類似于JSP或者Struts等框架里面的taglib，比如“”。那么這種非標準化的Tag，是如何解析的呢，請看表1中Directive對象的重要屬性。首先，這種自定義標簽作為一個Element使用，是需要在restrict中進行限定的，這樣，Ionic的解釋器才會去找到對應的標簽。其次，會載入對應的真正的HTML標簽，這部分內(nèi)容作為一個Template可以存儲在外部“.html”文件中。第三，如何與通用的控制器交互，可以通過Scope對象設置，既可以設置為當前Directive所在的Controller，也可以設置為更高層次的Controller。第四，也是打開與電子地圖SDK對接的關鍵部分，就是對Tag的自定義編譯compile和link鏈接函數(shù)，前者可以在加載DOM元素時實現(xiàn)自定義的修改，改變DOM元素的內(nèi)容、類型和樣式，后者可以在DOM元素編譯完成后，掛接自定義事件，實現(xiàn)前端與后端的連接。通過這兩個函數(shù)，我們可以把Ionic之外一樣具有DOM元素、事件驅(qū)動的SDK，以Ionic框架可以加載、感知和觸發(fā)的方式整合起來。

在具體實現(xiàn)中，我們采用了高德Web SDK作為電子地圖提供者，與加載電子地圖JS控件類似，本系統(tǒng)的全景圖控件也是通過Directive這一橋梁接入Ionic的MVC框架中，實現(xiàn)了基于WebGL的全景圖漫游和數(shù)據(jù)調(diào)用。基于WebGL的全景圖研究與已發(fā)表成果類似[4，6，7]，如何實現(xiàn)全景圖DOM元素加載和WebGL事件控制與電子地圖加載和事件關聯(lián)類似，本文均不再贅述。

5 ?關鍵技術之二：系統(tǒng)對象體系的劃分和設計

Ionic的對象體系體現(xiàn)了層次分明的作用域，首先對于每個View都有自己對應的Controller對象（內(nèi)部對象為$Scope）;其次對于整個應用程序具有一個最高級別的$Rootscope對象，可以保持全局數(shù)據(jù)對象;第三，對于一些各Controller通用的操作，不依賴于界面輸入的操作，提供了$Service對象進行管理;第四，對于需要自行鏈接DOM元素和JS事件的獨立模塊，可以通過$Directive進行擴展，這部分內(nèi)容在上文已經(jīng)詳細描述。

那么，在本系統(tǒng)中，為了實現(xiàn)清晰的對象管理和系統(tǒng)操作，我們進行了如下劃分，如圖5所示：首先，確定了三個基本視圖View，分別是電子地圖、全景圖和文化遺產(chǎn)列表;其次，通過$Service封裝了網(wǎng)絡傳輸操作（通過$Http對象實現(xiàn)）;第三，對文化遺產(chǎn)對象使用了單例模式，即一個文化遺產(chǎn)在客戶端有且僅有一個實例，并且自行實例化向整個系統(tǒng)提供。原因在于，電子地圖表達了文化遺產(chǎn)的空間位置，全景圖表達了文化遺產(chǎn)的可視化風貌，一個詳細列表提供了文化遺產(chǎn)的縮略圖和文字描述信息，他們都只是文化遺產(chǎn)對象的內(nèi)部要素子集。沒有必要在對應的Controller中保留自己獨立的文化遺產(chǎn)對象，這樣會造成數(shù)據(jù)冗余，而且增加了同步的工作量;第四，我們更進一步地將所有的數(shù)據(jù)庫操作也封裝為$Service對象，這樣同為全局對象的文化遺產(chǎn)和$Service對象可以保證數(shù)據(jù)庫增刪改操作的唯一性和同步性，不會出現(xiàn)數(shù)據(jù)沖突。

6 ?其他關鍵技術

第一，電子地圖因為采用開放模塊（高德地圖API），故本系統(tǒng)不存儲電子地圖相關對象，只保存客戶端配置;

第二，由于全景圖數(shù)據(jù)量大，圖片變更少，故全景圖片本身采用文件形式存儲在服務器端，其服務器端路徑導入數(shù)據(jù)庫管理，這也是大部分靜態(tài)不可分圖片文件的管理方式，為保障文件名有區(qū)分度，采用數(shù)據(jù)表中同行數(shù)據(jù)的UUID命名。

第三，所有的數(shù)據(jù)通信，均以JSON封裝，這種格式與直接提交HTML或XML封裝相比，有3個好處：

（1）數(shù)據(jù)量小。

（2）JavaScript可以直接進行對象實例化。

（3）JSON的對象不限變量和函數(shù)，也提供了服務器端對客戶端函數(shù)控制的可能渠道。

7 ?系統(tǒng)開發(fā)實例及討論

本系統(tǒng)開發(fā)基于Ionic 1.7.14，結(jié)合對應的Cordova中間容器，編譯環(huán)境采用Node.js自動安裝的Ionic應用程序，代碼編寫采用Utraedit，實現(xiàn)了以上設計內(nèi)容和關鍵技術。當然，除上文描述的設計及關鍵技術之外，全景圖WebGL構(gòu)造[6]、數(shù)據(jù)庫操作、Ajax異步傳輸及回調(diào)[11]都是本系統(tǒng)開發(fā)涉及的內(nèi)容，相關研究成果眾多。

系統(tǒng)實現(xiàn)的特色是完全利用了Ionic的優(yōu)勢。第一，所有數(shù)據(jù)加載無刷新;第二，完全兼容HTML5標準的WebGL和自定義tag;第三，系統(tǒng)自由伸縮，可以適用于不同桌面Web瀏覽器和手機客戶端訪問;第四，系統(tǒng)可以封裝為Hybird APP，作為文化遺產(chǎn)旅游推廣的手機應用軟件，操作體驗與Native APP完全一致，如圖6所示。

此外，本研究開放了原型系統(tǒng)測試，用戶可以直觀地了解文化遺產(chǎn)的空間位置、詳細描述和全景實景，對文化遺產(chǎn)宣傳工作提供了支撐網(wǎng)絡平臺。

可以看出，雖然帶寬有限，但是異步加載設計使各項數(shù)據(jù)資源順序加載，總界面顯示速度小于3 s（如圖7方框部分），單項數(shù)據(jù)下載時間均在300 ms之內(nèi)。這是利用了Ionic的MVC架構(gòu)、良好系統(tǒng)設計和JSON數(shù)據(jù)傳輸?shù)燃夹g的綜合效果。

由于本研究目標主要是為了建立基于Hybird APP的文化遺產(chǎn)全景圖與電子地圖結(jié)合的網(wǎng)絡系統(tǒng)，著重探索了技術路線、系統(tǒng)基本設計和關鍵技術要點。最終建立的系統(tǒng)，數(shù)據(jù)量并非很大，也沒有進行訪問壓力測試，一方面，數(shù)據(jù)量問題可以通過分布式數(shù)據(jù)庫、內(nèi)存數(shù)據(jù)庫、數(shù)據(jù)分頁等多種問題解決，另一方面，訪問壓力基本可以認為是服務器端問題，關于負載均衡、同步問題已經(jīng)有大量研究可以借鑒。至于文化遺產(chǎn)信息服務的特異性問題，我們可以在服務器端研發(fā)中繼續(xù)探索。此外，開發(fā)過程中我們認為基于WebGL提供更加豐富的文化遺產(chǎn)場景是一個直觀新穎的展示方式，除全景圖外，可以做的工作還有很多[14]，但是與本文主題區(qū)別較大，我們將在以后的工作中進一步研究闡述。

8 ?結(jié) ?論

本研究針對文化遺產(chǎn)網(wǎng)絡推廣訪問難題，利用蓬勃發(fā)展的移動互聯(lián)網(wǎng)大潮，提出建設一個結(jié)合電子地圖、全景圖功能的文化遺產(chǎn)Hybird APP系統(tǒng)。論文從Hybird APP結(jié)構(gòu)分析到開發(fā)框架選取、系統(tǒng)設計和關鍵技術難點，給出了一系列技術方案，并通過系統(tǒng)實例開發(fā)和測試，驗證了設計和技術路線的有效性。本論文受到了北京信息科技大學的支持，是在已有研究的基礎上進行的創(chuàng)新研發(fā)并且提交內(nèi)容均具有原創(chuàng)性，將為未來文化遺產(chǎn)移動互聯(lián)網(wǎng)平臺的研發(fā)和其他相關Hybird APP的建設提供了有益參考。

參考文獻：

[1] 王玉瓊.三維全景漫游技術及應用研究 [D].昆明：云南財經(jīng)大學，2013.

[2] 謝建德，陳應明，黃吉惠.實體文化遺產(chǎn)的全息數(shù)字化建模應用研究及示范 [J].科技風，2015（20）：120-121.

[3] 湯瑩瑞.文化遺產(chǎn)展示規(guī)劃與設計初探 [D].重慶：重慶大學，2013.

[4] 梁弼，肖麗利，薛文.古建筑文物三維全景展示的設計與實現(xiàn) [J].微型機與應用，2014，33（16）：10-11+14.

[5] 趙煥霞.基于Google Chrome內(nèi)核的三維全景展示 [D].濟南：山東師范大學，2015.

[6] 周輝，程陳，任海軍，等.基于HTML5的全景圖展示 [J].微型機與應用，2012，31（20）：77-79+86.

[7] 鮑豫鴻.基于移動互聯(lián)網(wǎng)的三維全景展示系統(tǒng) [J].電子測試，2014（4）：73-74+70.

[8] CHENG F. Build Mobile Apps with Ionic 4 and Firebase [M/OL]. Apress，2018[2019-12-08]. https：//www.springer.com/cn/book/9781484237748.

[9] 楊毅.移動APP開發(fā)模式探討 [J].福建電腦，2014，30（6）：86-87.

[10] 唐俊俊.基于PhoneGap的Android平臺引擎設計與實現(xiàn) [D].大連：大連理工大學，2014.

[11] 陳宏偉.基于PhoneGap的跨平臺移動應用開發(fā)及其性能優(yōu)化 [D].成都：西南石油大學，2015.

[12] DAVID G. The panorama between mobile visual platforms is a sentimental bond [J]. Ubiquity the Journal of Pervasive Media，2013，2（1）：146-163（18）.

[13] Marco M.Hybrid products and goal oriented categories：The GPS camera case [D].Copenhagen Business School Graduate School in Business and Economics，2010.

[14] GUERRA J P，PINTO M M，BEATO C. VIRTUAL REALITY-SHOWS A NEW VISION FOR TOURISM AND HERITAGE [J].European Scientific Journal，2015，3：49-54.

作者簡介：王圣華（1984-），女，漢族，山東東營人，副教授，博士，研究方向：數(shù)字媒體技術、文化遺產(chǎn)數(shù)字化傳播;譚劍（1980-），男，漢族，湖北十堰人，副教授，博士，研究方向：網(wǎng)絡空間信息系統(tǒng)。