WebGL在線(xiàn)動(dòng)態(tài)地圖服務(wù)框架設(shè)計(jì)

， ， ，維慶

(國(guó)家測(cè)繪地理信息局第三地理信息制圖院，四川 成都 610101)

近年來(lái)，隨著無(wú)線(xiàn)通信、計(jì)算機(jī)技術(shù)和地理空間信息技術(shù)等的快速發(fā)展，地圖的承載媒介、表達(dá)形式和數(shù)據(jù)來(lái)源越來(lái)越多樣化[1]。在傳統(tǒng)地圖的形式上，衍生出數(shù)字地圖、網(wǎng)絡(luò)電子地圖、導(dǎo)航地圖、VGI眾源地圖、機(jī)器人地圖等多種形式[2-4]。其中網(wǎng)絡(luò)電子地圖得到了越來(lái)越廣泛的開(kāi)發(fā)和應(yīng)用，為人們?cè)诂F(xiàn)實(shí)生活中提供了極大的便利。目前網(wǎng)絡(luò)電子地圖已經(jīng)不局限于地圖的瀏覽、查詢(xún)、檢索等基本要求，而是面向各機(jī)關(guān)、團(tuán)體和企業(yè)及大眾等提供海量數(shù)據(jù)快速顯示、動(dòng)態(tài)更新、樣式可定制等更高級(jí)的制圖需求[5-6]。

目前行業(yè)內(nèi)成熟的GIS產(chǎn)品中，為實(shí)現(xiàn)上述的高級(jí)地圖需求，大都采用了基于金字塔的矢量切片技術(shù)[7-8]。然而，MapBox沒(méi)有開(kāi)放服務(wù)器端數(shù)據(jù)切片軟件，用戶(hù)在使用時(shí)必須將數(shù)據(jù)上傳到它提供的國(guó)外服務(wù)器上，考慮數(shù)據(jù)的安全性，無(wú)法廣泛地應(yīng)用于國(guó)內(nèi)相關(guān)GIS領(lǐng)域。ArcGIS作為商用軟件，提供了完善的矢量切片發(fā)布功能，但其軟件體系龐大、售價(jià)昂貴，大幅增加了GIS系統(tǒng)項(xiàng)目的研發(fā)成本。

為此，本文從海量數(shù)據(jù)可視化與動(dòng)態(tài)更新需求角度研究基于WebGL的在線(xiàn)動(dòng)態(tài)地圖服務(wù)技術(shù)。針對(duì)矢量數(shù)據(jù)的存儲(chǔ)、傳輸、渲染效率低下的問(wèn)題，設(shè)計(jì)出矢量瓦片數(shù)據(jù)結(jié)構(gòu)，用于提高數(shù)據(jù)存儲(chǔ)與傳輸效率。在此基礎(chǔ)上，采用基于WebGL的GPU加速技術(shù)[9-10]，研發(fā)了地圖要素點(diǎn)、線(xiàn)、面繪制的著色器，提高矢量切片地圖的渲染效率；同時(shí)，提出數(shù)據(jù)緩存與顯示幀緩存相結(jié)合的優(yōu)化策略，提升在線(xiàn)動(dòng)態(tài)地圖平臺(tái)的穩(wěn)定性。

1 在線(xiàn)動(dòng)態(tài)地圖平臺(tái)關(guān)鍵技術(shù)

1.1 矢量瓦片數(shù)據(jù)的組織結(jié)構(gòu)設(shè)計(jì)

在線(xiàn)動(dòng)態(tài)地圖平臺(tái)具有交互性強(qiáng)、制圖過(guò)程靈活、數(shù)據(jù)復(fù)雜多樣和面向大量非專(zhuān)業(yè)用戶(hù)的特點(diǎn)[11-12]，根據(jù)在線(xiàn)地圖平臺(tái)的特點(diǎn)和對(duì)制圖數(shù)據(jù)的需求，本文采用矢量瓦片組織方式設(shè)計(jì)了在線(xiàn)矢量地圖數(shù)據(jù)模型。矢量瓦片組織方式與傳統(tǒng)的柵格瓦片組織原理相似[13]，首先選擇等間隔格網(wǎng)來(lái)實(shí)現(xiàn)按行索引的矢量瓦片模型構(gòu)建，將投影好的矢量數(shù)據(jù)按照2的基數(shù)劃分成了等間隔的格網(wǎng)，采用網(wǎng)絡(luò)行號(hào)和列號(hào)進(jìn)行編碼，賦予矢量瓦片唯一的標(biāo)識(shí)，方便對(duì)矢量瓦片進(jìn)行調(diào)度和信息檢索。其構(gòu)建過(guò)程如圖1所示。

