全景配置動態生成方法及實現

徐溯陽, 蔡陽軍, 張 豐, 杜震洪*, 劉仁義

(1. 浙江大學 浙江省資源與環境信息系統重點實驗室， 浙江 杭州 310028； 2. 浙江大學 地理信息科學研究所， 浙江 杭州 310027； 3. 杭州市住房保障辦公室， 浙江 杭州 310006)

表1 配置文件標簽數及比例

表2 傳統方案中的配置文件

表3 動態生成方案下的配置文件

表4 2種方案的文件數量對比

表5 2種方案的請求獲取時間對比

?

全景配置動態生成方法及實現

徐溯陽1,2, 蔡陽軍3, 張 豐1,2, 杜震洪1,2*, 劉仁義2

(1. 浙江大學 浙江省資源與環境信息系統重點實驗室， 浙江 杭州 310028； 2. 浙江大學 地理信息科學研究所， 浙江 杭州 310027； 3. 杭州市住房保障辦公室， 浙江 杭州 310006)

基于配置靜態存儲方法的全景應用模式已能較好地滿足一般的全景瀏覽應用要求.但在更新頻繁、交互量大、場景數多的環境下，此方法容易造成維護困難、服務器數據量激增等問題.針對在不同場景圖像配置中存在重復的靜態內容這一問題，提出了一套具有普適性和可移植性的全景配置文件動態生成方法：提煉靜態內容，存儲動態內容，并根據不同場景的請求參數動態生成配置文件.經實驗對比，相較配置靜態存儲方法，動態生成方法顯著減少了服務器文件數量，在傳輸時間、可維護性與瀏覽器緩存利用方面均優于傳統方案.

全景；配置；動態生成

全景圖像是一種能為用戶提供超過人類正常視野范圍的實景圖片，在機械、計算機視覺、監控以及虛擬現實領域有著廣泛應用[1].全景是GIS的重要組成部分，也是傳統仿真三維技術的一種替代方案[2].近年來，各類全景系統發展迅猛，具有代表性的有國外的谷歌街景，國內的騰訊街景、百度街景等.

行業內的小型全景應用常采用商業全景引擎與自定義配置文件相結合的方式實現.其中，全景引擎封裝了全景應用的核心功能，而配置文件則定義了應用的圖像、展現形式和交互邏輯，是全景應用必不可少的組成部分.

目前對于全景配置管理的研究尚不成熟.文獻[3]自主實現了一套配置文件標準規范，但在組織方式上還是最原始的多景配置.文獻[4]提出了配置拆分思想，將各類功能性配置文件分開組織，而將景相關配置統一組織.文獻[5]設計了一個全景生成系統，但其配置在訪問前而非訪問時生成.文獻[6]提出了對配置進行編輯管理的思想，但只采用了簡單的I/O文件操作.

以上研究在配置管理上均未突破靜態性.每一景的配置文件均于事先制作完成，訪問時直接調用.這類方案在景數較少的場合效果較好，但在景數大于100的中大型全景應用中，具有數據冗余、修改維護困難、實時性不足等缺點.

本文擬設計并實現一套具有普適性和可移植性的全景配置文件動態生成方法，并用實驗驗證所搭建的原型系統.

1 全景應用和配置靜態存儲方法

1.1 全景應用組成

1.1.1 全景引擎

全景引擎又稱全景播放器，是全景應用的核心.全景引擎封裝了實現全景瀏覽功能的主要模塊，允許用戶根據設定的參數，對已有全景切片進行獲取、融合、拼接和渲染.

全景引擎必須通過特定的配置文件來傳遞配置信息.

1.1.2 配置文件

全景配置文件的作用是傳遞全景應用每一景初始化時的各類配置信息.讀取全景引擎解析配置文件中相應內容到內存并進行維護.初始化結束后，配置文件即被丟棄，在用戶瀏覽交互過程中不再起作用[7].

配置文件的具體格式和寫法與使用的引擎相關.本文使用的Krpano全景引擎要求配置文件以XML格式書寫.各類配置項實際上都是XML文檔中帶屬性的標簽與子標簽.

1.1.3 全景腳本程序

嚴格來說，全景腳本函數也是配置文件的一部分，定義在〈action〉標簽中.

全景腳本程序是全景引擎提供的一種用戶接口，允許用戶使用其支持的腳本語言對全景場景進行控制.包括樣式修改、景切換、視角轉換、興趣點增刪、事件綁定等.

1.1.4 前端控制程序

