劉 杰，魏 娟

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

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

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

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

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

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

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

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

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

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

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

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

可視化的配圖編輯實(shí)現(xiàn)了對(duì)點(diǎn)、線、面圖層數(shù)據(jù)樣式信息和數(shù)據(jù)信息的在線配置和編輯。樣式信息主要包括點(diǎn)、線、面要素的圖標(biāo)、文本、顏色、寬度等信息；數(shù)據(jù)信息主要包括對(duì)該圖層要素顯示的比例尺級(jí)別、數(shù)據(jù)過濾條件等信息。通過配置數(shù)據(jù)的樣式信息和數(shù)據(jù)信息，實(shí)現(xiàn)了不同風(fēng)格的個(gè)性化地圖樣式?！疤斓貓D·江蘇”移動(dòng)端主要配置了標(biāo)準(zhǔn)地圖、淺灰色地圖、都市黑夜地圖和極夜藍(lán)地圖4種風(fēng)格的 地圖。

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

2 矢量地圖服務(wù)引擎

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

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

2.1 功能特性

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

2.2 功能實(shí)現(xiàn)

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

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

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

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

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

3 矢量地圖前端渲染技術(shù)

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

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

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

系統(tǒng)以O(shè)penGL ES為核心架構(gòu)，在此基礎(chǔ)上構(gòu)建渲染系統(tǒng)?；阡秩緳C(jī)制系統(tǒng)形成了地圖渲染模型機(jī)制，最上層則是標(biāo)注或覆蓋物/疊加物渲染。渲染地圖系統(tǒng)架構(gòu)如圖1所示。

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

3.2 渲染地圖數(shù)據(jù)結(jié)構(gòu)

地圖數(shù)據(jù)結(jié)構(gòu)包括3類：①點(diǎn)，POI、標(biāo)注數(shù)據(jù) 等；②線，道路、行政邊界、地鐵線路等；③面，綠地、河流、湖泊等。

3.3 整體渲染機(jī)制

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

圖2 矢量地圖渲染引擎

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

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

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

3.4 地圖元素的渲染邏輯

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

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

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

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

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

4）由鏈表中最后3個(gè)頂點(diǎn)構(gòu)成一個(gè)三角形。

4 結(jié) 語

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