WebGL技術(shù)的三維WebGIS平臺研究與應(yīng)用

王星捷，衛(wèi)守林

(1.成都理工大學(xué) 工程技術(shù)學(xué)院，四川 樂山 614007；2.昆明理工大學(xué) 信息工程與自動化學(xué)院，昆明 650093)

0 引言

WebGIS讓越來越多的用戶通過Internet來獲取和使用地理信息服務(wù)，實現(xiàn)了地理信息系統(tǒng)的大眾化服務(wù)。但是三維WebGIS技術(shù)[1]一直是業(yè)界的難點，目前市面上成熟的三維WebGIS產(chǎn)品屈指可數(shù)，發(fā)展較好的國內(nèi)有SuperMap和MapGIS平臺；國外有ArcGIS、SkyLine平臺。這些公司在WebGIS的三維可視化的研究及相關(guān)產(chǎn)品處于業(yè)界的領(lǐng)先水平。但是目前實現(xiàn)三維WebGIS的手段還是需要借助用戶下載額外的插件程序來輔助實現(xiàn)，不能瀏覽太多的三維模型，不同的平臺需要分別開發(fā)對應(yīng)的插件，開發(fā)平臺的成本價格較高。

本文基于WebGIS(web graphics library)[2]結(jié)合地理信息服務(wù)(geographic informatica service)[3]對WebGIS的三維可視化分析技術(shù)進行探索和研究。使用地理信息服務(wù)發(fā)布地理系統(tǒng)的數(shù)據(jù)和分析服務(wù)，通過Web客戶端調(diào)用這些服務(wù)，對場景的坐標(biāo)轉(zhuǎn)換和模型UV設(shè)計了算法優(yōu)化，將大量的二、三維數(shù)據(jù)呈現(xiàn)在Web三維場景里。WebGL獨有的硬件級加速優(yōu)勢[4]與本文研究的坐標(biāo)轉(zhuǎn)換、模型UV優(yōu)化算法的結(jié)合使場景瀏覽更加流暢，響應(yīng)速度快，界面友好。實現(xiàn)了二三維聯(lián)動、放大、縮小、數(shù)據(jù)查詢定位、模型替換編輯等三維WebGIS功能。

1 三維WebGIS平臺設(shè)計

系統(tǒng)主要分為數(shù)據(jù)存儲層、網(wǎng)絡(luò)服務(wù)層、平臺業(yè)務(wù)層、前端表現(xiàn)層4層。數(shù)據(jù)層主要分為文件系統(tǒng)存儲和數(shù)據(jù)庫存儲，網(wǎng)絡(luò)服務(wù)層主要是由ArcServer發(fā)布的GIS服務(wù)和IIS提供的網(wǎng)頁服務(wù)構(gòu)成。平臺業(yè)務(wù)層根據(jù)不同的業(yè)務(wù)而進行相應(yīng)的業(yè)務(wù)處理。前端表現(xiàn)層即是用戶最終在瀏覽器中看到效果，可以實現(xiàn)平臺與用戶的交互。如圖1所示。

圖1 系統(tǒng)架構(gòu)圖

數(shù)據(jù)存儲層主要分為文件系統(tǒng)存儲和數(shù)據(jù)庫存儲2種類型，文件系統(tǒng)存儲的數(shù)據(jù)主要包括平臺所需的模型及貼圖文件和屬性數(shù)據(jù)。數(shù)據(jù)庫存儲又分為非空間(屬性)數(shù)據(jù)和空間數(shù)據(jù)存儲，其中空間數(shù)據(jù)使用ArcGIS的SDE工具將數(shù)據(jù)存儲在SQL Server中，非空間數(shù)據(jù)直接使用SQL Server數(shù)據(jù)庫進行存儲。網(wǎng)絡(luò)服務(wù)層的所有服務(wù)都必須基于數(shù)據(jù)存儲層的支持，所以數(shù)據(jù)存儲層是作為整個平臺的基礎(chǔ)支撐存在。

服務(wù)層由ArcGIS Server提供的GIS服務(wù)和IIS服務(wù)共同組成，ArcGIS Server將數(shù)據(jù)庫中的數(shù)據(jù)發(fā)布為GIS數(shù)據(jù)服務(wù)，并為平臺提供地理信息系統(tǒng)的地理查詢、緩沖區(qū)分析、網(wǎng)絡(luò)路徑分析等GIS服務(wù)。IIS為平臺提供模型和貼圖文件數(shù)據(jù)，使平臺在三維模型的創(chuàng)建和加載速度大大提升。網(wǎng)絡(luò)服務(wù)是平臺的核心處理中心存在。