前端控制程序即是傳統的javascript前端腳本.前端控制程序負責對一些沒有定義在全景內的DOM對象以及BOM對象進行控制和操作.Krpano引擎提供了前端控制程序與全景腳本相互調用的直接接口.在前端代碼中，可以使用krpano.call()調用全景腳本函數，而在全景腳本函數中，可以通過js()調用前端.

1.2 全景配置靜態存儲方法

全景配置的靜態存儲方案如圖1所示.靜態存儲方案沒有服務器端程序.服務器端只發布包含全景配置文件與全景切片數據的文件系統，供全景引擎調用.

圖1 靜態存儲方法架構Fig.1 Architecture of static storage method

在配置文件的組織上，存在“多景-配置”與“一景-配置”2種情況.前者為每一景存儲一個配置文件，后者將部分或者所有景的配置置入同一個配置文件的〈scene〉標簽中.

在實踐中發現，全景系統的傳統配置方案導致了以下問題：

1.2.1 配置存在大量冗余

在配置文件中，每一景獨有的配置信息包括景名、視角、切片地址與興趣點，而其他配置項，包括樣式、顯示效果、全景腳本程序等各景都基本相同，從而造成相同的配置項在多個配置文件中重復出現.

以本實驗所用的數據為例(見表1)，平均每份配置文件定義樣式8項、腳本動作函數25項，平均行數410，占配置文件數據總量的70%以上.

表1 配置文件標簽數及比例

Table 1 Number and proportion of tags in configuration file

1.2.2 興趣點的創建維護困難

興趣點(hotspot)是指景空間中預先定義的、擁有固定位置和樣式、可承載一定信息的對象[8].功能上，可以分為跳轉興趣點、鏈接興趣點、圖片展示興趣點、文字介紹興趣點、評論興趣點、語音興趣點等.樣式上，可以分為面狀興趣點和點狀興趣點.除了全景圖像外，興趣點是全景應用信息傳遞的最主要方式.

配置靜態存儲方法很難解決創建和維護興趣點的問題.在創建方面，因為興趣點屬于景外內容，Krpano引擎的配置文件自動生成的工具，其興趣點錄入生成功能不盡完備，開發人員需根據資料，在配置文件生成之后，手動修改、寫入〈hotspot〉標簽，并增加相應屬性.

其次，興趣點具有動態性和時效性.店鋪、公共設施、儀器器材等重要興趣點的信息處于動態變化中，需要不斷對其進行更新維護.

由于〈hotspot〉標簽寫在配置文件中，很難通過代碼修改，只能采用手工方式修改，工作量巨大.當與同一個實體對應的興趣點出現在N個景中時，一個實體改變，就需要修改N個景的配置文件.

1.2.3 無法利用瀏覽器緩存

在全景應用中，由于全景引擎首先需要獲取配置文件才能進行渲染，在配置文件的請求響應到達前，一切工作都將掛起.所以配置文件的請求阻塞性是全景應用中的瓶頸.能否快速地從服務器獲取配置文件，關系到全景應用用戶體驗能否流暢.

為了追求最快的瀏覽速度，現代瀏覽器都會將訪問網頁時依賴的一些靜態資源緩存到本地[9].當使用傳統方法時，每訪問一個新景，都要重新下載該景的配置文件，而之前緩存的其他景的配置文件在邏輯上與其無關，相同內容無法再利用，這在一定程度上降低了瀏覽速度.

2 全景配置動態生成方法

全景配置本質上是對全景應用中的各類功能、展現效果和特性的設置.這些功能、展現效果和特性可被抽象為全景對象.

全景對象A與全景配置C之間存在不完全映射關系.認識全景對象是進一步認識和分析全景配置的必要前提.

2.1 全景對象

2.1.1 全景對象抽象

分析現有全景應用中的各類功能、展現效果和特性，結合配置文件格式，對全景應用中的概念及其之間的關系進行抽象，如圖2所示.

圖2 全景對象ER圖Fig.2 Entity relationship diagram of panoramic object

結合圖2，對以上抽象對象進行描述.

a) PanoSystem：對全景應用本身的抽象.代表一個完整的全景應用.

b) View：對全景圖視角的抽象.包括當前視角方向、視角寬度和視野范圍.

c) Display：對全景圖展示質量的抽象.包括幀率、銳化等配置項.

d) Control：對用戶操作和交互細節的抽象.

e) Autorotate：對全景自動旋轉功能的抽象.

f) Cursors：對鼠標樣式的抽象.

g) Events：對各類事件的抽象.

h) Action：對全景腳本的抽象.

i) Scene：對景的抽象.景是全景應用中最重要的概念之一，全景應用本身即是以景為單位進行組織的.

j) Hotspot：對興趣點的抽象.興趣點是景內最重要的表現數據和內容的概念.興趣點從樣式上可分為兩類，其中一類為Image Hotspot.

