基于Google街景視圖的建筑設(shè)計教學(xué)模式

李 政，王金平，劉明遠，耿永烈，張 琛

(河北科技師范學(xué)院城市建設(shè)學(xué)院，河北秦皇島，066004)

1 Google地圖服務(wù)和街景視圖

1.1 Google地圖服務(wù)

Google地圖是Google公司提供的免費WebGIS應(yīng)用服務(wù)，隨著網(wǎng)絡(luò)技術(shù)的日漸發(fā)展，提供了地圖、定位、街景等多項網(wǎng)絡(luò)服務(wù)。Google地圖在開放其網(wǎng)絡(luò)服務(wù)的同時，還提供了面向網(wǎng)絡(luò)開發(fā)用戶的地圖客戶端應(yīng)用開發(fā)接口(Application Programming Interface)，通過 Google Maps API技術(shù)，用戶可以利用現(xiàn)有地圖資源和服務(wù)，形成混搭(Mashup)模式的自主網(wǎng)絡(luò)應(yīng)用?；贕oogle Maps的混搭應(yīng)用具有圖1所示的網(wǎng)絡(luò)組成結(jié)構(gòu)和硬件要求。

圖1 Google Maps混搭應(yīng)用的系統(tǒng)網(wǎng)絡(luò)組成結(jié)構(gòu)

1.2 街景視圖相關(guān)API

1.2.1 Google地圖的地理位置解析 google.maps.Geocoder()類提供了geocode()方法用于解析給定地址的地理經(jīng)緯度坐標(biāo)。通過在回調(diào)函數(shù)中查閱status狀態(tài)來判斷是否解析成功，解析成功后進一步獲得該位置的地理經(jīng)緯度坐標(biāo)。

1.2.2 創(chuàng)建 StreetViewPanorama 對象 google.maps.StreetViewPanorama(div_id，panoramaOptions)用于創(chuàng)建街景視圖，函數(shù)中div id對應(yīng)頁面中的div容器id，panoramaOptions參數(shù)用于規(guī)定街景視圖的初始設(shè)置，范例如下:

1.2.3 創(chuàng)建Google Map對象 google.maps.Map(div_id，mapOptions)用于創(chuàng)建地圖對象，函數(shù)中div_id對應(yīng)頁面中的div容器id，mapOptions參數(shù)用于規(guī)定Google地圖的初始設(shè)置，范例如下:

1.2.4 StreetViewPanorama對象的visible_changed事件 該事件用于控制街景視圖的顯示，當(dāng)將街景視圖標(biāo)記(Pegman)放置或拖離地圖時會觸發(fā)該類事件，如果地圖中存在對應(yīng)的街景視圖，系統(tǒng)顯示街景視圖，否則將顯示對應(yīng)的圖片搜索結(jié)果。該事件通過google.maps.event.addListener(panorama，"visible_changed"，function(){……})來綁定，通過判斷panorama的visible屬性來切換顯示。

2 建筑設(shè)計教學(xué)的特點

2.1 設(shè)計教學(xué)的實例分析特點

建筑設(shè)計類課程需要大量的設(shè)計實例作為分析對象，特別是一些著名的建筑設(shè)計實例，有許多周密而巧妙的構(gòu)思，通過對這些實例進行分析來設(shè)計教學(xué)，可以直觀地給學(xué)生展現(xiàn)設(shè)計大師在環(huán)境處理、體量規(guī)模、立體造型、功能分析、空間組合、立面設(shè)計、材料應(yīng)用等各方面的設(shè)計思路和處理手法，進而開闊學(xué)生的眼界，激發(fā)學(xué)生的創(chuàng)造力和設(shè)計靈感。通過對建筑案例各方面的分析，引導(dǎo)學(xué)生進入自己的設(shè)計思路，通過賞析“大家”的代表建筑，讓學(xué)生切實感受到設(shè)計的魅力。增強學(xué)生的知識面和綜合素質(zhì)，提高設(shè)計動手能力和學(xué)習(xí)的樂趣。

2.2 設(shè)計教學(xué)的空間分析特點

