矢量瓦片支持下的在線交互可視化工具設計與實現

宋 磊，霍 亮,2，方 敏，鮑 鵬，王 銳，王金地

(1. 北京建筑大學測繪與城市空間信息學院，北京 102616； 2. 現代城市測繪國家測繪地理信息局重點實驗室，北京 102616)

網絡地圖面向任意用戶，不同的使用環境使得用戶對地圖的需求不同[1]。現階段主流的在線地圖，如Google地圖、百度地圖、天地圖等，以固定的樣式呈現給用戶，不能兼顧用戶多樣化的需求。OSM地圖允許用戶參與空間數據的在線編輯，但要素的符號不能編輯。制圖專家不可能為所有用戶定制滿足其需求的網絡地圖，因此制圖者的角色由以前的制圖專家轉向普通地圖用戶，即“地圖為人人，人人都制圖”[2]。現有的OGC標準只提供有限的圖式表達，且符號配置功能簡單，各種地圖符號服務難以聚合[3-5]，與復雜的網絡地圖制圖需求存在矛盾。

作為在線地圖空間數據的重要組成部分，矢量數據由于數據結構緊湊，冗余度低，客戶端交互性、分析操作性強，圖形顯示質量好等優點而越來越廣泛地應用于在線地圖中[6]，但當數據量增大到一定程度時，受網絡帶寬限制或客戶端電腦硬件的局限，矢量數據渲染效率及用戶體驗明顯降低[7]。

目前，很多學者已將矢量瓦片技術應用于在線地圖制圖中。牛秀麗等在矢量瓦片技術的基礎上，探討了該技術在網絡地圖中多樣化表達中的應用，但需要通過代碼來改變地圖的樣式，提高了使用門檻[8]。黃瑞陽從符號共享的角度，設計了客戶端和服務器端均能識別的地圖樣式描述語言，實現在線制圖的目的，但是此方案在渲染大規模矢量數據時，渲染效率有待提高[9]。

基于此，本文提出一種無需插件、不依賴專業制圖環境、面向用戶的網絡地圖在線交互可視化工具實現方法。該方法基于矢量瓦片技術，通過WFS發布GeoJSON格式矢量數據，將矢量數據以漸進傳輸的方式緩存在客戶端。用戶在瀏覽器端編輯地圖符號，設置圖層樣式，確定地圖符號和圖層參數。基于該方法設計的在線可視化工具，通過腳本語言解析樣式信息，并作用于內存中的矢量數據，最終采用WebGL技術將數據渲染成圖并進行動態展示。

1 矢量瓦片組織與渲染

1.1 矢量瓦片

矢量瓦片是指將大范圍內的矢量數據，以規則格網對同一范圍內的矢量數據進行切割，計算并保存每個格網中所包含的矢量要素，每個格網按照一定的命名規則進行命名[10-11]。前端調用數據時，根據用戶感興趣的地圖范圍，計算出地理格網，映射成命名規則，組裝成地址請求并依次加載。矢量瓦片在縱向上分層，減少了小比例尺地圖時傳輸數據的數據量。在橫向上分塊，降低了矢量數據渲染計算的復雜度。矢量瓦片按照金字塔的方式進行調度，切割好的瓦片以文件的形式存儲[12-13]。

矢量瓦片是矢量數據多尺度表達的一種形式。如圖1所示，矢量瓦片的每個層級數據都放置在單獨的文件夾中，并可從命名中獲取該文件存儲哪一層級的數據。地理網格的矢量數據以GeoJSON格式文件存儲。如果要素所占地理范圍較大，將跨越多個格網，造成同一要素儲存在多個瓦片中。有學者為保留要素的完整性，每個瓦片都保留要素的全部信息，造成大量的數據冗余。本文將跨越瓦片的要素在格網邊界進行相交分析，計算要素與地理格網的交點，讓要素在邊界處斷開，每張瓦片保存要素的部分數據。

圖1 矢量瓦片的組織結構

1.2 基于GeoJSON的矢量瓦片組織