k) Entity：對Hotspot所對應的真正實體對象的抽象.

l) Layer：對全景圖內的自定義區域的抽象.

m) Image：對景內全景圖片配置的抽象，分為CUBE、CUBESTRIP、SPHERE、CYLINDER等.

n) Level：對全景切片層級的抽象.只有當Image開啟了Multiles選項時才可以使用.

o) Polypoint：對組成Polygon Hotspot的點的抽象.Polypoint與Hotspot是多對一關系.

p) Preview：對景預覽圖的抽象.

q) Style：對樣式的抽象.

2.1.2 全景對象分析

從圖2中可以看到，全景對象被分為上下2個部分.上方的對象引申自PanoSystem，是PanoSystem的子對象.下方的對象引申自Scene，是Scene的子對象，而Scene本身又是PanoSystem的子對象.

PanoSystem的直接子對象具有全局性和一致性，即在單個全景應用中只需定義一次，和任何一景既沒有邏輯關聯也不存在包含關系，所以將其歸為靜態對象.

而Scene的子對象具有局部性和動態性，即每一景都有自己獨特的Hotspot、Image、Preview、Layer和Entity，所以將這些Scene的子對象歸為動態對象.

如果用首字母來標志各類全景對象(重復則以下標區分)，以廣義表的形式來表示全景對象及其之間的關系，則有：

Pa=(Ps,Pd)，

(1)

Ps=(V,D,C1,A1,C2,A2,E,S)，

(2)

Pd=(S1(H(E,P)),I(L),P2)，

(3)

其中，Pa代表全景應用整體，Ps代表全景應用中的靜態內容，Pd代表全景應用中的動態內容.將全景對象映射到全景配置中，則可以得到各配置項的特性和關系.

2.2 全景動態配置思想

根據式(1)～(3)，分別處理全景靜態對象與動態對象.將動態對象的相關信息保存到數據庫中，靜態對象對應的配置項保存到幾個不同的靜態模板文件中.

全景配置動態生成架構如圖3所示，生成過程如圖4所示，具體步驟為：

1) 獲取html頁面，載入前端js代碼并執行.js代碼控制載入全景引擎核心文件，創建全景視窗.全景引擎向web服務器發出獲取全景配置的請求.

2) web服務器根據唯一標識符進行數據庫查詢，判斷目標景是否存在，如存在，則進行下一步操作.如不存在，則請求失敗，返回錯誤信息.

3) 根據唯一標識符進行數據庫查詢，獲取目標景的初始視角信息、全景圖像信息、興趣點信息和實體信息.

4) 在web服務器的內存中創建一個空文檔，將第3步獲取的動態配置信息寫入空文檔.

5) 獲取其他請求參數，根據這些請求參數，對之前的配置項做覆蓋和追加，并寫入文檔.

6) 將靜態配置模板引入文檔.

7) 修改http response的MIME類型為text/xml.將動態生成的配置文檔寫入response，并返回http response.

在動態生成模型下，全景瀏覽需要的配置不再是“統一生成，永久存儲”，而是“分類存儲，時時更新”.

圖3 動態生成方法架構Fig.3 Architecture of dynamic generation method

圖4 動態生成方法步驟Fig.4 Procedure of dynamic generation method

2.3 靜態配置模板設計

靜態配置模板事先編寫，有3個文件，分別為：

a) template.xml：配置文件的入口，存放除action和style之外的所有靜態配置項.另外2個靜態配置模板由它引入.

b) action.xml：存放所有全景腳本配置項.

c) style.xml：存放所有樣式配置項.

之所以將action.xml和style.xml拆分，是因為只有1項其他靜態配置項，而這2類配置項的數量較大，拆分為2個文件有助于更好地管理和維護.如果文件體量過大，可以進一步拆分.

2.4 動態配置項生成

動態配置項的生成主要由后端服務器程序負責.服務器程序獲取用戶的請求參數(主要為景名或景編號)，與數據庫交互，讀取與目標景關聯的動態配置信息并創建配置項.

2.4.1 動態配置信息

動態配置信息存儲在數據庫中，主要包括4部分：目標景的初始視角信息、全景圖像信息、興趣點信息和實體信息.

a) 初始視角信息

初始視角信息指圖像載入時的視角方向，包括水平角(hlookat)和天頂角(vlookat).靜態配置模板中本已設定視角配置，但由于無人機拍攝角度無法固定等，往往需要對初始視角進行調整.

b) 全景圖像信息

圖像信息指的是該景對應的瓦片層級、瓦片大小、瓦片存儲地址以及該景在電子地圖上的經緯度等信息.

