淺析實景三維與網頁技術在片區多維度空間表現的應用
——基于傾斜攝影技術的實景三維網絡地圖構建與研究

文/廣東工業大學 馮鴻斌 劉旭紅 郭鵬燕 楊 藝

圖1 實景三維地圖

一、國內網絡地圖產品概況

當下國內民用地圖行業百花齊放，主流產品有百度地圖、高德地圖、谷歌地圖、e都市、我秀中國等。其中有不少提供了三維地圖與街景功能，如百度、高德在三維模式下能看到較為簡潔的建筑白模型與空間環境關系，也有沿城市主要道路拍攝的街景全景。谷歌地圖中能看到帶有衛星圖紋理的地表三維模型，城市中重要的建筑也配有實景三維模型。e都市中，城市的主要區域建有虛擬三維模型，使用者能在固定的角度瀏覽觀看。我秀中國則是匯總了全國各大城市拍攝的重要節點全景圖。[1]雖說每個地圖有其自身的特色，但并沒有一款真正意義的以實景三維模型為基礎的地圖產品，市面上地圖產品的三維模式，多少都會存在諸如建筑白色模型表現力低(百度、高德)、建筑實景模型信息缺失嚴重(谷歌)、城市三維模型范圍有限(e都市)等問題。另外在街景方面，也有諸如社區級別道路街景信息缺失的問題。

二、產品與各部分介紹

1.項目基本概況

在這樣的時代與行業背景下，基于傾斜攝影技術相應特點，結合我們所參與的大學生創新創業訓練項目，作出通過無人機傾斜攝影技術，航拍建模得到的實景三維模型的嘗試，并圍繞此實景三維模型建立一個以實景信息為主、覆蓋范圍較小的網頁地圖，以此解決一平方公里范圍內，需要全面、精細展現實景三維信息、街景信息、傳統平面地圖信息的區域對定制化網絡地圖的使用需求。網頁地圖平臺主要包含三個部分，三維實景地圖部分，全景地圖部分與平面地圖部分，三個部分互相結合，能較好地達到我們預期的效果。

2.實景三維網頁地圖部分

實景三維網頁地圖部分(圖1)主要采用無人機航拍傾斜攝影建模技術來實現，采用自旋翼無人機或滑翔翼無人機搭載多角度多相機云臺，按照預定飛行航線定點、定時拍攝多角度的圖像信息，[2]然后通過相應軟件如Smart3D Capture、PhotoMesh、等進行三維建模得到等比例的實景三維模型。[3]

模型能夠通過家用計算機的網頁瀏覽器加載，無需安裝插件。用戶可以通過鼠標操控瀏覽器放大、縮小、旋轉模型，通過較為自由的觀察方式直觀了解該區域的實際面貌、建筑外觀、景觀環境質量等不同層次的信息。

3.全景網頁地圖部分

全景網頁地圖部分也稱360度全景地圖，全景環視地圖，全景拍攝技術是通過數碼相機定點對周邊現有環境環視拍攝多角度圖像后，通過計算機軟件拼接形成球形或環形相片、最后通過播放器加載播放的技術。[4]

作為實景三維地圖部分的一種補充，全景地圖部分能很好地彌補傾斜攝影技術短板帶來的人視點角度上表達的不足。無人機傾斜攝影雖然能夠生成較為真實的鳥瞰模型，但由于場地內建筑、樹木相互遮擋，不可避免地導致一些拍攝盲區的生成，進而導致生成錯誤的模型，這些錯誤會在低視角觀察模型的時候暴露出來。我們選擇在人視高度(地面以上1.70M)拍攝全景照片作為場地低視角空間表達的彌補。

4.二維平面網頁地圖部分

平面地圖部分(圖2)由區域內場地總平面圖與建筑物各層室內平面圖組成。不僅能表達區域內道路、建筑、廣場與綠化之間的關系，也能查閱到各個建筑樓層內房間的分布情況。

準確客觀地表達場地內部信息是地圖必不可少的要素，傳統的二維平面地圖在準確性與客觀性上仍然有著不可替代的優勢。

圖2 平面地圖頁面(圖片來源:作者自繪)

三、各個部分的制作方法

以廣東工業大學大學城校區教學區部分作為實例進行說明。

1.三維實景模型部分

建模部分采用了無人機航拍傾斜攝影建模技術來獲得實景三維模型。使用鴻鵬的AC1200型號無人機搭載著AP5600型號的云臺，建模軟件采用Smart3D Capture 與3ds Max。

表1 硬件設備性能與參數表

建模外業部分：(1)根據項目的具體要求，規劃航線，選擇合適的起飛與返航點，用鴻鵬公司配給的平板電腦作為地面站，在航線設定軟件里按照要求設定飛行航線。(2)為保證模型邊緣的建模質量，邊緣航線應在模型對應邊界的基礎上向外擴展等同于飛行高度的水平距離，同時拍攝區域內航向重疊和旁向重疊應大于70%，以保證區域內模型的完整。[5]

建模內業部分：(1)從云臺和飛行器上分別下載圖像資料與坐標信息，將圖像存儲路徑與飛行坐標、控制點坐標按照軟件要求的格式在exalt中錄入。(2)快速空中三角測量采樣率按照25%左右設置，加快空中三角測量的速度。控制點坐標之前，需要在坐標系統中選取與控制點坐標系相對應的坐標系。刪除外圍殘缺無效的模型信息，然后進行分瓦片運算，瓦片越小，占用電腦RAM的使用量就越少。[6](3)Smart 3D軟件可輸出多種格式的模型文件，常用的三維模型格式有S3C、OSGB、OBJ等，OBJ格式能通過RHINO、3DS MAX等多種建筑學常用軟件讀取，編輯方便。(4)將從SMART 3D 軟件導出的模型加載入3DS MAX 進行模型處理。

