一種大場景Web三維注記可視化技術

周友生，倪慧珠，王杰棟，孔 暉

(浙江省第二測繪院，浙江 杭州 311100)

語義信息表達是采用文字、符號直觀地展現地物屬性值，如道路名稱、建筑物名稱等。注記(annotation)或稱標注(label)，是語義信息表達的直接方式，也是地圖語言的重要組成部分[1-4]。三維注記展示屬于三維地理環境圖形化表達中的語義信息表達研究范疇[3]。

新型基礎測繪的服務內容和形式多樣化，從靜態的二維平面到動態的基于圖形信息和影像信息的三維可視化是其必然趨勢[5-6]。以往針對三維注記方面的研究大多是面向注記配置方面，主要研究注記的位置、壓蓋、可見性等[1-4]。不同數據體量的地理場景，其加載機制、渲染機制、內存控制、語義信息表達機制具有本質差異[7-8]。大規模地理場景數據多采用分塊索引加載渲染機制，按需加載，避免內存超負荷，如數據調度流水線方法、流式加載、八叉樹等;小規模地理場景數據一般采用直接加載渲染機制，避免頻繁調用數據進入內存[9-13]。而在Web三維環境下，由于網頁對數據承載容量的限制，海量三維注記的數據組織、服務發布、可視化，成為一項重要的研究內容[14-15]。

1 大場景Web三維概念及其特點

1.1 大場景Web三維

大場景Web三維是面向大范圍場景的基于WebGL的瀏覽器端三維展示，主要有兩個特點。

1.1.1 基于WebGL的瀏覽器無插件三維展示

以往瀏覽器端三維展示技術大多采用插件的形式提供，客戶端龐大，安裝使用煩瑣。Khronos Group發布了一款免插件、跨平臺、免費、高性能的JavaScript API—WebGL[25]。WebGL自面世后，得到Web三維開發人員的廣泛認可，被應用于醫學、網絡游戲開發、三維GIS等領域。WebGL使得瀏覽器無需安裝插件即可直接展示三維場景。

1.1.2 海量三維數據快速加載和展示

大場景三維數據的容量往往超過瀏覽器所能承載的數據量，無法一次性將所有數據讀入瀏覽器。大場景Web三維需對數據調度和展示進行特別定制和優化，使三維數據的展示速度能夠保證用戶觀感，不出現明顯的卡頓、延遲。

1.2 CesiumJS三維展示機制

CesiumJS是一個開源的三維地圖JavaScript庫。它基于WebGL開發，可跨瀏覽器使用，支持地形、影像、矢量、注記、三維模型、點云等數據的展示，可采用開放標準的WMTS、GeoJSON、地形服務和3D Tiles服務等作為數據源，為開發人員的開發擴展和應用提供便利。

CesiumJS的三維數據展示機制從原理上可以分為兩種形式，一種是全量加載，另一種是按需加載。全量加載主要是指少量的矢量圖形、注記、三維模型、點云數據的加載，即將所有的數據全部加載到瀏覽器上，該方式對內容占用高，只適合少量的數據。按需加載是指對大量的數據建立LOD模型，根據地圖所顯示的范圍、攝像機角度、地圖窗口分辨率等要素按需加載不同粒度的三維數據，這樣可在保證可視化效果的基礎上加載最少的數據量，以便能夠提供最快速的展示效率，該方式一般應用于地形、影像、三維模型和點云等。

由上述分析可知，注記在CesiumJS中是以全量加載的形式出現的，對于海量的注記無法快速加載和展示。

2 三維注記可視化關鍵技術

三維注記可視化關鍵技術主要包括3個方面，三維注記數據組織、三維注記數據服務和三維注記展示。

2.1 三維注記數據組織

三維注記數據組織要面向三維注記的展示。在不同的比例尺下，三維注記應按照其權重、密度進行配置，以便在該比例尺下能夠獲得最佳的展示效果。二維電子地圖注記組織已經取得良好的效果，天地圖注記是其范例。二維電子地圖是按照固定級別的比例尺進行展示的，而三維電子地圖則沒有固定的比例尺，即在任何比例尺下都需要注記的展示。但三維注記數據仍然可以按照二維注記的形式進行組織。