傳統(tǒng)建筑設(shè)計教學(xué)大量采用照片和工程圖來分析建筑物的空間組合特點，不具有動態(tài)觀察和瀏覽的功能，無法真實體會三維甚至四維的空間感覺，而設(shè)計教學(xué)中通過街景視圖形成場景，不是孤立的建筑圖片，可以將建筑很好地與環(huán)境場景結(jié)合，形成全方位的賞析效果，可以更透徹地體現(xiàn)設(shè)計師的分析判斷過程和設(shè)計思想的形成，從而給學(xué)生以身臨其境的設(shè)計感受，有助于對設(shè)計理念的消化理解。設(shè)計教學(xué)的空間分析可以激發(fā)學(xué)生的創(chuàng)作熱情，對于動手制作模型、進行合理的空間尺度分析、建筑與環(huán)境協(xié)調(diào)處理等環(huán)節(jié)教學(xué)有很大的幫助。

2.3 教學(xué)資料的版權(quán)和條件限制

工程實例受專業(yè)資料版權(quán)限制，學(xué)生無法免費獲得相關(guān)資料，再加上地域和資源限制，教師和學(xué)生無法到實地采集著名建筑實例的相關(guān)資料。現(xiàn)代網(wǎng)絡(luò)技術(shù)提供了免費的資源和組織虛擬建筑游覽的條件，通過Google街景視圖服務(wù)，可以查詢美國、法國、德國、中國香港等全球50多個國家和地區(qū)的大量優(yōu)秀建筑實例的圖像數(shù)據(jù)，雖然存在隱私爭議，但其免費開放的特點，為拓寬專業(yè)學(xué)生視野，豐富設(shè)計教學(xué)內(nèi)容，充分利用網(wǎng)絡(luò)資源，改進實踐教學(xué)手段，提高學(xué)生主動學(xué)習(xí)能力創(chuàng)造了條件。

3 建筑游覽的設(shè)計與實現(xiàn)

3.1 建筑游覽的功能設(shè)計

通過建筑實例名稱和地址信息解析項目位置經(jīng)緯度，如果不存在該位置坐標(biāo)，那么轉(zhuǎn)到默認(rèn)的位置，否則查找并展示該地點的街景和環(huán)境平面視圖，如果不存在街景視圖，那么展示對應(yīng)于建筑實例名稱的圖像數(shù)據(jù)和環(huán)境平面視圖。

3.2 建筑游覽功能的調(diào)用和實例

Google街景提供2種不同的視圖，室外街景和全景視圖。室外街景以沿道路移動視點為參考，形成可以游覽的建筑景觀，提供建筑實例和空間環(huán)境體驗，全景視圖以視點為中心，向四周環(huán)視形成360°全方位視圖。以香港的中國銀行大廈為例(圖2)，為室外街景模式。系統(tǒng)在右側(cè)顯示環(huán)境平面或軸測視圖，在左側(cè)顯示游覽視圖，通過游覽視圖的道路指向或平面視圖上的Pegman位置來展示建筑周邊環(huán)境、空間體量和設(shè)計細(xì)節(jié)。而中國國家博物館位置(圖3)，為全景視圖模式。系統(tǒng)在左側(cè)顯示博物館1樓大廳的內(nèi)部視圖，博物館的外部空間環(huán)境只能在右側(cè)的平面視圖上獲得。目前，室內(nèi)全景模式資源較少，使用上受到一定限制。對于沒有對應(yīng)街景視圖的地點，系統(tǒng)采用和建筑名稱匹配的網(wǎng)絡(luò)圖片來進行信息展示。

3.3 建筑游覽關(guān)鍵技術(shù)的實現(xiàn)

3.3.1 頁面URL參數(shù)的獲得 在動態(tài)網(wǎng)頁技術(shù)中，通常可以通過URL參數(shù)獲得查詢參數(shù)等信息，在html頁面設(shè)計中，同樣可以利用Javascript代碼分析URL，獲得相關(guān)的信息。本設(shè)計采用GET方式提交表單信息，所以需要一段Javascript代碼解析URL字符串，獲得相應(yīng)的參數(shù)數(shù)據(jù)。示例如下:

