响应式Web技术的传统村镇虚拟旅游平台设计与实现

颜金彪，邓运员，刘媛，郑文武，尹超，何清华

(衡阳师范学院 古村古镇文化遗产数字化传承协同创新中心，湖南 衡阳 421002)

响应式Web技术的传统村镇虚拟旅游平台设计与实现

颜金彪*，邓运员，刘媛，郑文武，尹超，何清华

(衡阳师范学院 古村古镇文化遗产数字化传承协同创新中心，湖南 衡阳 421002)

中国保存数量众多、资源价值较高的传统村镇。针对其空间和属性信息查询困难、旅游服务信息匮乏的问题，本文应用响应式网页设计与虚拟现实等技术搭建了中国传统村镇虚拟旅游WebGIS平台，通过一套代码实现多类硬件设备环境的自适应响应调整。系统不仅提供基于传统村镇位置的图文、视频、美食、酒店、停车场、银行及导航等生活信息服务，而且提供传统村镇的全景照片与三维在线虚拟游览服务，对中国传统村镇文化的传播、共享、挖掘具有积极作用。关键词：响应式设计；传统村镇；虚拟旅游；点云聚类；WebGIS

1 引 言

中国散布着众多的传统村镇，作为传统文化的综合载体，是承载“乡愁”[1]的最后一座文化堡垒，也是可以造福社会的综合资源，其中有些村镇在国内外都享有盛名，成为国内外游客争相造访的旅游热点，如浙江乌镇，苏州周庄。

当前我国传统村镇旅游开发正处于方兴未艾的阶段，但同时也存在不少问题。卢松等人在2005年就提到过江南古镇旅游容量过度饱和，旅游开发与遗产保护的冲突[2]；胡跃中等认为我国部分传统村镇建筑正面临着毁灭性的灾难[3]。如何解决这一问题，近来有不少学者提出了相关对策：2015年来自地理学、建筑学、旅游学、信息技术等诸多领域的专家学者代表在《中国传统村镇协同保护与发展的南岳共识》一文中就明确提出要充分利用现代科技手段，广泛开展传统村镇景观的数字化保护和三维虚拟展示，鼓励在此基础上建立传统村镇虚拟博物馆和虚拟旅游景区，促进网络虚拟旅游产业的快速发展，实现低碳、绿色、环保和资源永续利用的目的[4]。

伴随着互联网的蓬勃发展，移动端应用设备也层出不穷，移动设备数量和种类的增加对于移动端应用的适配性提出了更高要求。为每个应用平台维护特定应用的做法开发成本高，资源利用率低。如何让应用平台具有良好的自适应性，从而在不同的终端均能保持良好的用户体验成为人们关注的问题。Ethan Marcotte在2010年就提出将现有的三种开发方式(弹性图片、弹性网格布局，媒体与媒体查询)进行整合，命名为响应式网页设计[5]。

本文将“响应式的网页设计”与“虚拟现实”技术结合起来应用于中国传统村镇Web平台，通过一套代码，实现跨平台、跨设备的传统村镇在线虚拟旅游，相关技术手段和方法对中国传统村镇文化的传播、共享、挖掘具有积极意义。

2 系统的设计与实现

2.1 架构设计

中国传统村镇虚拟旅游Web平台采用C/S与B/S混合架构模式。系统后端采用C/S模式，实现传统村镇专题数据的更新、管理、维护、发布，同时前台注册用户也可对后台多媒体数据进行局部更新，前端采用B/S架构。系统总体软件体系结构如图1所示。

图1 系统体系结构

2.2 传统村镇数据的组织与设计

系统数据库主要对传统村镇矢量、属性与多媒体数据进行高效管理，从而实现数据共享服务的目的。系统数据库分为空间、属性数据库，二者之间通过唯一的ID标识号进行关联，从而实现二库之间的动态互访，其中空间数据库主要存储传统村镇的点数据，中国省级行政区划图，属性数据库主要存储传统村镇所属的省、市、县、乡、村行政区划数据、多媒体数据、三维模型数据、传统村镇类型等信息，具体如图2所示。

图2 数据组织结构

2.3 系统功能设计