將等間隔格網(wǎng)與原始矢量數(shù)據(jù)進(jìn)行切割處理，形成以等間隔格網(wǎng)為基本結(jié)構(gòu)存儲(chǔ)單元。如圖1所示，與格網(wǎng)相交的矢量數(shù)據(jù)采用完全的數(shù)據(jù)裁切方式，把這些要素切碎，同時(shí)記錄每個(gè)矢量要素被格網(wǎng)裁切的行列索引號(hào)，防止在客戶(hù)端形成矢量的重復(fù)請(qǐng)求與重復(fù)繪制，降低單個(gè)矢量數(shù)據(jù)的傳輸壓力。對(duì)于面狀矢量數(shù)據(jù)，還需要將切碎形成的“冗余邊”進(jìn)行標(biāo)示一下，如BC邊，這些“冗余邊”在線(xiàn)客戶(hù)端拼接顯示時(shí)不予繪制出來(lái)。同時(shí)為了提高客戶(hù)端的渲染效率，考慮WebGL的渲染方式是基于三角面片的，對(duì)于面狀矢量要素，將要素三角化在矢量數(shù)據(jù)裁切時(shí)完成。

基于上述表述，本文的矢量瓦片的數(shù)據(jù)組織結(jié)構(gòu)如圖2所示。

1.2 基于WebGL的地圖要素繪制

目前常用的矢量數(shù)據(jù)渲染工具(如SVG、Canvas 2D)效率低下、地圖瀏覽體驗(yàn)較差[14]。WebGL充分利用計(jì)算機(jī)硬件資源，采用GPU加速技術(shù)進(jìn)行圖形繪制，降低CPU消耗，提高了矢量數(shù)據(jù)渲染效率。

WebGL渲染幾何圖形依賴(lài)于運(yùn)行在瀏覽器中的JavaScript和運(yùn)行在WebGL系統(tǒng)的著色器程序[15]。其中著色器程序包括頂點(diǎn)著色器和片元著色器，頂點(diǎn)著色器用于設(shè)置圖形頂點(diǎn)的位置，片元著色器用于設(shè)置圖形繪制的顏色。在頂點(diǎn)著色器和片元著色器之間，還存在著圖形裝配過(guò)程和光柵化過(guò)程。圖形裝配過(guò)程將傳入的頂點(diǎn)坐標(biāo)根據(jù)需要裝配成特定的幾何圖形，光柵化過(guò)程將裝配好的幾何圖形轉(zhuǎn)化成(內(nèi)插)片元(像素)，其繪制圖形的基本過(guò)程原理如圖3所示。

片元著色器根據(jù)光柵化后的像素個(gè)數(shù)，逐個(gè)確定像素的顏色，最終繪制出來(lái)可見(jiàn)的圖形。

根據(jù)WebGL渲染的原理以及地圖要素展示的需要，本文研究并設(shè)計(jì)了幾種基本的地圖要素及符號(hào)化樣式，用于進(jìn)行地圖展示。

(1) 方點(diǎn)：WebGL中默認(rèn)采用繪制點(diǎn)形式，無(wú)需任何處理。

(2) 圓點(diǎn)：在片元著色器中采用內(nèi)置的函數(shù)distance計(jì)算圓點(diǎn)中心到邊緣的像元坐標(biāo)距離，保留距離內(nèi)的像素。

(3) 不帶線(xiàn)寬的實(shí)線(xiàn)：WebGL中默認(rèn)的繪制方式，線(xiàn)寬默認(rèn)為1，線(xiàn)寬改變無(wú)效，無(wú)法適應(yīng)Windows平臺(tái)。

(4) 帶線(xiàn)寬的實(shí)線(xiàn)：在WebGL中被看作為一個(gè)長(zhǎng)條形的面，需要根據(jù)線(xiàn)條和線(xiàn)寬形成一個(gè)面，然后作三角化處理并進(jìn)行可視化。

