矢量地圖渲染技術研究

劉 杰，魏 娟

（1.江蘇省基礎地理信息中心，江蘇 南京 210013）

目前采用的地圖數(shù)據(jù)主要是柵格切片。柵格切片具有更新周期長、圖片無法交互、地圖風格固定、無法檢索查詢要素等缺點[1-2]。矢量地圖是對一種或多種地圖要素進行矢量化而形成的矢量化數(shù)據(jù)文件，存儲的是矢量數(shù)據(jù)的描述信息，具有支持快速標注和距離計算、支持實時無級縮放和漫游、可分層顯示且易于控制、支持交互式編輯、傳遞速度快、易于更新等優(yōu)點[3]。WebGL、OpenGL等地圖渲染技術的發(fā)展，推動了矢量地圖渲染引擎的快速發(fā)展[4-5]。本文研究了基于WebGL的矢量地圖服務引擎，實現(xiàn)了矢量地圖數(shù)據(jù)的實時加載和渲染繪制，提高了地圖顯示效率，降低了系統(tǒng)響應時間，提供了更多地圖風格樣式和更好的展示效果，并已在“天地圖·江蘇”移動端得到了很好的驗證。

1 矢量地圖數(shù)據(jù)組織與配置

1.1 數(shù)據(jù)組織存儲

為了提升移動端地圖加載效率、支持個性化展示風格的定制編輯，“天地圖·江蘇”移動端在建設中采用墨卡托瓦片技術進行地圖數(shù)據(jù)的組織。墨卡托投影坐標系統(tǒng)的基準面為WGS84，在投影過程中將橢球體近似為正球體作投影變換，比例尺越大、地物越詳細。其最大的特點是可保持地物的方向和相對位置的正確性，且能使等角航線表現(xiàn)為直線。墨卡托投影切片，即把投影后的世界地圖按照層級進行四叉樹等距離切分，這種切分在地圖上顯示均為規(guī)則的正方形[6-8]。采用墨卡托瓦片技術進行地圖數(shù)據(jù)的組織，具有緩存高效、支持漸進加載、簡單易用等特點，能滿足移動端地圖加載、地圖渲染效率提升的需求。

基于對地圖數(shù)據(jù)更新機制、查詢效率的考慮，“天地圖·江蘇”移動端建設中還采用了數(shù)據(jù)庫表分區(qū)技術。數(shù)據(jù)庫表分區(qū)是把一個大的物理表分成若干個小的物理表，并使這些小物理表在邏輯上可被當作一張表來使用。其具有的優(yōu)勢包括：

1）在特定場景下，能極大提高查詢性能，尤其是當大部分經(jīng)常訪問的數(shù)據(jù)記錄在一個或少數(shù)幾個分區(qū)表上時。表分區(qū)減小了索引的大小，并使經(jīng)常訪問的分區(qū)表的索引更容易保存于內(nèi)存中。

2）當查詢或更新訪問一個或少數(shù)幾個分區(qū)表中的大部分數(shù)據(jù)時，可通過順序掃描該分區(qū)表而非使用大表索引來提高性能。

3）可通過添加或移除分區(qū)表來高效批量增刪數(shù)據(jù)。例如，可通過Alter Table no Inherit將特定分區(qū)從主邏輯表中移除（該表依然存在，并可單獨使用，只是與主表不再有繼承關系且無法再通過主表訪問該分區(qū)表），或利用Drop Table直接將該分區(qū)表刪除。這 兩種方式完全避免了使用Delete 時所需的Vacuum額外代價。

4）很少使用的數(shù)據(jù)可被遷移到成本低、效率要求不高的存儲介質(zhì)中。

1.2 數(shù)據(jù)在線配置

在線數(shù)據(jù)服務與配置工具將導入到PG庫中的地圖數(shù)據(jù)轉(zhuǎn)換為PBF數(shù)據(jù)的服務，根據(jù)不同的層級和要素，將數(shù)據(jù)按照墨卡托瓦片數(shù)據(jù)組織結構讀取到Redis數(shù)據(jù)庫中，實現(xiàn)發(fā)布導入矢量地圖數(shù)據(jù)功能，支持可視化的配圖編輯以及移動端調(diào)用展示。

可視化的配圖編輯實現(xiàn)了對點、線、面圖層數(shù)據(jù)樣式信息和數(shù)據(jù)信息的在線配置和編輯。樣式信息主要包括點、線、面要素的圖標、文本、顏色、寬度等信息；數(shù)據(jù)信息主要包括對該圖層要素顯示的比例尺級別、數(shù)據(jù)過濾條件等信息。通過配置數(shù)據(jù)的樣式信息和數(shù)據(jù)信息，實現(xiàn)了不同風格的個性化地圖樣式。“天地圖·江蘇”移動端主要配置了標準地圖、淺灰色地圖、都市黑夜地圖和極夜藍地圖4種風格的 地圖。

