劉勝杰，倪慧珠，郭見兵，徐舒暢

(1. 杭州師范大學(xué)信息科學(xué)與技術(shù)學(xué)院，浙江 杭州 311121； 2. 浙江省測(cè)繪科學(xué)技術(shù)研究院，浙江 杭州 311100)

矢量瓦片具有數(shù)據(jù)體量小、傳輸和渲染速度快等特點(diǎn)，支持動(dòng)態(tài)更改樣式[1]，在前端有較好的交互性和空間分析能力[2]，為減少網(wǎng)絡(luò)傳輸、縮短響應(yīng)時(shí)間、提升用戶體驗(yàn)提供了可能[3-4]，因此矢量瓦片技術(shù)成為當(dāng)今電子地圖開發(fā)中優(yōu)先考慮的技術(shù).

對(duì)于矢量瓦片的生成、存儲(chǔ)、加載和渲染，學(xué)者做了深入研究.翁世杰等[5]從矢量切片數(shù)據(jù)和瀏覽器渲染兩方面基于GeoServer發(fā)布矢量切片服務(wù)，利用GeoWebCache對(duì)空間數(shù)據(jù)庫(kù)中存儲(chǔ)的矢量數(shù)據(jù)實(shí)時(shí)切片，并使用Mapbox GL加載矢量瓦片服務(wù)，簡(jiǎn)化了矢量切片地圖的配圖過(guò)程.但GeoWebCache產(chǎn)生的矢量切片會(huì)存儲(chǔ)到硬盤中，數(shù)據(jù)量大時(shí)對(duì)計(jì)算機(jī)性能也有一定的要求.李飛等[6]針對(duì)實(shí)時(shí)路況數(shù)據(jù)提出了一種基于矢量切片的實(shí)時(shí)路況可視化方法，利用GeoServer內(nèi)置切片工具和WebService將矢量數(shù)據(jù)通過(guò)瀏覽器屏幕范圍實(shí)現(xiàn)自動(dòng)化切片后,將瓦片存入文件數(shù)據(jù)庫(kù)，并將空間數(shù)據(jù)、實(shí)時(shí)屬性數(shù)據(jù)存入Oracle 11g數(shù)據(jù)庫(kù)進(jìn)行管理.如有矢量數(shù)據(jù)出現(xiàn)更新，則需要將更新后的矢量切片替換到文件數(shù)據(jù)庫(kù)中，過(guò)程比較耗時(shí)，同時(shí)也增加了服務(wù)器的壓力.王尊等[7]采用分布式存儲(chǔ)方式逐級(jí)存儲(chǔ)每個(gè)層級(jí)的矢量瓦片，運(yùn)用緩存技術(shù)，并使用Cesium加載矢量瓦片實(shí)現(xiàn)海量矢量數(shù)據(jù)的有效存儲(chǔ)和管理，提高了前端瓦片數(shù)據(jù)的響應(yīng)速度.

上述學(xué)者們都基于矢量瓦片做了大量研究，對(duì)于矢量數(shù)據(jù)的實(shí)時(shí)切片與動(dòng)態(tài)加載也有一定的成果，但大多研究使用的數(shù)據(jù)類型較少.如果數(shù)據(jù)量較大并且數(shù)據(jù)類型較多的情況下，這些方法實(shí)現(xiàn)矢量數(shù)據(jù)的切片無(wú)疑會(huì)給服務(wù)器端增加壓力，并降低矢量數(shù)據(jù)在前端的加載、渲染效率.本文設(shè)計(jì)實(shí)現(xiàn)了一種矢量數(shù)據(jù)動(dòng)態(tài)切片方案，將矢量數(shù)據(jù)存儲(chǔ)到數(shù)據(jù)庫(kù)中，通過(guò)前端向后端動(dòng)態(tài)請(qǐng)求矢量瓦片來(lái)完成對(duì)數(shù)據(jù)庫(kù)中矢量數(shù)據(jù)實(shí)時(shí)、動(dòng)態(tài)切片成MVT格式矢量瓦片的操作，然后在界面中實(shí)時(shí)加載、渲染，并使用Redis設(shè)計(jì)矢量瓦片緩存方式，以提高矢量瓦片的請(qǐng)求、加載速度，并實(shí)現(xiàn)矢量數(shù)據(jù)在前端的可視化加載.

1 技術(shù)實(shí)現(xiàn)

1.1 矢量數(shù)據(jù)的動(dòng)態(tài)、實(shí)時(shí)切片技術(shù)