平臺業(yè)務(wù)層主要工作就是根據(jù)不同的業(yè)務(wù)需求將網(wǎng)絡(luò)服務(wù)層的網(wǎng)絡(luò)服務(wù)與前端響應(yīng)部分進行搭配組合不同的功能，例如將緩沖區(qū)分析與空間查詢服務(wù)結(jié)合成鄰近設(shè)施查詢功能。

前端表現(xiàn)層可以理解為用戶最終在瀏覽其中看到的效果，主要目的就是實現(xiàn)與用戶的交互。前端采用EasyUI.js插件庫作為平臺的UI驅(qū)動，二維地圖使用ArcGIS API For JavaScript的二次開發(fā)接口進行開發(fā)實現(xiàn)，三維GIS場景使用Threejs插件庫作為WebGL的驅(qū)動[5]。界面簡潔，功能強大。

2 場景坐標(biāo)轉(zhuǎn)換

GIS矢量數(shù)據(jù)的坐標(biāo)不能直接用于WebGL場景中，需要進行的坐標(biāo)轉(zhuǎn)換，轉(zhuǎn)換為場景中的坐標(biāo)點，以便WebGL使用這些矢量數(shù)據(jù)。在參考托球體中，范圍較小的區(qū)域可以近似于一個平面，因此只需當(dāng)作平面坐標(biāo)向平面坐標(biāo)的轉(zhuǎn)換進行處理。

面積小的區(qū)域的坐標(biāo)可以直接轉(zhuǎn)換到WebGL場景中，在三維場景中，習(xí)慣于在原點(0，0，0)附近進行操作。地理坐標(biāo)的數(shù)值長度和精度較高，所以需要找到一個標(biāo)準(zhǔn)點作為原點，其他坐標(biāo)就可以根據(jù)標(biāo)準(zhǔn)點坐標(biāo)進行校正。本文把這個點叫做校正點J(lonj，latj)。本文需要將地理坐標(biāo)點m轉(zhuǎn)換為以校正點為原點的平面坐標(biāo)M。

假如地理坐標(biāo)使用的比例尺為1∶100 000。即圖上一個單位長度對應(yīng)現(xiàn)實中100 000 m，在WebGL坐標(biāo)系中，需要將經(jīng)緯度坐標(biāo)分別乘以100 000。

M(lonM，latM)=(m(lonm，latm)-J(lonj，latj))×100 000

(1)

WebGL場景使用的是右手坐標(biāo)系，Y軸向上。為了方便，將WebGL場景中的XZ坐標(biāo)作為經(jīng)緯度坐標(biāo)的映射。即最終得到場景中的坐標(biāo)為：P(lonM，0，-latM)。從而實現(xiàn)地理坐標(biāo)向WebGL場景坐標(biāo)的轉(zhuǎn)換，過程如圖2所示。

圖2 地理坐標(biāo)在WebGL場景中的轉(zhuǎn)換圖

將準(zhǔn)備好的影像圖的范圍作為場景建模范圍，將影像圖的中心點坐標(biāo)作為算法中提到的校正點J，然后將影像圖的左下角坐標(biāo)和右上角坐標(biāo)分別按照上面的坐標(biāo)轉(zhuǎn)換算法進行轉(zhuǎn)換，再將影像圖根據(jù)轉(zhuǎn)換后的坐標(biāo)導(dǎo)入到場景中。本文測試數(shù)據(jù)為10 km2，對于較大的數(shù)據(jù)可以進行數(shù)據(jù)切片[6]處理后再進行組合。

3 模型UV算法

在完成了場景中影像圖的添加，需要在場景中創(chuàng)建建筑模型[7]，由于考慮到涉及數(shù)據(jù)量較大，大部分的建筑模型將直接把二維GIS數(shù)據(jù)進行三維可視化處理[8]。具體實現(xiàn)方法是將制作好的建筑矢量面數(shù)據(jù)進行坐標(biāo)轉(zhuǎn)換處理得到平臺適用的Shape矢量面，然后再將這些建筑模型的Shape矢量面按照建筑物的高程字段進行拉伸，從而獲得三維立體建筑模型[9]。這也是大多數(shù)GIS平臺將二維GIS數(shù)據(jù)進行三維可視化的常用手段[10]。但這種方式很容易出現(xiàn)側(cè)面的貼圖變形，原因是在計算拉伸面的UV坐標(biāo)時沒有考慮Y坐標(biāo)軸方向的坐標(biāo)。因此拉伸出來的側(cè)面UV貼圖坐標(biāo)是錯亂的。因此需要根據(jù)每一個頂點的三維坐標(biāo)對拉伸出來的面的UV坐標(biāo)使用UV算法重新計算，使三角面的UV坐標(biāo)分布比例與三角面頂點在對應(yīng)UV面的投影點分布比例保持一致。