(5) 多邊形面：利用數(shù)據(jù)中的頂點(diǎn)和三角化索引進(jìn)行多邊形面填充繪制，繪制多邊形輪廓線(xiàn)時(shí)將“多余邊”濾掉不繪。

(6) 圖片：采用WebGL貼紋理的方式進(jìn)行實(shí)現(xiàn)。

(7) 文本：由于WebGL沒(méi)有直接繪制文本的接口，本文采取用Canvas 2D繪制成文本圖片，以WebGL貼紋理的方式進(jìn)行實(shí)現(xiàn)。

2 在線(xiàn)動(dòng)態(tài)地圖平臺(tái)架構(gòu)

2.1 地圖平臺(tái)架構(gòu)設(shè)計(jì)

基于上述方案，采用B/S的三層體系結(jié)構(gòu)搭建在線(xiàn)動(dòng)態(tài)地圖平臺(tái)，包括應(yīng)用層、渲染層和服務(wù)器層。平臺(tái)體系結(jié)構(gòu)框架如圖4所示。在應(yīng)用層，用戶(hù)基于平臺(tái)實(shí)現(xiàn)各自行業(yè)、各類(lèi)業(yè)務(wù)且兼容各種顯示終端的應(yīng)用系統(tǒng)。渲染層將服務(wù)器層傳輸過(guò)來(lái)的矢量切片數(shù)據(jù)進(jìn)行拼接并在前端進(jìn)行繪制，同時(shí)為應(yīng)用層個(gè)性化開(kāi)發(fā)提供接口。服務(wù)器層在線(xiàn)動(dòng)態(tài)地圖平臺(tái)的重要支撐，將矢量地圖數(shù)據(jù)處理成矢量切片數(shù)據(jù)并發(fā)布成數(shù)據(jù)服務(wù)。

2.2 平臺(tái)性能優(yōu)化策略

在地圖平臺(tái)開(kāi)發(fā)實(shí)現(xiàn)過(guò)程中，需要兼顧用戶(hù)的操作體驗(yàn)，如果僅僅是簡(jiǎn)單地進(jìn)行“請(qǐng)求-處理-渲染”，那么用戶(hù)每一次平移，每一縮放都會(huì)產(chǎn)生大量的數(shù)據(jù)請(qǐng)求、處理和渲染工作量，給服務(wù)器、客戶(hù)機(jī)帶來(lái)龐大的運(yùn)算壓力，用戶(hù)的操作體驗(yàn)極差，乃至于放棄使用?？紤]平臺(tái)的可用性，本文主要采取以下兩種性能優(yōu)化策略進(jìn)行。

(1) 數(shù)據(jù)緩存策略：將每一次請(qǐng)求得到的矢量瓦片數(shù)據(jù)在內(nèi)存中以行列號(hào)索引和層級(jí)索引為主鍵進(jìn)行緩存并管理起來(lái)，然后根據(jù)緩存數(shù)據(jù)每次做增量請(qǐng)求，降低頻繁操作導(dǎo)致的大量數(shù)據(jù)請(qǐng)求次數(shù)；增量請(qǐng)求回來(lái)的數(shù)據(jù)及時(shí)進(jìn)行緩存，同時(shí)將當(dāng)前顯示的瓦片緩存位置置頂，超出緩存預(yù)設(shè)容量的瓦片，進(jìn)行移除銷(xiāo)毀，這樣能保存內(nèi)存數(shù)據(jù)不會(huì)太大的同時(shí)，用戶(hù)關(guān)注范圍的數(shù)據(jù)能夠緩存起來(lái)，以提高平臺(tái)的性能。

(2) 顯示幀緩存策略：幀緩存即為WebGL的幀緩沖區(qū)對(duì)象和渲染緩沖區(qū)對(duì)象，在幀緩沖區(qū)進(jìn)行繪制的過(guò)程稱(chēng)為離屏繪制。本文利用這一特性將地圖渲染的每一幀離屏繪制成紋理圖片，并及時(shí)緩存，然后以紋理貼圖的方式顯示給用戶(hù)，原理如圖5所示。

