淺析實景三維與網(wǎng)頁技術在片區(qū)多維度空間表現(xiàn)的應用

馮鴻斌　劉旭紅　郭鵬燕　楊藝

一、國內(nèi)網(wǎng)絡地圖產(chǎn)品概況

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

二、產(chǎn)品與各部分介紹

1.項目基本概況

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

2.實景三維網(wǎng)頁地圖部分

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

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

3.全景網(wǎng)頁地圖部分

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

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

4.二維平面網(wǎng)頁地圖部分

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

準確客觀地表達場地內(nèi)部信息是地圖必不可少的要素，傳統(tǒng)的二維平面地圖在準確性與客觀性上仍然有著不可替代的優(yōu)勢。

圖2平面地圖頁面（圖片來源：作者自繪）

三、各個部分的制作方法

以廣東工業(yè)大學大學城校區(qū)教學區(qū)部分作為實例進行說明。

1.三維實景模型部分

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

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

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

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

2.全景網(wǎng)頁地圖部分

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

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

3.二維平面網(wǎng)頁地圖部分

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

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

四、發(fā)展前景

1.產(chǎn)品特色

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

2.應用方向

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

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

（3）應用于實施鄉(xiāng)村振興戰(zhàn)略。把實景三維網(wǎng)絡地圖平臺作為建設與改造方案的展示平臺，讓片區(qū)的居民群眾及時地了解并參與到當?shù)卣捻椖恐校龑Ь用穹e極參與鄉(xiāng)村、街道改進。同時，對日后從事古建筑保護與修繕、城市更新設計項目，都積累了信息技術應用的寶貴經(jīng)驗。

五、尚待解決的問題

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

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

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

參考文獻：

[1]韓光輝，王春，朱林，等.中國實景地圖服務的現(xiàn)狀與思考[J].資源開發(fā)與市場，2015（1）：100-102，48，封4.

[2]江明明.基于傾斜攝影測量技術的三維數(shù)字城市建模[J].測繪與空間地理信息，2017（3）：189-190.

[3]朱濤，黎恒明，杜延峰，等.基于Skyline的三維實景地圖創(chuàng)建[J].現(xiàn)代計算機，2017（13）：42-45，50.

[4]羅日才，韋艷梅.校園實景地圖的設計與實現(xiàn)[J].科技視界，2014（12）：40-41.

[5]李隆方，張著豪，鄧曉麗，等.基于無人機影像的三維模型構建技術[J].測繪工程，2013，22（4）：85-89.

[6]曹培國，姚磊，李奎英，等.三維實景地圖生產(chǎn)與應用[J].山東國土資源，2018，34（9）：87-91.

[7]李紅煒.傾斜攝影測量技術探討[J].低碳世界，2019，9（1）：78-79.

[8]黎華，吳浩，尹章才.三維電子地圖服務平臺的關鍵技術研究[J].安徽農(nóng)業(yè)科學，2014（10）：3083-3085.

[基金項目：本文系2018年國家大學生創(chuàng)新創(chuàng)業(yè)訓練項目“基于傾斜攝影技術的4D信息地圖體系建設與研究” （項目編號：201811845034）研究成果。]

責任編輯陳春陽