3.3.2 頁面代碼異步加載 異步加載Google API可以減輕由于網(wǎng)絡(luò)加載而帶來的頁面顯示延遲，這樣預(yù)先設(shè)計好的頁面總是先顯示出來，然后再將網(wǎng)絡(luò)數(shù)據(jù)更新到頁面。異步加載技術(shù)緩解了用戶等待的焦慮情緒，提高了網(wǎng)絡(luò)應(yīng)用的用戶體驗。本設(shè)計中通過使用異步加載技術(shù)在頁面文件頭中動態(tài)插入一段Google API引用代碼，利用引用中的回調(diào)(callback)參數(shù)指定Google API加載完成后要運行的函數(shù)initialize()，再執(zhí)行頁面數(shù)據(jù)更新任務(wù)。異步加載Google API函數(shù)及代碼如下:

3.3.3 街景視圖的判斷 地圖中的街景視圖標(biāo)記(Pegman)被拖動時，會觸發(fā)panorama對象的visible_changed事件，事件過程中通過對panorama對象Visible屬性的判斷，獲得街景視圖標(biāo)記(Pegman)位置是否有對應(yīng)的街景視圖，然后進行不同的處理。街景視圖顯示變更事件代碼如下:

4 結(jié) 論

網(wǎng)絡(luò)信息的多樣化，給基于項目位置的設(shè)計實踐教學(xué)工作帶來了很大的便利，同時也存在信息源龐雜格式多樣，篩選條件設(shè)置復(fù)雜，查找可利用信息困難等問題。通過建筑游覽設(shè)計可以充分利用免費的全球50多個國家和地區(qū)500萬英里的建筑相關(guān)圖像數(shù)據(jù)，通過建筑實例名稱自動解析項目地理位置，給出合適的展示視圖，使網(wǎng)絡(luò)資源更好地服務(wù)設(shè)計教學(xué)。該設(shè)計把建筑設(shè)計理論和典型設(shè)計實例結(jié)合起來，使教學(xué)內(nèi)容不斷更新、不斷細(xì)化、不斷實例化，把教學(xué)過程和現(xiàn)代技術(shù)創(chuàng)新結(jié)合起來，使教學(xué)方法不斷簡化、不斷豐富、不斷高效化。通過精品課程資源建設(shè)和設(shè)計實踐教學(xué)的運用，達到了提高學(xué)生學(xué)習(xí)主觀能動性的目的，形成了一個新的自主學(xué)習(xí)模式和環(huán)境。

圖2 室外街景視圖

圖3 室內(nèi)全景視圖

［1］ 李翔.利用虛擬現(xiàn)實技術(shù)進行建筑設(shè)計教學(xué)的創(chuàng)新和發(fā)展［J］.中外建筑，2011(12):63-64.

［2］ 葛翠玉，何培玲.在建筑設(shè)計教學(xué)中培養(yǎng)學(xué)生自主學(xué)習(xí)能力的探討［J］.高等建筑教育，2010，19(6):46-48.

［3］ 孫一民，肖毅強，王國光.關(guān)于“建筑設(shè)計教學(xué)體系”構(gòu)建的思考［J］.城市建筑，2011(3):32-34.

［4］ 李世芬，丁曉博.案例教學(xué)法在建筑設(shè)計教學(xué)中的轉(zhuǎn)換與應(yīng)用［J］.河北師范大學(xué)學(xué)報:教育科學(xué)版，2008，10(10):124-126.

［5］ 李政，于張紅，耿永烈，等.基于Google地圖的高校房地產(chǎn)資源管理信息系統(tǒng)［J］.河北科技師范學(xué)院學(xué)報:自然科學(xué)版，2009，23(3):1-4，28.

［6］ Google.Google Maps JavaScript API v3［EB/OL］.2013-2-1.http://developers.google.com/maps/documentation/javascript/.

［7］ 楊立法.基于Google Maps API V3的地理數(shù)據(jù)采集技術(shù)［J］.遙感技術(shù)與應(yīng)用，2013，28(5):791-798.

［8］ Wiki.Google街景 －維基百科［EB/OL］.2014-1-8.http://zh.wikipedia.org/wiki/Google街景.

(責(zé)任編輯:石瑞珍)