網頁部分是基于webGL，WebGL通過把JavaScript和OpenGL ES 2.0結合在一起，可以為HTML5 Canvas提供硬件3D加速渲染，通過HTML腳本本身實現Web交互式三維動畫的制作，無需任何瀏覽器插件支持,在瀏覽器里更流暢地展示3D場景和模型，創建復雜的導航和數據視覺化。在實際開發中利用了基于JavaScript編寫的WebGL第三方庫three.js。Three.js 是一款運行在瀏覽器中的 3D 引擎，通過調用three.js的方法進行模型的渲染，材質的加載，場景的構建等，在平臺可以對模型進行拖動、旋轉、放大縮小。具體實現是根據3DS MAX軟件導出obj 文件、mtl 文件和貼圖，利用three.js的THREE.OBJLoader()和THREE.OBJMTLLoader()方法對obj 文件、mtl 文件和貼圖進行加載；進一步利用three.js的orbit controls插件(軌道控制)控制模型交互動作，可以通過鼠標拖拽模型進行放大縮小、等動作。

2.全景網頁地圖部分

相機采用理光牌 THETA SC 型號360度全景攝像數碼相機，分辨率1400×700，輸出格式HTLM5。在區域內室內外具有代表性、標示性的地點按照人視點1.70m高度放置相機，模擬人在場景中真實的視覺感受。

全景網頁地圖部分，首先使用Pano2VR全景圖像轉換應用軟件將球形全景圖轉換成HTML5格式的文件，通過絕對定位在背景地圖上設置相應的位置圖標，使用HTML的標簽鏈接到對應的全景網頁，實現點擊相應位置跳轉到具體的全景圖頁面，在全景圖頁面可以通過鼠標對全景圖進行放大縮小和旋轉。

3.二維平面網頁地圖部分

采用AUTO CAD描圖得到線稿，配合PHOTOSHOP 軟件對房間與室內外分區按照功能布局填充不同顏色并標注文字。描圖的圖底可向該區域內基建部索要留檔的建筑結構施工圖。由于使用者并非建筑類專業人員，對精度要求不高，描繪的過程可對施工圖進行一定程度的簡化。

平面網頁地圖部分，通過將背景圖片設置為：background-size:100% 100%;background-attachment:fixed;width:100%;height:100%;overflow:hidden;使背景地圖可以自適應屏幕大?。皇褂媒^對定位在背景地圖上設置相應的位置圖標，引入swiper插件將對應位置的不同樓層的平面圖以輪播圖的形式展示在網頁上，用戶可以點擊頁面的左右箭頭對不同樓層的平面圖進行切換查看；通過jQuery設置輪播圖的display屬性實現點擊位置圖標顯示對應的各個樓層的平面圖。

四、發展前景

1.產品特色

基于傾斜攝影技術的實景三維網絡地圖平臺相比現有的網絡地圖模式，可更加真實、準確、全面、多角度地讓使用者了解到該區域范圍內的建筑、交通與環境情況。在整合多維度信息后，該平臺既能承擔傳統的地圖職能，同時在三維空間還原與表達方面有著不可替代的優勢。另外，基于制作流程短，成果的形式與質量可調性強等特點，該平臺能夠較好地實現定制化服務。

2.應用方向

(1)公司、校園、園區與廠區介紹方面，地圖平臺能為觀眾多維度、多角度地真實呈現園區實景風貌，觀眾足不出戶就能客觀地了解到區域內的情況，也可以插入動畫介紹頁面，以視頻的形式帶領觀眾感受區域風貌。另外，在市政管理層面，亦可以將相關技術圖紙上傳至網頁平臺，有需要時相關工種能直接下載使用，提高工作效率。

(2)房地產宣傳介紹方面，在原有實景三維網絡地圖平臺的基礎上，增加戶型平面圖和室內全景圖。相比于效果圖與沙盤模型等傳統的宣傳方式，網絡地圖平臺一方面能夠將多維度信息高度整合，方便消費者瀏覽，同時實景化的表達也能避免房地產商對其產品的后期美化，高度還原產品原貌。

(3)應用于實施鄉村振興戰略。把實景三維網絡地圖平臺作為建設與改造方案的展示平臺，讓片區的居民群眾及時地了解并參與到當地政府的項目中，引導居民積極參與鄉村、街道改進。同時，對日后從事古建筑保護與修繕、城市更新設計項目，都積累了信息技術應用的寶貴經驗。

五、尚待解決的問題

(1)自旋翼無人機續航持續時間較短，對建模面積帶來一定的限制。[7]市面上較為普及的民用無人機類型為電力驅動的自旋翼無人機，此類無人機單個航程時間在20～30分鐘范圍內，根據飛行高度的不同，單一航程的覆蓋面積大約控制在500～600平方米上下，此類無人機并不適合城市尺度的大范圍傾斜攝影使用。

(2)Smart 3D軟件生成的三維模型較大，雖然本機能較為輕松地加載，但仍要經過其他軟件后期壓縮才能在瀏覽器上加載。本次嘗試使用了RHINO 與 3DS MAX 這兩款軟件，前者雖然能支持大批量導入obj文件，但導出的模型與貼圖信息不能匹配，導致瀏覽器貼圖加載錯誤。后者雖然不支持大批量導入obj文件，但壓縮后導出的模型文件貼圖正常。由于初始模型過于龐大，需要經歷多次壓縮后方可在瀏覽器上加載，成果精度較低。

本文為相關行業的從業者提供了一種新的可行的解決方案，但該方案仍需進一步完善與提升，為消費者提供一種全新的、優質的地圖使用體驗。[8]