李 政，王金平，劉明遠(yuǎn)，耿永烈，張 琛

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

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

1.1 Google地圖服務(wù)

Google地圖是Google公司提供的免費(fèi)WebGIS應(yīng)用服務(wù)，隨著網(wǎng)絡(luò)技術(shù)的日漸發(fā)展，提供了地圖、定位、街景等多項(xiàng)網(wǎng)絡(luò)服務(wù)。Google地圖在開(kāi)放其網(wǎng)絡(luò)服務(wù)的同時(shí)，還提供了面向網(wǎng)絡(luò)開(kāi)發(fā)用戶(hù)的地圖客戶(hù)端應(yīng)用開(kāi)發(fā)接口(Application Programming Interface)，通過(guò) Google Maps API技術(shù)，用戶(hù)可以利用現(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()類(lèi)提供了geocode()方法用于解析給定地址的地理經(jīng)緯度坐標(biāo)。通過(guò)在回調(diào)函數(shù)中查閱status狀態(tài)來(lái)判斷是否解析成功，解析成功后進(jìn)一步獲得該位置的地理經(jīng)緯度坐標(biāo)。

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

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

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

2 建筑設(shè)計(jì)教學(xué)的特點(diǎn)

2.1 設(shè)計(jì)教學(xué)的實(shí)例分析特點(diǎn)

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

2.2 設(shè)計(jì)教學(xué)的空間分析特點(diǎn)

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

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

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

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

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

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

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

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

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

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

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

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

4 結(jié) 論

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

圖2 室外街景視圖

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

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

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

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

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

［5］ 李政，于張紅，耿永烈，等.基于Google地圖的高校房地產(chǎn)資源管理信息系統(tǒng)［J］.河北科技師范學(xué)院學(xué)報(bào):自然科學(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é)任編輯:石瑞珍)