安麗超，許 帆，劉洪波*

（1. 重慶市地理信息和遙感應用中心，重慶 401121；2. 中國地質大學（武漢） 地理與信息工程學院，湖北 武漢 430074）

三維地圖注記配置屬于三維地理環(huán)境圖形化表達中的語義信息表達研究范疇。語義信息表達是指采用文字、符號直觀展現(xiàn)地物屬性值，如道路、河流、建筑物名稱等。注記或標注是語義信息表達的直接方式，也是地圖語言的重要組成部分[1]。長期以來，國內外學者對三維地圖注記自動配置問題進行了大量研究，如周鑫鑫[1]等在變換矩陣、GRID算法和遺傳算法的基礎上，通過三維質量評價函數(shù)實現(xiàn)了點要素三維注記的可行最優(yōu)解求解；Maass S[2]等針對地物遮擋和注記重疊問題，提出了一種根據(jù)成本函數(shù)評估采樣點可見性的嵌入式三維地圖注記配置方法；他們將平行于屏幕的平面作為注記布告板的容器，由遠及近地將靠近觀察者的注記繪制在容器底部，遠離觀察者的注記繪制在容器頂部[3]；沈敬偉[4]等通過構建虛擬地球系統(tǒng)，探討了三維場景中注記的關鍵問題，包括注記位置的確定、注記要素的可見性判斷、注記壓蓋的判斷以及注記的自動配置，并提出相應的解決辦法；楊乃[5]提出了基于約束性Delaunay三角網(wǎng)的面狀要素骨架線提取算法，實現(xiàn)了三維面狀要素注記的自動配置。

1 Mapbox GL JS的注記配置方法

Mapbox GL JS是一個Javascript庫，是基于WebGL協(xié)議標準的，采用矢量切片和Mapbox 樣式渲染的高度定制、快速響應的實時在線交互式地圖開發(fā)包[7]。Mapbox GL JS 的注記配置主要通過加載符號圖層來實現(xiàn)。該圖層可設置注記的字體、字號、字色、字型、字列、字隔、字向、字廓等視覺變量，還可設置注記與標注對象之間的偏移量，但偏移量僅局限于XY 平面，如圖1所示，當僅顯示樓層底圖平面時，Mapbox GL JS 現(xiàn)有的標注功能可滿足需求；當顯示被標注對象的三維模型時，如加載圖2 所示各個房間對應的三維模型，則需要將注記在Z軸方向上進行偏移，否則注記與被標注對象之間的關聯(lián)將產(chǎn)生錯亂；當加載多樓層房間三維模型時，如加載圖3 所示兩個樓層的三維模型，由于無法在Z軸方向調整注記高度，所有標注對象對應的注記均處于同一平面（XY平面），易導致注記壓蓋現(xiàn)象，如圖3 右下方的大型實驗室和資源與遙感系。顯然，對于圖2、3所示的兩種常見的應用場景，Mapbox GL JS 現(xiàn)有的標注功能已無法滿足注記配置需求。針對上述問題，本文借助于WebGL開源框架Three.js提供了3種解決方案。

圖1 Mapbox GL JS的原生標注功能

圖2 注記和標注對象之間關聯(lián)歧義現(xiàn)象

圖3 多樓層的注記壓蓋現(xiàn)象

2 融合Three.js的Mapbox GL JS注記配置方法

2.1 Three.js及其注記配置方法

Three.js 是基于WebGL 協(xié)議標準的開源框架，由于其易用性而被廣泛應用。Three.js 在WebGL 的API接口的基礎上，以簡單、直觀的方式封裝了三維圖形編程中常用的對象和工具，可方便地應用于游戲開發(fā)、動畫制作、幻燈片制作、高分辨率模型和一些特殊的視覺效果制作[8]?；赥hree.js構建三維虛擬環(huán)境至少包括場景、照相機、渲染器3 個部分，其中場景是相機、燈光和模型等所有對象的容器；相機是Three.js 3D 引擎中一個非常重要的組件，決定了處于何種角度的對象可以顯示出來，相機又分為正交相機和透視相機，透視相機中三維模型的顯示大小隨相機距離模型的遠近而變化，二者距離越大，三維模型顯示越小，反之亦然，透視相機的設置真實地反映了人眼的工作原理，三維地圖場景下往往將相機設置為透視相機。此外，通過WebGL渲染器將所需可視化的對象和場景渲染到頁面。

Three.js 中注記對象的構建依賴于幾何體和材質，幾何體用于描述場景中對象的外形，而材質是與渲染效果相關的屬性，決定了場景對象的視覺效果[9]。Three.js 中注記配置方法主要包括基于文本幾何對象的注記配置方法、基于平面幾何對象的注記配置方法和基于精靈對象的注記配置。文本幾何對象通過文本幾何體和深度網(wǎng)格材質生成；平面幾何對象通過平面幾何體和基礎網(wǎng)格材質生成，基礎網(wǎng)格材質通過將畫布元素內的文本作為材質的紋理貼圖來展現(xiàn)注記內容；在Three.js 創(chuàng)建的三維虛擬場景中構建一個永遠面向相機的平面，通過精靈材質將畫布元素內的文本作為材質的紋理貼圖，由此構建包含注記內容的精靈對象。