GeoJSON為能被JavaScript簡單、快速解析的一種輕量級數據格式，用來對地理要素模型進行編碼。GeoJSON定義的幾何特征遵循OGC簡單要素模型，融合了 JavaScript的對象表示法，適用于網絡數據傳輸。每個要素包含空間信息和屬性信息，其中type的值必須是GeoJSON定義成員中的一種，涵蓋了地理要素中點、線、面等幾何要素。Properties的值保存屬性數據。GeoJSON注重地理數據內容表達，而不負責數據圖形解釋，內容與形式分離是GeoJSON的重要特征之一[14-16]。

GeoJSON的矢量瓦片中每個要素都有ID編碼。跨越瓦片的要素被地理格網分割，破壞了數據的完整性，被分割的要素用ID編號進行關聯。客戶端將矢量數據下載并釋放到內存中，渲染引擎通過搜索唯一的ID標識，對要素進行拓撲鏈接和屬性歸拼，保證線面對象能夠自然過渡、無縫銜接，消除數據表達的歧義。對于沒有數據的地理格網區域，不再進行分割與編碼。由于矢量瓦片的編碼只與地理格網、層級有關，因此缺失的瓦片并不影響其余瓦片的命名與調度。

1.3 基于WebGL的矢量數據渲染

由于GeoJSON注重地理模型的表達而不負責幾何圖形的解釋，因此傳輸至客戶端的幾何要素，需要JavaScript解析并渲染為屏幕圖形。HTML5圖形無插件渲染技術包括Canvas與WebGL。WebGL能夠提供硬件加速渲染，適用于復雜大規模圖形顯示，因此采用WebGL技術加速矢量數據的渲染效率[17]，如圖2所示。WebGL中把復雜的多邊形對象分解為三角形、線和點等圖元，然后利用GPU的渲染管線并行處理各個圖元，最終將幾何對象展示到畫布上。WebGL采用統一、標準、跨平臺的OpenGL接口實現，因此得到主流瀏覽器的支持[18]。

圖2 WebGL渲染矢量數據流程

WebGL技術首先需要創建地圖展示區域，用來展示地圖。然后將圖形區域作為HTML5對象節點發送給WebGL，作為其上下文環境。JavaScript解析GeoJSON中的點線面模型，通過地理坐標與屏幕坐標之間的正反算，生成WebGL需要的頂點數組，組成矩陣。WebGL調用渲染管線，創建著色器，繪制圖元，最終將地理數據轉化為地圖表達，把地圖展示在用戶界面上。

2 在線交互可視化工具的設計

矢量瓦片的優勢在于只請求和渲染視圖范圍內的矢量數據，有效地降低了網絡傳輸的壓力和計算的復雜度。用戶在前端瀏覽地圖時，矢量數據的渲染流程如圖3所示。

圖3 矢量瓦片網絡地圖渲染流程

當用戶通過瀏覽器發出數據請求時，地理服務器計算出請求數據的空間范圍，通過空間范圍計算出瓦片金字塔的級別及瓦片編號，動態請求下載矢量瓦片數據。通過瓦片編碼查詢出GeoJSON格式的矢量瓦片，地理服務器通過WFS發布服務，將數據發送至前端。位于瀏覽器緩存中數據結合JavaScript設置渲染樣式，通過WebGL技術將地理數據渲染成地圖。當用戶感興趣的范圍確定時，數據豐富度滿足用戶需求時，瀏覽器無需再向服務器請求服務。地理數據是通過JavaScript設置樣式，前端實時渲染，因此可以通過提供地圖符號編輯界面的方式，使渲染的地圖多樣化、形式自由化，能夠快速成圖，滿足不同用戶的需求。

2.1 在線可視化工具總體設計

相比于柵格瓦片的地圖渲染，矢量瓦片的成圖流程增加了數據融合和樣式設置2個部分。在設計可視化工具時，要綜合考慮矢量數據的融合、圖層信息的獲取，以及圖層樣式信息的傳遞等，如圖4所示，在線可視化工具的總體設計分為渲染引擎模塊、圖例生成模塊、符號編輯模塊與自適應成圖模塊。

