響應式Web技術的傳統(tǒng)村鎮(zhèn)虛擬旅游平臺設計與實現(xiàn)

顏金彪，鄧運員，劉媛，鄭文武，尹超，何清華

(衡陽師范學院 古村古鎮(zhèn)文化遺產(chǎn)數(shù)字化傳承協(xié)同創(chuàng)新中心，湖南 衡陽 421002)

響應式Web技術的傳統(tǒng)村鎮(zhèn)虛擬旅游平臺設計與實現(xiàn)

顏金彪*，鄧運員，劉媛，鄭文武，尹超，何清華

(衡陽師范學院 古村古鎮(zhèn)文化遺產(chǎn)數(shù)字化傳承協(xié)同創(chuàng)新中心，湖南 衡陽 421002)

中國保存數(shù)量眾多、資源價值較高的傳統(tǒng)村鎮(zhèn)。針對其空間和屬性信息查詢困難、旅游服務信息匱乏的問題，本文應用響應式網(wǎng)頁設計與虛擬現(xiàn)實等技術搭建了中國傳統(tǒng)村鎮(zhèn)虛擬旅游WebGIS平臺，通過一套代碼實現(xiàn)多類硬件設備環(huán)境的自適應響應調整。系統(tǒng)不僅提供基于傳統(tǒng)村鎮(zhèn)位置的圖文、視頻、美食、酒店、停車場、銀行及導航等生活信息服務，而且提供傳統(tǒng)村鎮(zhèn)的全景照片與三維在線虛擬游覽服務，對中國傳統(tǒng)村鎮(zhèn)文化的傳播、共享、挖掘具有積極作用。關鍵詞：響應式設計；傳統(tǒng)村鎮(zhèn)；虛擬旅游；點云聚類；WebGIS

1 引 言

中國散布著眾多的傳統(tǒng)村鎮(zhèn)，作為傳統(tǒng)文化的綜合載體，是承載“鄉(xiāng)愁”[1]的最后一座文化堡壘，也是可以造福社會的綜合資源，其中有些村鎮(zhèn)在國內外都享有盛名，成為國內外游客爭相造訪的旅游熱點，如浙江烏鎮(zhèn)，蘇州周莊。

當前我國傳統(tǒng)村鎮(zhèn)旅游開發(fā)正處于方興未艾的階段，但同時也存在不少問題。盧松等人在2005年就提到過江南古鎮(zhèn)旅游容量過度飽和，旅游開發(fā)與遺產(chǎn)保護的沖突[2]；胡躍中等認為我國部分傳統(tǒng)村鎮(zhèn)建筑正面臨著毀滅性的災難[3]。如何解決這一問題，近來有不少學者提出了相關對策：2015年來自地理學、建筑學、旅游學、信息技術等諸多領域的專家學者代表在《中國傳統(tǒng)村鎮(zhèn)協(xié)同保護與發(fā)展的南岳共識》一文中就明確提出要充分利用現(xiàn)代科技手段，廣泛開展傳統(tǒng)村鎮(zhèn)景觀的數(shù)字化保護和三維虛擬展示，鼓勵在此基礎上建立傳統(tǒng)村鎮(zhèn)虛擬博物館和虛擬旅游景區(qū)，促進網(wǎng)絡虛擬旅游產(chǎn)業(yè)的快速發(fā)展，實現(xiàn)低碳、綠色、環(huán)保和資源永續(xù)利用的目的[4]。

伴隨著互聯(lián)網(wǎng)的蓬勃發(fā)展，移動端應用設備也層出不窮，移動設備數(shù)量和種類的增加對于移動端應用的適配性提出了更高要求。為每個應用平臺維護特定應用的做法開發(fā)成本高，資源利用率低。如何讓應用平臺具有良好的自適應性，從而在不同的終端均能保持良好的用戶體驗成為人們關注的問題。Ethan Marcotte在2010年就提出將現(xiàn)有的三種開發(fā)方式(彈性圖片、彈性網(wǎng)格布局，媒體與媒體查詢)進行整合，命名為響應式網(wǎng)頁設計[5]。

本文將“響應式的網(wǎng)頁設計”與“虛擬現(xiàn)實”技術結合起來應用于中國傳統(tǒng)村鎮(zhèn)Web平臺，通過一套代碼，實現(xiàn)跨平臺、跨設備的傳統(tǒng)村鎮(zhèn)在線虛擬旅游，相關技術手段和方法對中國傳統(tǒng)村鎮(zhèn)文化的傳播、共享、挖掘具有積極意義。

2 系統(tǒng)的設計與實現(xiàn)

2.1 架構設計

中國傳統(tǒng)村鎮(zhèn)虛擬旅游Web平臺采用C/S與B/S混合架構模式。系統(tǒng)后端采用C/S模式，實現(xiàn)傳統(tǒng)村鎮(zhèn)專題數(shù)據(jù)的更新、管理、維護、發(fā)布，同時前臺注冊用戶也可對后臺多媒體數(shù)據(jù)進行局部更新，前端采用B/S架構。系統(tǒng)總體軟件體系結構如圖1所示。