參考天地圖各級地圖比例尺劃分，三維電子地圖同樣可劃分為20級比例尺。比例尺級別從1至20級按兩倍比例逐級增大，第1級比例尺為1∶295 829 355.45，第20級比例尺為1∶564.25。每一個注記都應當確定其顯示的最小比例尺級別，即當地圖放大時，注記在哪一級比例尺上最早出現。根據注記可顯示的最小比例尺級別，可以獲取任意比例尺和任意范圍下需要展示的注記數據。通過這種方式，可以建立三維注記的LOD模型。該模型可認為是一個松散的LOD模型，即沒有固定的網格大小，只有明確的網格尺度(比例尺)。

2.2 三維注記數據服務技術

基于松散的LOD模型，三維注記數據可發布為WFS服務。WFS服務在松散的LOD模型基礎上，發布松散的三維注記LOD數據服務，即沒有固定的網格大小，只有明確的網格尺度。客戶端可通過地圖范圍、網格尺度兩個參數進行數據查詢。應用端可根據客戶端的要求，將網格大小、位置進行固定，以便能夠進行數據緩存等性能優化。

2.3 三維注記可視化技術

2.3.1 三維注記數據調度

CesiumJS加載LOD數據有兩種形式，一種是Add模式，一種是Replace模式。Add模式是隨著視圖范圍放大，在粗略LOD數據的基礎上增加更詳細的LOD數據，以便達到更加詳細的數據粒度；Replace模式是用詳細的LOD數據替代粗略的LOD數據。

CesiumJS的影像圖層就是一個以Add模式加載影像數據的加載機制。地圖視圖放大時，CesiumJS會計算已經超出當前視圖范圍的影像瓦片，并將其剔除出瀏覽器內存，處于當前視圖范圍的粗略影像當作背景襯托在詳細影像的后面，詳細影像未加載完之前，瀏覽器給用戶呈現粗略的影像，實現地圖縮放的平滑過渡。

CesiumJS的影像圖層有UrlTemplateImagery Provider和ImageryLayer兩個重要的接口。UrlTem-plateImageryProvider接口負責獲取影像瓦片，并對影像瓦片進行預處理以便繪制。ImageryLayer接口負責管理影像瓦片的引用，其對影像瓦片的調度是通過Imagery接口實現的。

仿照影像圖層的調度機制，可對UrlTemplate-ImageryProvider、ImageryLayer、Imagery進行擴展形成注記圖層。修改UrlTemplateImageryProvider接口，替換其獲取影像瓦片的方法獲取同比例尺級別、同瓦片注記的方法。修改ImageryLayer接口，將注記與影像瓦片同步調度，以此實現三維注記的調度。

2.3.2 三維注記展示

在CesiumJS中，三維注記展示一般可使用Entity和LabelGraphics接口。Entity用于存儲三維注記的位置，LabelGraphics用于存儲三維注記的大小、字體、顏色等樣式要求，還可以配合Billboard Graphics接口設置三維注記的圖標。

GeoJsonDataSource接口是最常用的三維矢量數據接口，CesiumJS框架中可將GeoJsonDataSource數據直接加載到三維電子地圖中，但是GeoJsonData-Source接口中只將注記表示為圖標，未將注記的文字顯示到地圖上。

在實際應用中，UrlTemplateImageryProvider中獲取的注記數據可轉換為GeoJsonDataSource對象，通過ImageryLayer添加到三維電子地圖上，對GeoJson-DataSource接口進行擴展，使注記文字和圖標同時展示出來，為三維電子地圖提供明確的語義指引。

3 浙江省新型基礎測繪成果三維注記可視化實踐

浙江省新型基礎測繪成果包括數字高程模型、正射影像、數字線劃圖和地名地址等數據成果。三維平臺將數字高程模型發布為地形服務，正射影像、數字線劃圖發布為WMTS瓦片服務。數字線劃圖中的房屋可在三維平臺中以白模的形式立體展示，地名地址數據以三維注記的形式立體展示。