2.2 融合Three.js 的Mapbox GL JS 注記配置技術流程

Three.js創(chuàng)建的虛擬三維環(huán)境具有其自定義的世界坐標系，Mapbox GL JS 采用的是基于網(wǎng)絡墨卡托投影的地理坐標系，要將Three.js的三維注記配置方法融入到Mapbox GL JS中，需將Three.js的世界坐標系轉換為Mapbox GL JS 支持的網(wǎng)絡墨卡托投影坐標系，再通過WebGL 渲染器對注記模型進行重繪和渲染。融合Three.js的Mapbox GL JS三維注記配置流程如圖4所示。

圖4 注記建模流程圖

本文主要對基于文本幾何對象的注記配置、基于平面幾何對象的注記配置和基于精靈對象的注記配置方法和流程進行詳細闡述。

2.2.1 注記配置原理

1）基于文本幾何對象的注記配置原理。Three.js通過FontLoader 類加載文本幾何體所需的字體庫。Three.js并不能很好地支持中文字體，為避免加載英文字體庫時中文注記產(chǎn)生亂碼現(xiàn)象，需要利用轉換工具（如Facetype.js）將中文字體庫（ttf格式）文件轉換為包含中文字體類的JSON文件，以便顯示中文注記內容。

基于文本幾何對象的注記配置原理為：①加載注記文本和轉換后的中文字體類JSON 文件；②通過設置字體大小、文本厚度、文本曲線上的特征點數(shù)量、斜角深度和分段數(shù)等參數(shù)對三維注記進行參數(shù)化建模；③根據(jù)現(xiàn)有的光影條件設置材質的透明度、是否雙面可見等屬性，將文本幾何體與材質元素一起構成文本幾何對象Mesh(geometry,material)；④將文本幾何對象加入場景中，通過WebGL 渲染器進行渲染。

2）基于平面幾何對象的注記配置原理。繪制平面幾何對象需要使用畫布。在HTML5 中畫布元素可作為圖形容器用于圖形的繪制，還可用于動畫、游戲圖形、數(shù)據(jù)可視化、照片處理和實時視頻處理[9]，因此可通過設置畫布內文本的字體、字號、字色、字型、字列、字隔、字廓等參數(shù)來設置注記的最終視覺效果。Three.js 中提供THREE.CanvasTexture 類用于加載HTML5 的畫布元素，根據(jù)注記文本字列的長度動態(tài)設置畫布元素的寬度，使注記文本始終處于畫布中心。將實例化的THREE.CanvasTexture 類作為材質的紋理貼圖，即可在平面幾何對象中顯示注記。

生：第三個意象是丁香。整首詩最昏黃的點就在于“丁香”，丁香花是斑斕的，姑娘也是斑斕的，以是將丁香與姑娘接洽在一起就自然而然多了一份不可言喻的美。

基于平面幾何對象的注記配置原理為：①通過THREE.CanvasTexture 對象加載HTML5 的畫布元素，設置注記文本的視覺變量；②將實例化的THREE.CanvasTexture對象作為材質元素的紋理貼圖，將平面幾何體與材質元素一起構成平面幾何對象Mesh(geome?try,material)；③將平面幾何對象加入場景中，通過WebGL渲染器進行渲染。

3）基于精靈對象的注記配置原理。Three.js 中精靈對象始終面向相機平面，與基于平面幾何對象的注記配置一樣，也需要利用HTML5的畫布元素完成注記文本的視覺變量設置。針對材質無法設置寬度、高度而造成的注記文字擠壓現(xiàn)象，需根據(jù)文本寬度和高度的比例對精靈對象進行等比例縮放，以滿足注記顯示需求。

基于精靈對象的注記配置原理為：①通過THREE.CanvasTexture 對象加載HTML5 的畫布元素，設置注記文本的視覺變量；②將實例化的THREE.CanvasTexture對象作為材質元素的紋理貼圖，將材質元素賦予精靈對象；③將精靈對象加入場景中，通過WebGL渲染器進行渲染。

2.2.2 注記坐標系轉換

由于Three.js 采用的是自定義的世界坐標系，Mapbox GL JS 采用的是地理坐標系統(tǒng)，因此將通過Three.js建立的三維注記模型導入到Mapbox GL JS研發(fā)的可視化系統(tǒng)中，需進行坐標轉換。Mapbox GL JS 提供的mapboxgl.MercatorCoordinate.fromLngLat(longitude,latitude,height)方法可將Three.js世界坐標系（由Three.js中經(jīng)度、緯度和高度所組成的坐標系）轉換為Map?box GL JS 使用的基于網(wǎng)絡墨卡托投影的地理坐標系。假定注記的世界坐標系為VTDP，為使注記模型與Mapbox地圖對象相契合，需要獲得注記模型的投影變換矩陣VP。投影變換矩陣的計算公式為：