c) 興趣點信息

興趣點信息指的是景內的興趣點類型、興趣點關聯實體、興趣點坐標，以及組成Polygon Hotspot的Polypoint的坐標.

d) 實體信息

實體信息指的是興趣點所對應的場景實體(商家、景觀、公共設施、展覽對象等)的相關信息.

2.4.2 生成配置項

配置文件的生成主要有3個步驟：

第1步是靜態模板文件的引入，實踐中通過生成〈include〉標簽引入template.xml實現.

第2步是全景圖像的配置，實踐中通過動態生成〈image〉標簽的方式實現.同時，還要根據從數據庫中獲取的景信息寫入〈image〉標簽的type屬性(投影類型)、url屬性(全景圖像地址)、multitiles屬性(是否采用多級切片)、tilesize類型(切片大小)和progressive屬性(是否支持漸進式切片載入效果).如果存在切片，則還要添加〈level〉標簽.

第3步是興趣點的配置，這是配置文件生成過程中的重點和難點.實踐中通過動態生成〈hotspot〉標簽的方式實現.如果是面狀興趣點(polygonal hotspot)，則需要在〈hotspot〉標簽內部增加〈point〉標簽及其ath與atv屬性；如果是點狀興趣點(image hotspot)，則需要設定〈hotspot〉的type屬性為“image”，并設定ath和atv.

每個興趣點都對應一個實體(Entity)，當初始化興趣點時，還要通過關聯查詢獲取關聯實體的信息，并寫入hotspot的配置項中.

3 原型系統的實現與驗證

杭州市河道監管中心擬建設河道管理系統(一期)全景展示模塊，筆者以此為契機，構建了動態生成配置的全景展示與管理系統，對動態生成方法進行了驗證.

平臺用PHP作為后臺語言，用thinkphp作為MVC框架，DomDocument作為動態構建XML格式配置文件的擴展工具.采用SQLServer2008數據庫，測試網絡環境為普通互聯網，帶寬為2 M.

3.1 文件數量縮減

在靜態存儲方案中，使用最新版本的全景引擎批處理工具.工具為每個景自動生成以下配置文件，文件名中s代表具體的景名或編號.

表2 傳統方案中的配置文件

Table 2 Configuration file in static storage method

本系統的景數較多.水面全景，上塘河692景，余杭塘河443景，共計1 135景.空中全景，上塘河36景，余杭塘河22景，共計58景.水面與空中全景總計1 193景.

傳統方案中配置文件總數隨景數遞增.配置文件總數為1 193×3=3 579.配置文件大小為23 kB×1 193=27.44 MB.

動態生成方案下，配置(模板)文件如表3所示.配置模板文件總數固定為3個，不隨景數的增加而增加.配置文件的總大小為35 kB.結果如表4所示.

表3 動態生成方案下的配置文件

Table 3 Configuration file in method of dynamic generation

表4 2種方案的文件數量對比

3.2 興趣點可維護性優化

系統設計并實現了興趣點創建維護功能.

在本系統中，興趣點實體是河道監管中需要特別關注的閘泵站、排水口、近水平臺等地物.

管理員只要在任一景的幅面上單擊選定位置，填寫相應的屬性信息，就可以創建興趣點，并將其信息寫入數據庫，刷新后依然可見.同時，管理員還可以對已有興趣點進行刪除或屬性編輯操作，修改結果也可以保存.

在傳統配置文件靜態存儲的方案下，這是無法實現的.

3.3 瀏覽器緩存優化

在動態生成方案下，訪問過的任意一景，其配置模板文件全部被瀏覽器緩存，模板文件可以從緩存用戶本地瞬時讀取，通過網絡傳輸的只有動態生成的內容.

而在傳統方案中，訪問一景后，這一景的配置文件雖然被緩存，但和其他景的配置文件沒有關系.當訪問第2景時，依然需要通過網絡獲取第2景的配置文件.在網絡環境較差時，如果配置文件沒有即刻獲得，會給用戶造成“黑屏”的視覺印象.

從圖5中可以看到，在對某一景的首次訪問中，用于動態生成配置文件的http請求(第1行)耗時146 ms，其他3個靜態配置模板分別耗時45,247和258 ms.

如圖6所示，當下一次訪問其他景時，其用于動態生成配置文件的http請求耗時基本不變，而3個靜態配置文件均可從緩存中瞬時獲取，整體瀏覽時間大大縮短.

對2種方案進行訪問測試，結果如表5所示.可見，動態生成方案能夠更好地利用緩存，且請求總體響應時間短于靜態存儲方案.