完成地圖展示樣式編輯后，可生成所配置地圖的URL鏈接，用于地圖的在線發(fā)布，支持在Web、Android、iOS等平臺上展示，能通過地圖服務API或地圖SDK進行地圖應用系統(tǒng)的開發(fā)，滿足各種應用場景的需求，能輕松、快捷地集成到應用項目開發(fā)中。

2 矢量地圖服務引擎

WebGL是可在瀏覽器體現(xiàn)三維畫面的技術，只要支持OpenGL ES平臺即可采用WebGL。WebGL標準允許將Javascript與OpenGL ES結合在一起，通過增加OpenGL ES 2.0的一個Javascript綁定，可為HTML5 Canvas提供硬件三維加速渲染，以及在任何兼容的Web瀏覽器中渲染高性能的交互式三維和二維圖形，無需使用插件[9]。WebGL能跨平臺、跨瀏覽器，支持桌面端、移動端、嵌入式平臺，實現(xiàn)了真正的動態(tài)數(shù)據(jù)可視化。

矢量地圖渲染采用矢量地圖服務引擎作為軟件開發(fā)的核心引擎。矢量地圖服務引擎基于WebGL矢量渲染技術，以矢量化數(shù)據(jù)為基礎數(shù)據(jù)，支持地圖數(shù)據(jù)的無級縮放、旋轉(zhuǎn)、傾斜，提供了豐富的配色模板，支持個性化地圖的自定義編輯，具有地圖數(shù)據(jù)分層管理和分類顯示、專題圖疊加、地圖標注編輯等功能；同時提供Android SDK和iOS SDK支持移動端的地圖應用開發(fā)。

2.1 功能特性

矢量地圖服務引擎的功能特性為：①可提供矢量地圖，實現(xiàn)無級縮放，并支持無損高壓縮傳輸；②地圖高度定制化，可自定義選擇地理位置相關的要素，配置要素渲染效果；③支持Web、Android、iOS、大屏等多種界面，適用于多種場景展示；④使用方式靈活，支持在線調(diào)用和本地部署，數(shù)據(jù)更安全。

2.2 功能實現(xiàn)

1）矢量地圖渲染。引擎采用矢量地圖數(shù)據(jù)和矢量化的地圖渲染，地圖展示效果可個性化定制。

2）點標記的添加編輯。點標記是用于顯著體現(xiàn) 一個業(yè)務點位置信息的地圖要素。引擎實現(xiàn)了批量添加Marker、使用GeoJSON生成、圓形擴散效果標記、自定義標記點和批量刪除標記點等功能。

3）測量工具。引擎實現(xiàn)了距離、面積測量功能，支持不規(guī)則多邊形的面積測量和折線的距離測量。

4）編輯功能。引擎實現(xiàn)了對點、線、面等地理要素的編輯功能，包括這些要素的增加和刪除等。點編輯實現(xiàn)了自定義設置點邊框的顏色、邊框?qū)挾纫约包c的半徑、顏色等功能；線編輯可繪制直線、圓弧、彎曲線，可自定義線的顏色和寬度，實現(xiàn)了對線進行合并、拆分、添加形狀點等編輯功能；面編輯可繪制矩形、三角形、圓形、扇形和橢圓，實現(xiàn)了面的合并、拆分、形狀點添加等功能，支持對面的顏色、透明度以及面輪廓的顏色、寬度的自定義設置。

5）空間位置數(shù)據(jù)的可視化展示。引擎實現(xiàn)了多種位置大數(shù)據(jù)的可視化展示，包括海量數(shù)據(jù)散點圖、聚合圖、各種類型的熱力圖、柱狀圖、遷徙圖、動態(tài)粒子效果圖、車輛軌跡跟蹤效果圖等，支持基于地理空間位置大數(shù)據(jù)分析結果的多樣性可視化展示。

3 矢量地圖前端渲染技術

矢量地圖渲染包括在個性化地圖展示風格編輯工作臺和移動端的矢量地圖渲染，建設中采用的核心渲染庫通過圖層疊加的方式進行矢量地圖的渲染，從而更好地支持個性化地圖展示風格配圖，移動端快速顯示矢量地圖，地圖無級縮放以及平移、旋轉(zhuǎn)、傾斜、點選、數(shù)據(jù)緩存等。