式中，VR為平移變換矩陣；tx為X軸上的平移量；ty為Y軸上的平移量；tz為Z軸上的平移量；VS為比例矩陣；sx為X軸方向的縮放比；sy為Y軸方向的縮放比；sz為Z軸方向的縮放比；VT為旋轉矩陣，變換后通過地圖對象的相機矩陣VM（地圖對象的相機矩陣是變化的，由當前視角所決定）變化即可得到投影變換矩陣；VTX為VT繞X軸的旋轉矩陣（α為當前矩陣繞X軸旋轉的弧度）；VTY為VT繞Y軸的旋轉矩陣（β為當前矩陣繞Y軸旋轉的弧度）；VTZ為VT繞Z軸的旋轉矩陣（γ為當前矩陣繞Z軸旋轉的弧度）。

將所得的投影變換矩陣作為相機投影變換矩陣，再利用WebGL 渲染器和Mapbox GL triggerRepaint()方法進行渲染和重繪。

2.2.3 3種方案的實驗對比

1）實驗環(huán)境和實驗結果。本文基于Mapbox GL JS，結合Mapbox GL JS自定義圖層和Three.js研發(fā)了一個三維注記配置系統(tǒng)。上述3 種三維注記配置方案均在相同的測試環(huán)境下進行，系統(tǒng)硬件環(huán)境：CPU為Inter（R）Core（TM）i7-9750H，內存為16 GB，GPU為NVID?IA GeForce GTX1660Ti，硬盤為1TB SSD，刷新率為60 Hz，色域為72%NTSC；系統(tǒng)軟件環(huán)境：操作系統(tǒng)為Windows10 64 bit，編程環(huán)境為Visual Studio Code，編程語言為Typescript，瀏覽器為Chrome，服務器為IIS10。

實驗分別加載中國地質大學（武漢）地球物理與空間信息學院兩層建筑三維模型（23個注記，效果如圖5所示，3種方案可取得一樣的可視化效果）和4層建筑三維模型（46 個注記），本文從幀率和響應時間等方面對3 種三維注記配置方案進行比較，其中幀率為10 次隨機時段幀率的均值，響應時間為10 次隨機時段程序從啟動到渲染完成時間的均值。3 種方案性能比較結果如表2所示。

表2 3種方案的性能對比

圖5 3種注記配置方案的實驗效果圖

2）實驗分析。基于文本幾何對象的注記配置方案需要實時加載中文字體庫JSON 文件到瀏覽器緩存中，導致瀏覽器的響應時間明顯偏長；基于平面幾何對象的注記配置方案和基于精靈對象的注記配置方案均以畫布作為材質紋理來展現(xiàn)文本內容，二者響應時間相仿，均快于基于文本幾何對象的注記配置方案，且視覺效果一致。同時，就Three.js 建模而言，建立規(guī)則幾何體的性能優(yōu)于文本幾何體和精靈對象，因此基于平面幾何體的注記配置方案在渲染間隔和幀率上表現(xiàn)出更優(yōu)越的性能。

加載兩層建筑物數(shù)據(jù)和4 層建筑物數(shù)據(jù)的比較結果顯示，實驗數(shù)據(jù)量大小對于3 種方案的性能具有一定的影響。通過橫向比較發(fā)現(xiàn)，數(shù)據(jù)量越大，同一方法建模所消耗的時間就越長，導致響應時間變長；同時由于模型變多，旋轉、縮放地圖時所需的重繪時間加長，導致幀率降低。通過縱向比較發(fā)現(xiàn)，數(shù)據(jù)量越大，基于文本幾何對象的注記配置方案因需要反復實時加載文件類型JSON 而導致性能嚴重下降，而另外兩種方案的性能雖在一定程度上有所下降，但影響程度沒有基于文本幾何對象的注記配置方案大?；谄矫鎺缀螌ο蟮淖⒂浥渲梅桨负突诰`對象的注記配置方案在響應時間上的差距可忽略不計，但前者能保持更加優(yōu)越的幀率和刷新率，避免了因注記模型過多而產(chǎn)生的畫面抖動、卡頓現(xiàn)象。總體而言，3種方案中基于平面幾何對象的注記配置方案擁有更出色的性能。

3 結 語

本文提出了基于文本幾何對象的、基于平面幾何對象的和基于精靈對象的適用于Mapbox GL JS的三維注記配置方案，并從幀率和響應時間等方面對3 種方案進行了對比分析。結果表明，基于平面幾何對象的注記配置方案具有更加出色的性能。本文中注記存在固定的朝向，今后將進一步實現(xiàn)注記隨著視角變動而始終朝向用戶的功能。