3.1 總體架構

三維平臺由數據層、服務層、展示層3層架構組成。數據層采用PostGIS作為空間數據庫；服務層采用GeoServer軟件作為空間數據服務器；展示層采用CesiumJS作為三維前端展示框架。如圖1所示。

圖1 三維平臺框架

3.2 數據組織和服務搭建

地名地址數據以單表的形式存放，主要屬性包括名稱、建成時間、別名、位置等字段。對三維注記可視化展示而言，最重要的是FSCALE字段。FSCALE字段存儲的是比例尺級別(1～20)。表1為地名地址(興趣點)的屬性定義。

表1 地名地址屬性定義

使用GeoServer對地名地址數據進行發布，坐標系確定為CGCS2000，將其發布為WFS服務，服務命名為placename。

3.3 前端展示

應用下列代碼可調用地名地址的WFS服務：

new Cesium.UrlTemplateImageryProvider({

url:‘/geoserver/wfs?request=GetFeature&version=1.1.0 &typeName=xc%3Aplacename&outputFormat=json’,

dataSources:viewer.dataSources

});

其中，url參數中需要設置WFS輸出格式為json。

3.3.1 三維注記數據獲取擴展

UrlTemplateImageryProvider要接收前端展示傳過來的dataSources參數，將其作為自身的屬性，并修改UrlTemplateImageryProvider中的requestImage方法，關鍵代碼如下：

resource.setQueryParameters(″Filter″,″此處進行WFS的空間和屬性過濾″)

var promise=

GeoJsonDataSource.load(resource);

return promise.then(function(value){

canvas.dataSource=value;

return canvas;

}).otherwise(function(error){

return canvas;

});

關鍵代碼中，首先對WFS請求的Filter參數進行空間和屬性條件設置，然后使用GeoJsonData Source接口對WFS查詢結構進行封裝，并以屬性形式置入canvas對象中，以便代入ImageryLayer接口。

3.3.2 三維注記調度擴展

修改ImageryLayer中的createTexture方法，關鍵代碼如下：

if(defined(image.dataSource)){

imagery.dataSource=image.dataSource;

imageryProvider._dataSources.add(image.dataSource);

delete image.dataSource;

image.dataSource=null;

image.dataSource=undefined;

}

與createTexture方法調用的同時，將三維注記放入CesiumJS的數據源中。

修改ImageLayer的releaseReference方法，增加如下代碼：

if(defined(this.dataSource)){

this.imageryLayer._imageryProvider._dataSources.remove(this.dataSource);

delete this.dataSource;

}

瓦片釋放的同時從CesiumJS的數據源中刪除三維注記。

通過上述修改，本文實現了三維注記的調度。

3.3.3 三維數據展示擴展

修改GeoJsonDataSource中的createPoiont方法，給entity設置label屬性，代碼如下：

entity.label=new LabelGraphics({

……

});

3.4 應用效果

本文通過對浙江省新型基礎測繪成果三維注記可視化的應用，實現了三維注記的LOD數據組織、三維注記服務發布，以及前端三維注記的立體展示。通過測試，地名地址達500萬條，可快速在三維電子地圖上立體展示。

在WebGL環境下全量加載注記的形式，首次加載效率低，時間長達40 s不等，在縮放漫游過程中，卡頓現象嚴重，基本無法使用。本文技術完全彌補了上述缺陷，經測試，三維注記加載顯示時間在100 ms以內，縮放、漫游流暢，為三維電子地圖的語義導引提供了切實可行的技術手段。

4 結 語

本文提出的大場景Web三維注記展示技術為WebGL三維電子地圖展示提供了一種新的解決方案，填補了CesiumJS框架的空白，應用于浙江省新型基礎測繪成果的三維可視化展示中，取得了較好的效果。該技術也可為自然資源基礎空間信息平臺、不動產管理平臺等領域提供接口服務。但該技術只解決了大場景三維注記的展示在效率方面的難點，下一步應與以往的注記配置相關研究相結合，研發三維注記的自動配置，實現效率和展示效果兩方面的提升。