矢量地圖核心渲染庫的技術方案包括系統(tǒng)架構、渲染地圖數(shù)據(jù)結構和整體渲染機制。技術核心是以較低的系統(tǒng)資源為代價，實現(xiàn)地圖內(nèi)容的高速渲染，以保證地圖元素的美觀性和可讀性。

3.1 系統(tǒng)架構

系統(tǒng)以OpenGL ES為核心架構，在此基礎上構建渲染系統(tǒng)。基于渲染機制系統(tǒng)形成了地圖渲染模型機制，最上層則是標注或覆蓋物/疊加物渲染。渲染地圖系統(tǒng)架構如圖1所示。

圖1 渲染地圖系統(tǒng)架構

3.2 渲染地圖數(shù)據(jù)結構

地圖數(shù)據(jù)結構包括3類：①點，POI、標注數(shù)據(jù) 等；②線，道路、行政邊界、地鐵線路等；③面，綠地、河流、湖泊等。

3.3 整體渲染機制

地圖渲染引擎從服務器端或本地獲取瓦片數(shù)據(jù)，并對這些數(shù)據(jù)進行分析，轉(zhuǎn)換成OpenGL SE引擎模型能識別的三角頂點數(shù)據(jù)，再將這些數(shù)據(jù)導入OpenGL引擎進行處理[10]。地圖渲染引擎包括提供數(shù)據(jù)線程、數(shù)據(jù)分析線程和渲染線程，如圖2所示。

圖2 矢量地圖渲染引擎

1）提供數(shù)據(jù)線程。該線程負責加載從本地或服務器獲取的矢量瓦片，數(shù)據(jù)通過網(wǎng)絡或I/O通道方式獲取。

2）數(shù)據(jù)分析線程。該線程負責檢查矢量瓦片數(shù)據(jù)，并將這些數(shù)據(jù)抽取為線、面、建筑物等。在地圖渲染引擎的幫助下，該線程會將數(shù)據(jù)分解成為多個三角形，并將這些數(shù)據(jù)存儲為三角頂點緩存，數(shù)據(jù)分析會使CPU運行緊張，因此該過程將放置在一個專有的線程中。

3）渲染線程。該線程負責采集Protocol Buffer中數(shù)據(jù)和數(shù)據(jù)分析線程中的結構數(shù)據(jù)，并通過渲染流水線的方式繪制這些數(shù)據(jù)。

3.4 地圖元素的渲染邏輯

“天地圖·江蘇”移動端建設中采用了將多邊形轉(zhuǎn)化為三角形的邏輯機制，利用三角化多邊形算法進行多邊形的分解。對于簡單的多邊形，分解完成后的各三角形之間不互相干擾；對于復雜的多邊形，則采用稍慢但更強的算法實現(xiàn)由多邊形到三角形的轉(zhuǎn)化。

OpenGL多邊形填充時默認為凸多邊形，而對凹多邊形、自交多邊形、帶孔的多邊形等非凸多邊形的繪制不太友好，因此利用OpenGL畫圖時，通常需先將凹多邊形分解為多個凸多邊形或一系列的三角形，再進行渲染。三角化多邊形算法的具體步驟為[11]：

1）利用單向循環(huán)鏈表保存多邊形頂點，并計算該鏈表中每個頂點的凸凹性。

2）在循環(huán)鏈表中順序取3個結點P、Q、R，若Q為凸點、且三角形PQR不包含多邊形上其他頂點，則計算△PQR的特征角（三角形內(nèi)最小的角）；求取所有這樣的三角形，再從中選擇特征角最大的△PQR進行保存，并從鏈表中刪去結點Q。

3）若鏈表中不存在3個以上的頂點，則轉(zhuǎn)至步驟2）。

4）由鏈表中最后3個頂點構成一個三角形。

4 結 語

本文重點闡述了矢量地圖數(shù)據(jù)組織與配置、矢量地圖服務引擎和矢量地圖前端渲染技術，并在“天地圖·江蘇”移動端矢量地圖渲染展示中得到了很好的應用。“天地圖·江蘇”移動端為用戶提供了不同風格的個性化地圖樣式展示，矢量地圖加載基于WebGL矢量渲染技術支撐的矢量地圖服務引擎，實現(xiàn)了矢量地圖數(shù)據(jù)的實時加載、渲染繪制，支持無級縮放、旋轉(zhuǎn)、傾斜，提高了移動端地圖加載的效率，縮短了數(shù)據(jù)更新周期。然而，對于復雜要素的渲染機制研究還不夠深入，三維場景下的矢量地圖數(shù)據(jù)渲染尚未做深入研究，在今后的工作中將繼續(xù)研究矢量地圖數(shù)據(jù)的渲染機制，解決二三維矢量地圖一體化的渲染 問題。