本文使用Spring Boot框架，將矢量數(shù)據(jù)通過(guò)PostGIS導(dǎo)入到關(guān)系型數(shù)據(jù)庫(kù)PostgreSQL中.數(shù)據(jù)庫(kù)中一張表對(duì)應(yīng)一個(gè)矢量圖層，表中包含了矢量數(shù)據(jù)的空間位置信息和基本屬性信息，如編號(hào)、名稱等，對(duì)空間位置信息列添加GiST索引[8]，用以加快獲取指定范圍內(nèi)矢量數(shù)據(jù)的速度.根據(jù)矢量瓦片金字塔原理[9-10]，前端向后端發(fā)送要加載的屏幕范圍內(nèi)矢量瓦片縮放層級(jí)、行號(hào)、列號(hào)的請(qǐng)求，后端接收到這些參數(shù)的請(qǐng)求之后，通過(guò)公式計(jì)算出當(dāng)前瓦片所在的經(jīng)緯度范圍，將此范圍使用多邊形構(gòu)造方法構(gòu)造出一個(gè)多邊形.使用MVT坐標(biāo)空間轉(zhuǎn)換方法將構(gòu)造好的多邊形轉(zhuǎn)換成基于MVT坐標(biāo)空間的多邊形，并從PostgreSQL中檢索、獲取此范圍的矢量數(shù)據(jù).使用MVT格式矢量瓦片構(gòu)造方法將檢索結(jié)果轉(zhuǎn)換成MVT格式的二進(jìn)制矢量瓦片，將得到的MVT矢量瓦片即時(shí)返回給前端加載顯示.矢量數(shù)據(jù)動(dòng)態(tài)、實(shí)時(shí)切片的過(guò)程如圖1所示.

圖1 矢量數(shù)據(jù)動(dòng)態(tài)、實(shí)時(shí)切片過(guò)程Fig.1 Dynamic, real-time slicing process of vector data

該方法體現(xiàn)了矢量數(shù)據(jù)切片的實(shí)時(shí)性和動(dòng)態(tài)性，提高了前端加載、渲染的速度和效率，并且一次性把所有的圖層全部都加載出來(lái)，通過(guò)前端實(shí)現(xiàn)對(duì)不同層級(jí)下圖層顯示的控制，減輕了后端服務(wù)器的壓力.

1.2 基于Redis的矢量瓦片緩存設(shè)計(jì)

作為展示所用的矢量數(shù)據(jù)并不會(huì)頻繁更新，因此把已經(jīng)請(qǐng)求過(guò)的矢量瓦片放到緩存中，再請(qǐng)求該矢量瓦片時(shí)，從緩存中取出相對(duì)應(yīng)的矢量瓦片信息即可.如果有矢量數(shù)據(jù)更新，不需要將緩存全部清空，而是清除掉更新范圍內(nèi)對(duì)應(yīng)的各個(gè)層級(jí)的矢量瓦片緩存，簡(jiǎn)化了后端的操作步驟，提升了前后端交互的速率，實(shí)現(xiàn)了緩存中矢量瓦片的高效調(diào)度.

本文采用Redis緩存，以方便矢量數(shù)據(jù)的更新，設(shè)計(jì)Hash類型[11]為緩存策略，將矢量瓦片分組存儲(chǔ).矢量瓦片加載過(guò)程中，設(shè)置矢量瓦片初始加載的最小層級(jí)為第4層，最大層級(jí)為20層.矢量瓦片的存儲(chǔ)結(jié)構(gòu)如表1所示，其中，key相當(dāng)于組號(hào)，用地圖初始加載層級(jí)矢量瓦片的層級(jí)、行號(hào)、列號(hào)作為編號(hào)表示，field是該組4層級(jí)后矢量瓦片的編號(hào)，value是存儲(chǔ)field中對(duì)應(yīng)的二進(jìn)制矢量瓦片信息，矢量瓦片存儲(chǔ)的具體信息如表2所示.

表1 矢量瓦片的存儲(chǔ)結(jié)構(gòu)表Tab.1 Storage structure of vector tiles

表2 矢量瓦片存儲(chǔ)具體信息表Tab.2 Storage specific information of vector tiles

1.3 基于MapBox的矢量瓦片加載

矢量瓦片是將矢量數(shù)據(jù)分割的矢量要素描述文件.在單個(gè)矢量瓦片上存儲(chǔ)著投影于一個(gè)矩形區(qū)域內(nèi)的幾何信息和屬性信息，常見的矢量切片形式有3種：GeoJSON、TopoJSON和MVT(MapBox Vector Tile)[12-13]，其中，MapBox公司制定的瓦片數(shù)據(jù)標(biāo)準(zhǔn)格式MVT是目前較為通用的矢量瓦片數(shù)據(jù)組織文件格式[14]，它基于Google protocol buffers[15]，壓縮率最高，體積最小.