圖1 系統(tǒng)體系結構

2.2 傳統(tǒng)村鎮(zhèn)數(shù)據(jù)的組織與設計

系統(tǒng)數(shù)據(jù)庫主要對傳統(tǒng)村鎮(zhèn)矢量、屬性與多媒體數(shù)據(jù)進行高效管理，從而實現(xiàn)數(shù)據(jù)共享服務的目的。系統(tǒng)數(shù)據(jù)庫分為空間、屬性數(shù)據(jù)庫，二者之間通過唯一的ID標識號進行關聯(lián)，從而實現(xiàn)二庫之間的動態(tài)互訪，其中空間數(shù)據(jù)庫主要存儲傳統(tǒng)村鎮(zhèn)的點數(shù)據(jù)，中國省級行政區(qū)劃圖，屬性數(shù)據(jù)庫主要存儲傳統(tǒng)村鎮(zhèn)所屬的省、市、縣、鄉(xiāng)、村行政區(qū)劃數(shù)據(jù)、多媒體數(shù)據(jù)、三維模型數(shù)據(jù)、傳統(tǒng)村鎮(zhèn)類型等信息，具體如圖2所示。

圖2 數(shù)據(jù)組織結構

2.3 系統(tǒng)功能設計

平臺將WebGIS技術、虛擬現(xiàn)實、面向多設備響應式設計技術應用于中國傳統(tǒng)村鎮(zhèn)虛擬旅游平臺的建設，開發(fā)出的傳統(tǒng)村鎮(zhèn)虛擬旅游Web平臺向用戶提供基于傳統(tǒng)村鎮(zhèn)位置的LBS服務，包括圖文、視頻、全景照片以及三維虛擬游覽[6，7]。通過模擬實景，構建一個虛擬的三維立體旅游環(huán)境，讓愛好傳統(tǒng)村鎮(zhèn)的相關人員在家就能進行虛擬游覽。不僅如此，考慮到用戶實地旅游的需要，平臺基于國內百度地圖，提供基于傳統(tǒng)村鎮(zhèn)位置的食、住、行，加油站查找，天氣查詢等服務，系統(tǒng)的總體功能如圖3所示，系統(tǒng)主界面如圖4所示：

圖3 系統(tǒng)功能結構

圖4 系統(tǒng)主界面

2.4 平臺核心功能模塊

(1)傳統(tǒng)村鎮(zhèn)信息查詢模塊：

通過該模塊，系統(tǒng)能方便快捷以圖形和屬性(傳統(tǒng)村鎮(zhèn)名稱、地點、類型)兩種方式交互式查詢傳統(tǒng)村鎮(zhèn)的信息，并能自動定位到該村鎮(zhèn)。

(2)虛擬旅游模塊：

平臺中的虛擬旅游模塊通過ArcGIS CityEngine參數(shù)化批量建模搭建。三維場景中融合了傳統(tǒng)村鎮(zhèn)周邊地形數(shù)據(jù)、高分辨影像數(shù)據(jù)、傳統(tǒng)村鎮(zhèn)的矢量數(shù)據(jù)以及建筑物、道路等的紋理數(shù)據(jù)，真實再現(xiàn)現(xiàn)實場景。用戶瀏覽器只需支持WebGL圖形渲染即可瀏覽，無須安裝任何多余的插件，效果如圖5所示。

圖5 傳統(tǒng)村鎮(zhèn)三維模型

系統(tǒng)不僅可以實現(xiàn)傳統(tǒng)村鎮(zhèn)三維模型的在線虛擬游覽，考慮到實際情況需要(用戶終端硬件與網(wǎng)絡環(huán)境限制)，系統(tǒng)也可采用全景照片對村鎮(zhèn)實景進行三維顯示。通過利用開源的Javascript類庫three.js，平臺支持免插件式的全景照片實時360°旋轉，放大縮小，具有較好的用戶體驗感，效果如圖6所示。

圖6 傳統(tǒng)村鎮(zhèn)全景照片

(3)生活信息服務模塊

平臺通過調用百度地圖API來實現(xiàn)傳統(tǒng)村鎮(zhèn)周圍生活服務信息[8]，如銀行、美食、酒店、加油站等設施的查詢和定位，也可提供基于傳統(tǒng)村鎮(zhèn)位置的專題導航服務，為游客線下旅游提供一站式服務。

3 關鍵技術

3.1 依比例尺的點云聚類處理