平台将WebGIS技术、虚拟现实、面向多设备响应式设计技术应用于中国传统村镇虚拟旅游平台的建设，开发出的传统村镇虚拟旅游Web平台向用户提供基于传统村镇位置的LBS服务，包括图文、视频、全景照片以及三维虚拟游览[6，7]。通过模拟实景，构建一个虚拟的三维立体旅游环境，让爱好传统村镇的相关人员在家就能进行虚拟游览。不仅如此，考虑到用户实地旅游的需要，平台基于国内百度地图，提供基于传统村镇位置的食、住、行，加油站查找，天气查询等服务，系统的总体功能如图3所示，系统主界面如图4所示：

图3 系统功能结构

图4 系统主界面

2.4 平台核心功能模块

(1)传统村镇信息查询模块：

通过该模块，系统能方便快捷以图形和属性(传统村镇名称、地点、类型)两种方式交互式查询传统村镇的信息，并能自动定位到该村镇。

(2)虚拟旅游模块：

平台中的虚拟旅游模块通过ArcGIS CityEngine参数化批量建模搭建。三维场景中融合了传统村镇周边地形数据、高分辨影像数据、传统村镇的矢量数据以及建筑物、道路等的纹理数据，真实再现现实场景。用户浏览器只需支持WebGL图形渲染即可浏览，无须安装任何多余的插件，效果如图5所示。

图5 传统村镇三维模型

系统不仅可以实现传统村镇三维模型的在线虚拟游览，考虑到实际情况需要(用户终端硬件与网络环境限制)，系统也可采用全景照片对村镇实景进行三维显示。通过利用开源的Javascript类库three.js，平台支持免插件式的全景照片实时360°旋转，放大缩小，具有较好的用户体验感，效果如图6所示。

图6 传统村镇全景照片

(3)生活信息服务模块

平台通过调用百度地图API来实现传统村镇周围生活服务信息[8]，如银行、美食、酒店、加油站等设施的查询和定位，也可提供基于传统村镇位置的专题导航服务，为游客线下旅游提供一站式服务。

3 关键技术

3.1 依比例尺的点云聚类处理

中国传统村镇数量较多，目前已统计 1 500余处，在Web前端特别是智能手机上一次加载并全部显示势必极大影响前端显示的效率以及可读性。平台采用聚类算法，根据当前地图比例尺，将像素距离在阈值范围内的传统村镇点聚合为类，各类别点集的均值坐标作为该类最终聚合点位坐标，效果如图7所示。像素距离阈值threshold[9]依据式(1)确定。其中A、B分别为设定聚类图标的长度和高度。

(1)

图7 智能手机显示效果

3.2 面向多设备的响应式设计

随着移动互联网的快速发展，智能手机以及平板电脑的硬件价格迅速下降，小型设备用户呈现喷涌增长的态势。系统应用Bootstrap开发框架的栅格系统进行布局，实现一套程序代码兼容各种硬件设备，包括大屏幕(大型桌面显示器)、中等屏幕(普通桌面显示器)、小屏幕(平板电脑)、超小屏幕(智能手机)。系统主界面通过栅格布局分成三行，效果如图7所示。

4 结 论

本文将基础地理信息与中国传统村镇专题数据相结合，利用WebGIS技术较好地解决了中国传统村镇空间信息混乱、旅游服务信息匮乏的现状，结合将当今流行的响应式设计技术，实现了一套程序代码自适应响应多类硬件终端显示。系统不仅提供了基于传统村镇位置的多媒体服务，生活信息服务，而且还提供了传统村镇的三维虚拟旅游服务，系统对中国传统村镇文化的传播、共享、挖掘具有积极推动和示范作用。

[1] 刘沛林. 新型城镇化建设中“留住乡愁”的理论与实践探索[J]. 地理研究，2015，34(7)：1205～1212.

[2] 卢松，陆林，徐茗. 我国传统村镇旅游研究进展[J]. 人文地理，2005(5)：76～79+42.

[3] 胡跃中. 浅议楠溪江风景名胜区资源保护与利用[J]. 旅游学刊，2001(3)：44～47.

[4] 中国传统村镇协同保护与发展的南岳共识[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在小型地理信息系统中的应用[J]. 测绘与空间地理信息，2011(2)：152～153+156.

[8] 赵恩来，郝文宁，赵水宁等. 改进的基于密度方法的态势聚类显示算法[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技术在传统村镇中的数字化保护研究。 通讯作者：郑文武(1977—)，男，博士，副教授，主要研究方向：遥感与GIS在文化遗产保护中的应用。

衡阳师范学院青年基金项目(16A01)；国家自然科学基金项目(41271167，41471118)；湖南省社会科学规划项目(13YBB032)