本文采用MapBox GL作為前端加載、渲染矢量瓦片的框架.MapBox GL框架主動(dòng)計(jì)算出屏幕應(yīng)顯示出的矢量瓦片的層級(jí)、行號(hào)和列號(hào)，然后將計(jì)算出的層級(jí)、行號(hào)和列號(hào)作為參數(shù)向后端發(fā)送請(qǐng)求，后端解析瓦片數(shù)據(jù)，將請(qǐng)求得到MVT格式的矢量瓦片返回給前端.MapBox GL則會(huì)將MVT矢量瓦片通過(guò)前端的樣式配置、渲染，最終顯示到屏幕中.矢量瓦片的加載過(guò)程如圖2所示.

圖2 矢量瓦片的加載過(guò)程Fig.2 Loading process of vector tiles

2 實(shí)驗(yàn)分析

實(shí)驗(yàn)使用OpenStreetMap浙江省范圍內(nèi)的水系、公路、鐵路、建筑、土地利用等13種類型的矢量數(shù)據(jù)，存儲(chǔ)到PostgreSQL數(shù)據(jù)庫(kù)中，基于B/S架構(gòu)用Spring Boot和MapBox設(shè)計(jì)開發(fā)系統(tǒng)對(duì)矢量數(shù)據(jù)進(jìn)行操作和管理，并測(cè)試這些矢量數(shù)據(jù)在6—20級(jí)動(dòng)態(tài)、實(shí)時(shí)切片并且渲染、加載到前端界面的時(shí)長(zhǎng)和性能.本文使用的測(cè)試數(shù)據(jù)如表3所示，數(shù)據(jù)量達(dá)到44.9萬(wàn).

表3 測(cè)試數(shù)據(jù)Tab.3 Test data

對(duì)上述測(cè)試數(shù)據(jù)進(jìn)行矢量數(shù)據(jù)切片、緩存、加載操作.初次加載時(shí)需要訪問(wèn)數(shù)據(jù)庫(kù)，并對(duì)對(duì)應(yīng)的矢量數(shù)據(jù)進(jìn)行切片操作，前端界面加載需等待一定的時(shí)間.第二次前端再請(qǐng)求該范圍的矢量數(shù)據(jù)時(shí)，從緩存中獲取對(duì)應(yīng)范圍內(nèi)的矢量瓦片，若緩存中不存在，再?gòu)臄?shù)據(jù)庫(kù)中讀取并切片.兩次矢量瓦片加載時(shí)間的比較如圖3所示，為使折線圖有更明顯的比較效果，圖中每個(gè)矢量瓦片第一次的加載時(shí)間分別是實(shí)際時(shí)間的千分之一倍.從圖3中可以看到，層級(jí)越低，矢量瓦片中所包含的數(shù)據(jù)量就越大，加載時(shí)間也越會(huì)長(zhǎng)，編號(hào)為6-53-26的瓦片大小為8.7 Mb，第一次加載該瓦片的時(shí)間達(dá)到了2.4 min；隨著層級(jí)的增加，矢量瓦片包含的信息越來(lái)越小，加載時(shí)間也越來(lái)越快，對(duì)于同一個(gè)范圍的矢量數(shù)據(jù)，第二次請(qǐng)求要比第一次快很多.同時(shí)也可以看出，在低層級(jí)時(shí)，相同的矢量瓦片第一次和第二次的加載速度相差很大，隨著層級(jí)越大，加載速度差距越來(lái)越小,最后加載時(shí)間基本在3 ms左右.

圖3 矢量瓦片第一次和第二次切片加載時(shí)間Fig.3 First and second slice loading time of vector tile

王尊[7]在業(yè)務(wù)邏輯層對(duì)矢量數(shù)據(jù)進(jìn)行邏輯切分，完成矢量瓦片數(shù)據(jù)的構(gòu)建，并基于Memcached設(shè)計(jì)實(shí)現(xiàn)了服務(wù)端緩存機(jī)制，在線發(fā)布矢量瓦片數(shù)據(jù)，保證矢量瓦片數(shù)據(jù)的在線傳輸效率，然后使用Cesium框架加載矢量圖層.對(duì)本文方法與王尊[7]方法進(jìn)行7—13級(jí)矢量瓦片加載平均時(shí)間的比較，結(jié)果顯示本文所用的方法加載時(shí)間較快，尤其是隨著矢量瓦片層級(jí)的增加，兩種方法的加載時(shí)間相差更加顯著.兩種方法各層級(jí)所需加載的平均時(shí)間的比較如圖4所示.