圖4 可視化工具總體設計

渲染引擎主要負責解析矢量瓦片，融合矢量數據，接受自適應模塊的圖層渲染參數，將矢量數據渲染成圖。圖例生成模塊主要以圖層為單位展示圖層信息和各要素的地圖符號，是網絡地圖的重要組成部分，也是渲染引擎與符號編輯模塊間的橋梁，通過圖例生成模塊，利用圖層信息與地圖符號傳遞渲染信息。

符號編輯模塊與自適應符號配置模塊是可視化工具的核心模塊，是實現網絡地圖表現形式多樣化，快速輸出符合用戶需求地圖的關鍵。符號編輯模塊主要負責為用戶提供編輯地圖符號的界面，用戶能夠自定義渲染樣式。自適應模塊主要通過分析用戶硬件的渲染效率、設置信息、用戶專業背景、操作習慣等變量，挖掘數據信息，設置制圖參數，反饋至渲染引擎，達到自適應快速制圖的目的。符號編輯與自適應符號配置模塊，獨立于矢量數據。已編輯的圖層樣式信息以XML方式保存，傳遞給渲染引擎，實時展示成圖效果。

2.2 地圖符號編輯

本模塊作為網絡地圖在線交互可視化的重要一環，地圖符號編輯模塊封裝為地圖符號資源，著重利用WebGIS系統中客戶端的計算資源，在前端為用戶提供在線可視化服務。

網絡地圖符號相對于傳統地圖符號視覺變量應用更加靈活，具有更強的直觀性、抽象性和會意性[19]。現階段，OGC標準只提供有限的圖式表達，造成主流在線地圖，地圖符號如圖5所示，常規符號樣式單一，以純色填充區別不同地圖符號類別。而地圖符號編輯工具，符號樣式信息無需在服務器端和客戶端之間傳遞。充分利用客戶端計算資源，將符號編輯邏輯與渲染在前端實現，從而實現多種視覺變量的組合，點符號與線符號、點符號與面符號等多種符號聚合形式，并且添加了豐富的圖片作為點符號樣式，為用戶提供個性化符號服務，提高了網絡地圖的表現力，增加了網絡地圖的多樣性和吸引力。

圖5 在線常規符號與個性符號對比

在地圖編輯模塊中，為了減輕加載至瀏覽器的數據量，不是設計龐大的預定義地圖符號庫，而是預先設計了幾種經典的地圖符號。根據自適應制圖模塊分析結果，選擇性地加載基本地圖符號至客戶端。在基本地圖符號的基礎上，提供地圖符號編輯的功能，引導用戶設置自定義的地圖符號，增強在線地圖交互功能。地圖編輯模塊把地圖符號從空間形態上劃分為點狀符號、線狀符號和面狀符號。矢量數據傳輸至前端后，空間數據與屬性數據存儲在內存中，用戶可以根據要素的屬性值，篩選、過濾要素是否要加載至圖層中，并進行符號化。

點狀符號分為矢量符號和柵格符號，柵格符號用預先制作好的圖片代表地物，可以由客戶端本地的標準規格PNG圖片組成。矢量點狀符號是指設置點的形狀、大小、顏色等視覺變量，實時生成的地圖符號。根據地圖的載負量與地圖美觀問題，設置點狀符號偏移與位置。

線狀符號由用戶通過設置線寬、顏色、線型等變量改變線要素的渲染樣式。可視化工具提供線符號與點符號的聚合功能，設置點狀符號之間的間隔、線符號與點符號之間的位置關系，生成新的線符號，豐富網絡地圖中的線狀符號樣式。

面狀符號由線符號和點符號聚合而成。通過可視化工具，可以設置面狀符號線的顏色、寬度及線型。填充可以由純色填充組成，也可以由點符號填充組成，點符號的填充顏色、大小、形狀均可由用戶編輯。用戶可以根據地圖渲染的效果，動態改變點符號的填充密度。 在線可視化工具的優勢在于，聚合的地圖符號樣式無需傳遞至服務器端，在客戶端各個模塊間可以共享，從而實現動態改變地圖樣式。