中國傳統(tǒng)村鎮(zhèn)數(shù)量較多，目前已統(tǒng)計 1 500余處，在Web前端特別是智能手機上一次加載并全部顯示勢必極大影響前端顯示的效率以及可讀性。平臺采用聚類算法，根據(jù)當前地圖比例尺，將像素距離在閾值范圍內的傳統(tǒng)村鎮(zhèn)點聚合為類，各類別點集的均值坐標作為該類最終聚合點位坐標，效果如圖7所示。像素距離閾值threshold[9]依據(jù)式(1)確定。其中A、B分別為設定聚類圖標的長度和高度。

(1)

圖7 智能手機顯示效果

3.2 面向多設備的響應式設計

隨著移動互聯(lián)網(wǎng)的快速發(fā)展，智能手機以及平板電腦的硬件價格迅速下降，小型設備用戶呈現(xiàn)噴涌增長的態(tài)勢。系統(tǒng)應用Bootstrap開發(fā)框架的柵格系統(tǒng)進行布局，實現(xiàn)一套程序代碼兼容各種硬件設備，包括大屏幕(大型桌面顯示器)、中等屏幕(普通桌面顯示器)、小屏幕(平板電腦)、超小屏幕(智能手機)。系統(tǒng)主界面通過柵格布局分成三行，效果如圖7所示。

4 結 論

本文將基礎地理信息與中國傳統(tǒng)村鎮(zhèn)專題數(shù)據(jù)相結合，利用WebGIS技術較好地解決了中國傳統(tǒng)村鎮(zhèn)空間信息混亂、旅游服務信息匱乏的現(xiàn)狀，結合將當今流行的響應式設計技術，實現(xiàn)了一套程序代碼自適應響應多類硬件終端顯示。系統(tǒng)不僅提供了基于傳統(tǒng)村鎮(zhèn)位置的多媒體服務，生活信息服務，而且還提供了傳統(tǒng)村鎮(zhèn)的三維虛擬旅游服務，系統(tǒng)對中國傳統(tǒng)村鎮(zhèn)文化的傳播、共享、挖掘具有積極推動和示范作用。

[1] 劉沛林. 新型城鎮(zhèn)化建設中“留住鄉(xiāng)愁”的理論與實踐探索[J]. 地理研究，2015，34(7)：1205～1212.

[2] 盧松，陸林，徐茗. 我國傳統(tǒng)村鎮(zhèn)旅游研究進展[J]. 人文地理，2005(5)：76～79+42.

[3] 胡躍中. 淺議楠溪江風景名勝區(qū)資源保護與利用[J]. 旅游學刊，2001(3)：44～47.

[4] 中國傳統(tǒng)村鎮(zhèn)協(xié)同保護與發(fā)展的南岳共識[N]. 地理學報，2015，12：2057.

[5] Hirayu H，Ojika T，Kijima R. Constructing the historic villages of Shirakawa-go in virtual reality[J]. IEEE Multimedia，2000，7(2)：61～64.

[6] 張小萍，薛駿蜂，王君澤等. 基于VR的建筑物仿真與交互技術[J]. 測繪科學，2011(5)：162～164+230.

[7] 杜傳明. 百度地圖API在小型地理信息系統(tǒng)中的應用[J]. 測繪與空間地理信息，2011(2)：152～153+156.

[8] 趙恩來，郝文寧，趙水寧等. 改進的基于密度方法的態(tài)勢聚類顯示算法[J]. 計算機工程，2010，18：35～37+40.

The Responsive Design and Implementation for the Traditional Villages and Towns’ Virtual Tourism Platform

Yan Jinbiao，Deng Yunyuan，Liu Yuan，Zheng Wenwu，Yin Chao，He Qinghua

(Hengyang Normal University Cooperative Innovation Center for Digitalization of Cultural Heritage in Ancient Villages and Towns ，Hengyang 421002，China)

China retains a large number of traditional villages and towns with high resource value. For the problem of spatial and attribute information inquiry difficulty，lacking of tourism service information，this paper builds the virtual tourism WebGIS platform of Chinese Traditional Villages and Towns by using responsive web design and virtual reality technology. The system can adapt to a variety of hardware devices through a set of program codes. Not only can provide life information services，such as pictures，videos，food，hotels，parking and navigation based on traditional villages and towns’ location，but also it can provide panoramic photos and online virtual tour service. The system has a certain effect on the dissemination，sharing and excavation of the traditional villages and towns’ culture in China.

responsive design；traditional villages and towns；virtual tour；point cloud cluster

1672-8262(2017)03-31-04

P208.2

A

2017—03—07

顏金彪(1987—)，男，碩士，助教，主要從事3S技術在傳統(tǒng)村鎮(zhèn)中的數(shù)字化保護研究。 通訊作者：鄭文武(1977—)，男，博士，副教授，主要研究方向：遙感與GIS在文化遺產(chǎn)保護中的應用。

衡陽師范學院青年基金項目(16A01)；國家自然科學基金項目(41271167，41471118)；湖南省社會科學規(guī)劃項目(13YBB032)