圖4 兩種方法平均加載時(shí)間比較Fig.4 Comparison of the average load time of two methods

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

本文設(shè)計(jì)實(shí)現(xiàn)的矢量數(shù)據(jù)動(dòng)態(tài)、實(shí)時(shí)切片并緩存加載的方法，已應(yīng)用到浙江省新型基礎(chǔ)測(cè)繪資源庫(kù)管理系統(tǒng)的地理空間數(shù)據(jù)展示模塊，該系統(tǒng)目前存儲(chǔ)了湖州市、嘉興市、紹興市、麗水市和杭州市等部分矢量數(shù)據(jù)，界面中加載了縣級(jí)行政區(qū)劃、街道、興趣點(diǎn)、河流等55個(gè)線、面圖層，大約有50萬(wàn)條數(shù)據(jù).通過(guò)測(cè)試，系統(tǒng)之前使用GeoServer服務(wù)調(diào)用矢量瓦片的方式平均耗時(shí)為5 s左右，而使用本文所提出的方式對(duì)地理空間矢量數(shù)據(jù)的加載、渲染平均耗時(shí)為800 ms,效率得到了顯著提升.如圖5所示，界面一次性加載55個(gè)圖層，MapBox GL框架對(duì)各個(gè)圖層用不同的顏色表示，還原了標(biāo)準(zhǔn)矢量地圖的配色，使得浙江省地理空間矢量數(shù)據(jù)的展示得到了美化，滿足用戶浙江省地理空間矢量數(shù)據(jù)展示的要求，增強(qiáng)了系統(tǒng)的可用性.

圖5 浙江省測(cè)繪資源庫(kù)管理系統(tǒng)地理空間數(shù)據(jù)展示(以杭州市為例)Fig.5 Geospatial data of the management system of fundamental surveying resource databases in Zhejiang (Hangzhou)

以嘉興市秀洲區(qū)為例的地理空間矢量數(shù)據(jù)不同層級(jí)下顯示的內(nèi)容如圖6和圖7所示，矢量瓦片的層級(jí)越小，矢量瓦片中所包含的內(nèi)容就越多，所需要加載的時(shí)間也越長(zhǎng)，所顯示的內(nèi)容也越不清楚，所以隨著縮放比例尺的減小，地理空間矢量數(shù)據(jù)的加載速度越來(lái)越慢.由于系統(tǒng)使用的緩存機(jī)制來(lái)存儲(chǔ)矢量瓦片，系統(tǒng)只在初次加載地理空間矢量瓦片時(shí)會(huì)出現(xiàn)卡頓現(xiàn)象.

4 結(jié)束語(yǔ)

本文基于關(guān)系型數(shù)據(jù)庫(kù)PostgreSQL、緩存數(shù)據(jù)庫(kù)Redis，提出了一種矢量數(shù)據(jù)存儲(chǔ)，動(dòng)態(tài)、實(shí)時(shí)對(duì)矢量數(shù)據(jù)切片以及矢量瓦片緩存的方式，設(shè)計(jì)Redis緩存的結(jié)構(gòu)用于提高緩存的獲取速度，并在數(shù)據(jù)庫(kù)中存儲(chǔ)了44.9萬(wàn)條數(shù)據(jù)用來(lái)測(cè)試該方式的可行性.該方法省去了傳統(tǒng)方式發(fā)布矢量瓦片服務(wù)或者預(yù)先切片的步驟，在實(shí)現(xiàn)實(shí)時(shí)、動(dòng)態(tài)矢量數(shù)據(jù)的切片方面具有較大的優(yōu)勢(shì)，有助于更好地管理矢量數(shù)據(jù).測(cè)試實(shí)驗(yàn)表明，實(shí)時(shí)生成的矢量切片存入緩存的方式，提高了矢量數(shù)據(jù)的加載速度，時(shí)間效率更高.這種矢量數(shù)據(jù)高效、實(shí)時(shí)、動(dòng)態(tài)的切片方式以及前端加載速度提升的方法，也已經(jīng)成功應(yīng)用到浙江省新型基礎(chǔ)測(cè)繪資源庫(kù)管理系統(tǒng)中，后續(xù)將基于當(dāng)前的研究，利用分布式存儲(chǔ)，實(shí)現(xiàn)海量矢量瓦片加載速度的進(jìn)一步提升.