基于Google街景视图的建筑设计教学模式

2014-03-02王金平刘明远耿永烈

河北科技师范学院学报 2014年1期

李政，王金平，刘明远，耿永烈，张琛

(河北科技师范学院城市建设学院，河北秦皇岛，066004)

1 Google地图服务和街景视图

1.1 Google地图服务

Google地图是Google公司提供的免费WebGIS应用服务，随着网络技术的日渐发展，提供了地图、定位、街景等多项网络服务。Google地图在开放其网络服务的同时，还提供了面向网络开发用户的地图客户端应用开发接口(Application Programming Interface)，通过 Google Maps API技术，用户可以利用现有地图资源和服务，形成混搭(Mashup)模式的自主网络应用。基于Google Maps的混搭应用具有图1所示的网络组成结构和硬件要求。

图1 Google Maps混搭应用的系统网络组成结构

1.2 街景视图相关API

1.2.1 Google地图的地理位置解析 google.maps.Geocoder()类提供了geocode()方法用于解析给定地址的地理经纬度坐标。通过在回调函数中查阅status状态来判断是否解析成功，解析成功后进一步获得该位置的地理经纬度坐标。

1.2.2 创建 StreetViewPanorama 对象 google.maps.StreetViewPanorama(div_id，panoramaOptions)用于创建街景视图，函数中div id对应页面中的div容器id，panoramaOptions参数用于规定街景视图的初始设置，范例如下:

1.2.3 创建Google Map对象 google.maps.Map(div_id，mapOptions)用于创建地图对象，函数中div_id对应页面中的div容器id，mapOptions参数用于规定Google地图的初始设置，范例如下:

1.2.4 StreetViewPanorama对象的visible_changed事件该事件用于控制街景视图的显示，当将街景视图标记(Pegman)放置或拖离地图时会触发该类事件，如果地图中存在对应的街景视图，系统显示街景视图，否则将显示对应的图片搜索结果。该事件通过google.maps.event.addListener(panorama，"visible_changed"，function(){……})来绑定，通过判断panorama的visible属性来切换显示。

2 建筑设计教学的特点

2.1 设计教学的实例分析特点

建筑设计类课程需要大量的设计实例作为分析对象，特别是一些著名的建筑设计实例，有许多周密而巧妙的构思，通过对这些实例进行分析来设计教学，可以直观地给学生展现设计大师在环境处理、体量规模、立体造型、功能分析、空间组合、立面设计、材料应用等各方面的设计思路和处理手法，进而开阔学生的眼界，激发学生的创造力和设计灵感。通过对建筑案例各方面的分析，引导学生进入自己的设计思路，通过赏析“大家”的代表建筑，让学生切实感受到设计的魅力。增强学生的知识面和综合素质，提高设计动手能力和学习的乐趣。

2.2 设计教学的空间分析特点

传统建筑设计教学大量采用照片和工程图来分析建筑物的空间组合特点，不具有动态观察和浏览的功能，无法真实体会三维甚至四维的空间感觉，而设计教学中通过街景视图形成场景，不是孤立的建筑图片，可以将建筑很好地与环境场景结合，形成全方位的赏析效果，可以更透彻地体现设计师的分析判断过程和设计思想的形成，从而给学生以身临其境的设计感受，有助于对设计理念的消化理解。设计教学的空间分析可以激发学生的创作热情，对于动手制作模型、进行合理的空间尺度分析、建筑与环境协调处理等环节教学有很大的帮助。

2.3 教学资料的版权和条件限制

工程实例受专业资料版权限制，学生无法免费获得相关资料，再加上地域和资源限制，教师和学生无法到实地采集著名建筑实例的相关资料。现代网络技术提供了免费的资源和组织虚拟建筑游览的条件，通过Google街景视图服务，可以查询美国、法国、德国、中国香港等全球50多个国家和地区的大量优秀建筑实例的图像数据，虽然存在隐私争议，但其免费开放的特点，为拓宽专业学生视野，丰富设计教学内容，充分利用网络资源，改进实践教学手段，提高学生主动学习能力创造了条件。

3 建筑游览的设计与实现

3.1 建筑游览的功能设计

通过建筑实例名称和地址信息解析项目位置经纬度，如果不存在该位置坐标，那么转到默认的位置，否则查找并展示该地点的街景和环境平面视图，如果不存在街景视图，那么展示对应于建筑实例名称的图像数据和环境平面视图。

3.2 建筑游览功能的调用和实例

Google街景提供2种不同的视图，室外街景和全景视图。室外街景以沿道路移动视点为参考，形成可以游览的建筑景观，提供建筑实例和空间环境体验，全景视图以视点为中心，向四周环视形成360°全方位视图。以香港的中国银行大厦为例(图2)，为室外街景模式。系统在右侧显示环境平面或轴测视图，在左侧显示游览视图，通过游览视图的道路指向或平面视图上的Pegman位置来展示建筑周边环境、空间体量和设计细节。而中国国家博物馆位置(图3)，为全景视图模式。系统在左侧显示博物馆1楼大厅的内部视图，博物馆的外部空间环境只能在右侧的平面视图上获得。目前，室内全景模式资源较少，使用上受到一定限制。对于没有对应街景视图的地点，系统采用和建筑名称匹配的网络图片来进行信息展示。

3.3 建筑游览关键技术的实现

3.3.1 页面URL参数的获得在动态网页技术中，通常可以通过URL参数获得查询参数等信息，在html页面设计中，同样可以利用Javascript代码分析URL，获得相关的信息。本设计采用GET方式提交表单信息，所以需要一段Javascript代码解析URL字符串，获得相应的参数数据。示例如下:

3.3.2 页面代码异步加载异步加载Google API可以减轻由于网络加载而带来的页面显示延迟，这样预先设计好的页面总是先显示出来，然后再将网络数据更新到页面。异步加载技术缓解了用户等待的焦虑情绪，提高了网络应用的用户体验。本设计中通过使用异步加载技术在页面文件头中动态插入一段Google API引用代码，利用引用中的回调(callback)参数指定Google API加载完成后要运行的函数initialize()，再执行页面数据更新任务。异步加载Google API函数及代码如下:

3.3.3 街景视图的判断地图中的街景视图标记(Pegman)被拖动时，会触发panorama对象的visible_changed事件，事件过程中通过对panorama对象Visible属性的判断，获得街景视图标记(Pegman)位置是否有对应的街景视图，然后进行不同的处理。街景视图显示变更事件代码如下:

4 结论

网络信息的多样化，给基于项目位置的设计实践教学工作带来了很大的便利，同时也存在信息源庞杂格式多样，筛选条件设置复杂，查找可利用信息困难等问题。通过建筑游览设计可以充分利用免费的全球50多个国家和地区500万英里的建筑相关图像数据，通过建筑实例名称自动解析项目地理位置，给出合适的展示视图，使网络资源更好地服务设计教学。该设计把建筑设计理论和典型设计实例结合起来，使教学内容不断更新、不断细化、不断实例化，把教学过程和现代技术创新结合起来，使教学方法不断简化、不断丰富、不断高效化。通过精品课程资源建设和设计实践教学的运用，达到了提高学生学习主观能动性的目的，形成了一个新的自主学习模式和环境。