空間直角坐標(biāo)系中的三角面頂點分布如圖3所示。需要在三角面ABC所在的平面創(chuàng)建二維平面坐標(biāo)系作為UV面。假設(shè)O點在三角面所在的平面的投影點為P，所得到的向量OP即為三角面的法向量。將空間直角坐標(biāo)系中的Y坐標(biāo)軸與OP向量形成的平面與三角面ABC所在的平面的相交線(即Y軸在三角面ABC上的投影線)作為二維平面坐標(biāo)的Y軸，投影線的方向為二維平面坐標(biāo)系Y軸的正方向。設(shè)P點為三角面ABC所在平面的二維平面坐標(biāo)系的原點，則可以將以P點出發(fā)的射線作為二維坐標(biāo)系的X軸的正方向。

圖3 三角面頂點在立體空間的分布

(2)

(3)

OP向量的計算公式如下：

(4)

平面坐標(biāo)系的U軸所在的向量的計算公式如下：

(5)

平面坐標(biāo)系的V軸所在的向量的計算公式如下：

(6)

(7)

(8)

最終計算得到頂點K在對應(yīng)三角面中重新定義的UV坐標(biāo)的計算公式如下：

(9)

各個向量之間的關(guān)系如圖4所示。

圖4 UV處理算法中的向量圖解

4 系統(tǒng)實驗與分析

本文測試的數(shù)據(jù)是一個德國小鎮(zhèn)的數(shù)據(jù)，范圍為10 km2。模型數(shù)量超過5 000個，其中矢量面拉伸生成的模型1 421個，導(dǎo)入外部模型3 600多個，按平臺設(shè)計需要還包含每個建筑物的高程數(shù)據(jù)、模型參數(shù)(路徑、大小、旋轉(zhuǎn))、道路寬度、建筑物名稱等必要屬性數(shù)據(jù)。

通過場景坐標(biāo)轉(zhuǎn)換后，將影像圖根據(jù)轉(zhuǎn)換后的坐標(biāo)導(dǎo)入導(dǎo)入到場景中，效果如圖5所示。

圖5 影像圖導(dǎo)入效果

可以看到影像圖導(dǎo)入到場景中幾乎沒有變形，證明了本文研究的坐標(biāo)轉(zhuǎn)換算法的正確和可行性。

經(jīng)過模型UV處理算法處理之后，場景中三角面的UV貼圖坐標(biāo)的比例與三角面頂點在空間直角坐標(biāo)系中的坐標(biāo)分布比例保持一致。當(dāng)模型被賦予貼圖時不會發(fā)生變形。變換前后效果如圖6所示。

從UV算法處理前后的對比效果圖，可以得出本文UV算法的正確性。

將數(shù)據(jù)和三維模型導(dǎo)入后，實現(xiàn)的三維WebGIS平臺的效果如圖7所示。

為了驗證平臺的實用價值，現(xiàn)將本平臺與市場上其他商業(yè)的三維WebGIS平臺進行了分析比較，結(jié)果如表1所示。

圖6 UV算法處理前后的對比

圖7 三維WebGIS平臺

開發(fā)平臺ArcGISSkyLineSuperMapMapGIS本平臺插件 否是否是否開源 否否否否是收費 是是是是否跨平臺支持不支持支持不支持支持拓展性難難難難易

從對比結(jié)果可以看出大多數(shù)三維WebGIS產(chǎn)品化的開發(fā)平臺，需要安裝插件輔助瀏覽三維場景，支持跨平臺使用產(chǎn)品較少，都是非開源產(chǎn)品，擴展性差、收費較貴、與這些平臺的產(chǎn)品相比之下，本平臺具有跨平臺支持、高性能、易擴展、低成本等優(yōu)點。

5 結(jié)束語

本文研究了基于WebGL搭建三維WebGIS平臺的總體思路，以及場景坐標(biāo)轉(zhuǎn)換和模型UV處理算法，并充分結(jié)合了WebGL硬件級三維渲染加速的優(yōu)勢，實現(xiàn)了三維WebGIS平臺。其優(yōu)點：①本平臺基于開源，無需任何額外的平臺費用，成本低；②采用了three.js輕量級技術(shù)與客戶端交互，保證了客戶端數(shù)據(jù)交互更快捷、高效；③設(shè)計了特有的場景坐標(biāo)轉(zhuǎn)換和模型UV處理算法，解決了坐標(biāo)偏移和模型貼圖變形的問題；④在客戶端進行瀏覽無需任何插件，并且支持跨平臺；⑤本平臺從上至下，都是基于開源模式設(shè)計，無需依靠任何產(chǎn)品，平臺的擴展性強；⑥本平臺以小區(qū)域化進行設(shè)計，支持大區(qū)域數(shù)據(jù)切片和組合，模型加載方便。本文實現(xiàn)的三維WebGIS平臺具有實際的應(yīng)用價值，實現(xiàn)的技術(shù)為三維WebGIS平臺的開發(fā)提供了一種新的技術(shù)模式。