圖5 動態生成方案下配置文件模板的http請求獲取(首次請求)Fig.5 The http request information in method of dynamic generation(first request)

圖6 動態生成方案下配置文件模板的http請求獲取(從緩存中獲取)Fig.6 The http request information in method of dynamic generation(from cache)

表5 2種方案的請求獲取時間對比

Table 5 Contrast on http request transmission time between two methods

4 結 論

針對全景應用配置文件大、可維護性差、無法緩存等問題，提出了全景配置動態生成的解決方案，探索了靜態配置模板存儲與動態配置項生成相結合的配置生成方法；搭建了基于該方法的全景應用并運用于實際項目中.實例驗證表明，本文采用的方法能較好地解決以上問題.

然而，本文的探索尚處于初步階段，所提方案仍有很大的改進空間，例如，僅把景本身作為控制動態內容的變量進行傳遞.下一步可考慮增加其他控制動態配置變量，以增強動態性.

[1] GLEDHILL D, TIAN G Y, TAYLOR D, et al. Panoramic imaging:A review[J]. Computers&Graphics,2003,27(3):435-445.

[2] 丁峰，萬遠，雷雨，等.基于三維全景的在線漫游及GIS集成研究與開發[J].南開大學學報：自然科學版,2014(4):54-58. DING Feng, WAN Yuan, LEI Yu, et al. Online roaming and GIS integration research and development based on three-dimensional panoramic[J]. Journal of Nankai University:Science Edition,2014(4):54-58.

[3] 楊仁杰. 基于Web的全景技術研究[D].鄭州:鄭州大學,2012. YANG Renjie. The Research for Web-Based Panorama Technology[D]. Zhengzhou:Zhengzhou University,2012.

[4] 王延朝.基于Krpano的三維全景系統的開發和應用[D].上海:華東師范大學,2012. WANG Yanchao. The Development and Application of Three-Dimensional Panorama System Based on Krpano[D].Shanghai: East China Normal University,2012.

[5] 孫磊.全景制作平臺的設計與實現[D].西安:西安電子科技大學,2014. SUN Lei. The Design and Implementation of A Panoramic Production Platform[D]. Xian: Xidian University,2014.

[6] 朱國情,李東亮,程剛.基于Krpano的全景編輯系統設計與實現[C]//第14屆中國系統仿真技術及其應用學術年會論文集.三亞：科研出版社，2012. ZHU Guoqing, LI Dongliang, CHENG Gang. Design and realization of panorama edit system based on Krpano[C]//Proceedings of 14th Chinese Conference on System Simulation Technology & Application.Sanya:Scientific Research Publishing,2012.

[7] Krpano Gesellschaft. Krpano XML Reference Version1.19[DB/OL].http://www.krpano.com/docu/xml.[2014-10-17].

[8] World Wide Web Consortium. Caching in HTTP[DB/OL].[1999-06-01]. http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html.

[9] SHIBATA K, ARAKI S, MAEDA K, et al. High-quality panoramic image generation using multiple PAL images[J]. Electronics and Communications in Japan, 2014,97(6):58-66.

XU Suyang1,2, CAI Yangjun3, ZHANG Feng1,2, DU Zhenhong1,2, LIU Renyi2

(1.ZhejiangProvincialKeyLabofGIS,ZhejiangUniversity,Hangzhou310028,China; 2.DepartmentofGeographicInformationScience,ZhejiangUniversity,Hangzhou310027,China; 3.HangzhouHousingSecurityOffice,Hangzhou310006,China)

A method of dynamic generation of the panoramic configuration file and its implementation. Journal of Zhejiang University(Science Edition), 2016,43(6):726-732

The application model based on static storage of the panoramic configuration file meets normal requirements. But in systems which demand frequent update, complex interaction and contain large number of scenes, it may lead difficulties in system maintenance as well as a sharp rise of the configuration file number. Since some static configuration contents appear repeatedly in different scenes’ configuration files, we propose an improvement method by extracting the static content from the configuration file, storing the dynamic content in database and creating configuration file based on the parameters about the current scenes. Experimental results show that the dynamic generation method can remarkably reduce the number of files, and is superior to static storage method in transmission time, maintainability and cache use.

panorama; configuration; dynamic generation

2015-12-18.

徐溯陽(1990-)，ORCID：http://orcid.org/0000-0003-0486-1978，男,碩士研究生，主要從事全景技術和網絡地理信息系統研究.

*通信作者,ORCID:http://orcid.org/0000-0001-9449-0415，E-mail:duzhenhong@zju.edu.cn.

10.3785/j.issn.1008-9497.2016.06.018

TP 391

A

1008-9497(2016)06-726-07