顏金彪，鄧運(yùn)員，劉媛，鄭文武，尹超，何清華

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

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

顏金彪*，鄧運(yùn)員，劉媛，鄭文武，尹超，何清華

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

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

1 引 言

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

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

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

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

2 系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

2.1 架構(gòu)設(shè)計(jì)

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

圖1 系統(tǒng)體系結(jié)構(gòu)

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

系統(tǒng)數(shù)據(jù)庫主要對傳統(tǒng)村鎮(zhèn)矢量、屬性與多媒體數(shù)據(jù)進(jìn)行高效管理，從而實(shí)現(xiàn)數(shù)據(jù)共享服務(wù)的目的。系統(tǒng)數(shù)據(jù)庫分為空間、屬性數(shù)據(jù)庫，二者之間通過唯一的ID標(biāo)識號進(jìn)行關(guān)聯(lián)，從而實(shí)現(xiàn)二庫之間的動態(tài)互訪，其中空間數(shù)據(jù)庫主要存儲傳統(tǒng)村鎮(zhèn)的點(diǎ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ù)組織結(jié)構(gòu)

2.3 系統(tǒng)功能設(shè)計(jì)

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

圖3 系統(tǒng)功能結(jié)構(gòu)

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

2.4 平臺核心功能模塊

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

通過該模塊，系統(tǒng)能方便快捷以圖形和屬性(傳統(tǒng)村鎮(zhèn)名稱、地點(diǎ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ù)，真實(shí)再現(xiàn)現(xiàn)實(shí)場景。用戶瀏覽器只需支持WebGL圖形渲染即可瀏覽，無須安裝任何多余的插件，效果如圖5所示。

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

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

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

(3)生活信息服務(wù)模塊

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

3 關(guān)鍵技術(shù)

3.1 依比例尺的點(diǎn)云聚類處理

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

(1)

圖7 智能手機(jī)顯示效果

3.2 面向多設(shè)備的響應(yīng)式設(shè)計(jì)

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

4 結(jié) 論

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

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

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

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

[4] 中國傳統(tǒng)村鎮(zhèn)協(xié)同保護(hù)與發(fā)展的南岳共識[N]. 地理學(xué)報(bào)，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的建筑物仿真與交互技術(shù)[J]. 測繪科學(xué)，2011(5)：162～164+230.

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

[8] 趙恩來，郝文寧，趙水寧等. 改進(jìn)的基于密度方法的態(tài)勢聚類顯示算法[J]. 計(jì)算機(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技術(shù)在傳統(tǒng)村鎮(zhèn)中的數(shù)字化保護(hù)研究。 通訊作者：鄭文武(1977—)，男，博士，副教授，主要研究方向：遙感與GIS在文化遺產(chǎn)保護(hù)中的應(yīng)用。

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