采用這種策略的目的在于優(yōu)化用戶(hù)在對(duì)地圖進(jìn)行平移、縮放時(shí)出現(xiàn)地圖卡頓、不流暢等現(xiàn)象，用戶(hù)在地圖平移過(guò)程中尚未平移完成時(shí)，平臺(tái)采用上一次的幀緩存進(jìn)行繪制顯示，不重新進(jìn)行數(shù)據(jù)繪制，平移結(jié)束時(shí)，等待增量數(shù)據(jù)再重新繪制。

2.3 平臺(tái)接口體系

本文在實(shí)現(xiàn)地圖平臺(tái)的過(guò)程中，采用面向?qū)ο蟮脑O(shè)計(jì)理念，構(gòu)建Point、Polyline、Polygon、Layer、Map等對(duì)象，同時(shí)將地圖的基本功能、結(jié)構(gòu)封裝成二次開(kāi)發(fā)接口，為后續(xù)基于本平臺(tái)的應(yīng)用開(kāi)發(fā)提供了開(kāi)發(fā)接口，平臺(tái)的二次開(kāi)發(fā)結(jié)構(gòu)如圖6所示。

3 應(yīng)用實(shí)例

3.1 系統(tǒng)設(shè)計(jì)

蒲江縣“多規(guī)合一”規(guī)劃信息平臺(tái)是根據(jù)蒲江縣發(fā)改委的需求，通過(guò)收集蒲江縣發(fā)改、規(guī)劃、國(guó)土、環(huán)保等部門(mén)各類(lèi)規(guī)劃數(shù)據(jù)，按照統(tǒng)一的空間基準(zhǔn)改造后，發(fā)布成矢量切片數(shù)據(jù)服務(wù)，在上述平臺(tái)總體架構(gòu)設(shè)計(jì)基礎(chǔ)上進(jìn)行開(kāi)發(fā)的，系統(tǒng)研發(fā)采用TypeScript、HTML5、CSS這3種語(yǔ)言。系統(tǒng)的體系結(jié)構(gòu)如圖7所示。

3.2 系統(tǒng)效果

通過(guò)支持WebGL的主流瀏覽器如Firefox、Chrome即可訪(fǎng)問(wèn)蒲江縣“多規(guī)合一”規(guī)劃信息系統(tǒng)，系統(tǒng)實(shí)現(xiàn)了各類(lèi)規(guī)劃數(shù)據(jù)在瀏覽器端的矛盾檢測(cè)、沖突協(xié)調(diào)、在線(xiàn)編輯、動(dòng)態(tài)更新，滿(mǎn)足了多規(guī)領(lǐng)導(dǎo)小組、應(yīng)用部門(mén)、運(yùn)維管理部門(mén)集規(guī)劃數(shù)據(jù)展示、分析、編輯與一體的Web端“一站式”業(yè)務(wù)需求。規(guī)劃數(shù)據(jù)渲染如圖8所示，規(guī)劃數(shù)據(jù)在線(xiàn)編輯如圖9所示。

4 結(jié) 語(yǔ)

電子地圖在很多領(lǐng)域得到了廣泛的應(yīng)用，目前大多數(shù)電子地圖的應(yīng)用都是基于傳統(tǒng)數(shù)據(jù)模型生成柵格切片來(lái)實(shí)現(xiàn)的，本文針對(duì)矢量數(shù)據(jù)的Web可視化場(chǎng)景，設(shè)計(jì)了一個(gè)基于WebGL的在線(xiàn)動(dòng)態(tài)地圖服務(wù)架構(gòu)。

基于該架構(gòu)設(shè)計(jì)并研發(fā)了蒲江縣“多規(guī)合一”規(guī)劃信息系統(tǒng)，結(jié)果表明該在線(xiàn)動(dòng)態(tài)地圖服務(wù)架構(gòu)可以實(shí)現(xiàn)海量矢量數(shù)據(jù)的高效可視化及動(dòng)態(tài)更新。在下一步的研究工作中，將引入矢量動(dòng)態(tài)符號(hào)庫(kù)，實(shí)現(xiàn)更為復(fù)雜的符號(hào)化矢量繪制效果，并進(jìn)一步優(yōu)化矢量切片技術(shù)，提高海量矢量數(shù)據(jù)的繪制效率。