2.3 自適應地圖符號配置

通過矢量數據制作網絡地圖，不可避免地要考慮矢量數據的網絡傳輸與渲染效率。為了減少無效數據的渲染，提高用戶的操作體驗，設計自適應地圖符號配置模型。如POI數據包括醫院、學校、銀行、超市、居民區等位置信息，但用戶有可能只關注超市的專題信息，若對全部的POI數據渲染將造成不必要的顯卡計算。

自適應地圖符號配置是將用戶對地圖符號的設置、要素密度、計算機渲染數據的效率、注記的內容等作為輸入變量，以地圖符號的參數、地圖風格、地圖范圍、渲染的要素作為輸出變量。合理設置輸入參數的影像因子，輸入參數與輸出參數形成映射關系，推薦用戶加載的數據量和地圖符號的復雜度等。這些制圖參數以XML格式保存并反饋至渲染引擎模塊，提供渲染樣式，達到自適應快速成圖的目的。具體如下

式中，Style={Colour，Size，Shape，Direction，…};x1,x2,…，xn為輸入變量，如用戶設置參數、要素密度、參數使用的頻率、客戶端渲染效率；Map為地圖；Layer為圖層；Style為樣式，其中Style由顏色(Colour )、大小(Size)、形狀(Shape)、方向(Direction)等視覺變量聚合而成。

上述公式揭示了自適應地圖符號的流程。本文對用戶設置的參數進行分析，并作為自適應推薦參數的依據。自適應地圖符號配置的難點在于用戶的配置信息與成圖規則的關聯，二者難以用統一的連續函數進行表達，暫且由分段函數進行描述，定性定量地進行映射。如本文將用戶設置的填充密度值作為基準，渲染時間和用戶選擇某一數值的頻率作為重要的影響因子。當渲染時間t的值位于區間[0，t1]時，填充密度保持不變；當t位于區間[t1，t2]時，填充密度進行減半操作；當t位于大于t2的區間時，填充方式改為純色填充。同樣，用戶選擇某一數值的頻率，也與制圖參數進行定量關聯，頻率超出某一數值時，此密度設置作為推薦參數直接反饋至渲染引擎。當然，渲染時間越長，影響因子越重，當渲染時間超過用戶能夠承受的等待極限時，渲染時間的影響因子將超過頻率的影響因子，進而把渲染時間對應的符號參數作為推薦值，反饋至用戶。

網絡化時代，網絡地圖用戶具有主動性、不確定性和需求多樣性的特點。網絡傳輸效率是影響用戶體驗的重要指標。基于矢量數據的網絡地圖，不僅要傳輸大規模的矢量數據，還有對地圖符號庫數據進行傳輸，增加了網絡傳輸的壓力。因此自適應地圖符號配置模塊，通過用戶的尺度選擇、樣式偏好、要素設置等因素，挖掘用戶行為與制圖規則之間的關聯關系，綜合考慮客戶端計算機環境的基礎上，為用戶提供快速成圖服務。

3 應用試驗

針對上述矢量瓦片的設計理論，筆者開發了基于JavaScript的網絡地圖可視化工具。試驗數據為面狀全國行政區劃圖，數據量為62 MB，線圖層采用全國高速路網數據，數據量為63 MB，點數據采用全國部分的POI數據，數據量為50 MB。試驗環境：處理器為Intel(R) Core(TM) i7-4720HQ CPU@2.6 GHz，內存為8 GB，系統為Windows7旗艦版64位操作系統。瀏覽器為Chrome版本 59.0.3067.6(正版)。

其原型系統截圖如圖6、圖7所示，根據地圖范圍矢量數據動態加載至瀏覽器，過程流暢、渲染順利。圖6為基本樣式展示效果。矢量數據被地理格網分割，但線、面數據仍能連貫渲染，要素完整性沒有被破壞。右側面板為地圖圖例，能夠展示圖層信息，并根據地圖渲染樣式的不同而動態改變。圖7為編輯地圖符號界面，包括點符號編輯界面、線符號編輯界面和面符號編輯界面。地圖符號經過在線交互可視化工具的編輯，作用于在線地圖，實時改變在線地圖的渲染樣式。試驗結果表明，在線交互可視化工具，能夠充分利用客戶端計算機資源，按需加載大規模矢量數據，動態改變在線地圖樣式，并能夠流暢渲染。

圖6 基本樣式

圖7 編輯工具及效果

4 結 語

本文提出了基于矢量瓦片的在線交互可視化工具的設計方法，并研發了原型系統用于在線地圖的多樣化展示。此方法通過在線地圖符號編輯，實時改變地圖樣式，豐富在線地圖表現方式，滿足用戶對在線地圖多樣化的需求。本文地圖編輯模塊僅考慮了二維地圖符號，對于三維符號還不能很好地支持。自適應地圖符號模塊通過各種參數權重確定符號配置，未能從復雜的函數映射角度去挖掘用戶數據中隱含的信息，這是值得進一步研究的方向。

參考文獻：

[1] 成曉強.面向應需制圖的地圖綜合服務[D].武漢：武漢大學,2013.

[2] 孟立秋.地圖為人人,人人都制圖[J].測繪科學技術學報,2012,29(5):313-320，391.

[3] 趙飛,杜清運.現代專題地圖制圖研究進展與趨勢分析[J].測繪科學,2016,41(1):80-84.

[4] 楊洪泉.大眾電子地圖的應用現狀及發展趨勢[J].測繪通報,2014,(11):37-41.

[5] ROUSE L J，BERGERON S J，HARRIS T M.Participating in the Geospatial Web: Collaborative Mapping，Social Networks and Participatory GIS[M]∥The Geospatial Web.London:Springer，2007:153-158.

[6] 王剛．顧及要素特征的層次增量分塊矢量數據組織與高效網絡傳輸研究[D].武漢：武漢大學，2011.

[7] 楊必勝，李清泉.World Wide Web(WWW)上矢量地圖數據的多分辨率傳輸算法[J].測繪學報，2005，34(4):355-360.

[8] 朱秀麗,周治武,李靜,等.網絡矢量地圖瓦片技術研究[J].測繪通報,2016,(11):106-109，117.

[9] 黃瑞陽.地圖符號共享關鍵技術研究[D].鄭州：解放軍信息工程大學,2013.

[10] ANTONIOU V，MORLEY J，HAKLAY M.Tiled Vectors: A Method for Vector Transmission over the Web[M]∥Web and Wireless Geographical Information Systems.Berlin：Heidelberg Springer，2009:56-71.

[11] 霍亮,楊耀東,劉小勇,等.瓦片金字塔模型技術的研究與實踐[J].測繪科學,2012,37(6):144-146.

[12] YANG B,PURVES R.Efficient Transmission of Vector Data over the Internet[J].International Journal of Geographical Information Science，2007，21(2)：215-237.

[13] 孫晨龍,霍亮,高澤輝.基于矢量瓦片的矢量數據組織方法研究[J].測繪與空間地理信息,2016,39(4):122-124.

[14] MAIELLARO N，VARASANO A.One-page Multimedia Interactive Map[J].ISPRS International Journal of Geo-information，2017:1-16.

[15] 丁克奎,鐘凱文,周旭斌,等.基于WebSocket和GeoJSON的WebGIS的設計與實現[J].測繪通報,2015(2):109-112.

[16] 陳德權.基于GeoJSON的WFS實現方式[J].測繪科學技術學報,2011,28(1):66-69.

[17] 汪浩,田豐,張文俊.基于WebGL的交互平臺設計與實現[J].電子測量技術,2015,38(8):119-122，128.

[18] 曾興國,任福,杜清運,等.公眾參與式地圖制圖服務的設計與實現[J].武漢大學學報(信息科學版),2013,38(8):950-953，997.

[19] 梅洋,李霖.顧及符號關系處理的地圖符號庫設計與實現[J].測繪通報,2007(8):66-70.