一、矢量瓦片的基本原理和相關(guān)格式

現(xiàn)階段，電子地圖瓦片主要使用兩種方式介汹，一種是傳統(tǒng)的柵格瓦片，另外一種是新出的矢量瓦片（Vector Tiles）舶沛，前者是采用四叉樹金字塔模型的分級方式嘹承，將地圖切割成無數(shù)大小相等的矩形柵格圖片，由這些矩形柵格圖片按照一定規(guī)則拼接成不同層級的地圖顯示如庭。

矢量瓦片類似柵格瓦片叹卷，是將矢量數(shù)據(jù)用多層次模型分割成矢量要素描述文件存儲在服務(wù)器端，再到客戶端根據(jù)指定樣式進行渲染繪制地圖坪它，在單個矢量瓦片上存儲著投影于一個矩形區(qū)域內(nèi)的幾何信息和屬性信息骤竹。當(dāng)客戶端通過分布式網(wǎng)絡(luò)獲取矢量瓦片、地圖標(biāo)注字體哟楷、圖標(biāo)瘤载、樣式文件等數(shù)據(jù)后，最終在客戶端進行渲染輸出地圖卖擅。

矢量瓦片沒有統(tǒng)一數(shù)據(jù)標(biāo)注鸣奔，mapbox基于Google protocol buffers制定了MAPBOX CECTOR TILE SPECIFICATION通用的矢量瓦片數(shù)據(jù)標(biāo)準，被許多公司和組織采用惩阶。

矢量瓦片數(shù)據(jù)組織分成兩層挎狸，一層是地圖表達范圍內(nèi)的瓦片數(shù)據(jù)集組織模型，另一層是單個瓦片內(nèi)要素的組織模型断楷。

矢量瓦片數(shù)據(jù)集的組織模型類似柵格瓦片金字塔模型锨匆，包含坐標(biāo)系、投影方式冬筒、瓦片編號已實現(xiàn)任意精度恐锣、空間位置與矢量瓦片的對應(yīng)關(guān)系，并被柵格瓦片規(guī)范相互兼容舞痰，這樣方便將矢量瓦片轉(zhuǎn)換成柵格瓦片土榴，畢竟兩者采用相似的投影方式和瓦片編號方式。

單個瓦片要素的組織模型將幾何信息和屬性信息分開存儲响牛，幾何信息主要包括點玷禽、線赫段、面和未知要素類，元數(shù)據(jù)信息包含了圖層屬性和要素屬性矢赁。

用于描述矢量瓦片屬性信息和幾何信息的文件格式主要有GML/Cesium Vector Tiles/GeoJson(.json)/TopoJSON(.topjson)/Google Protocol Buffers(PBF)糯笙，其中GeoJSON是一種基于Javascript對象表示法的地理空間信息數(shù)據(jù)交換格式，通用性強撩银，易讀取给涕，幾乎所有的GIS引擎都支持該格式的動態(tài)渲染電子地圖數(shù)據(jù)，但該格式還是容易有信息冗余的情況蜒蕾。TopoJSON是在GeoJSON上共享幾何要素拓撲編碼稠炬，減少冗余信息的數(shù)據(jù)格式，但它的讀取性較差咪啡，支持該格式的軟件不多首启，所有每次讀取需要使用專門的工具進行轉(zhuǎn)換才可以，支持該格式的軟件有著名的Web三維軟件Cesium JS（該產(chǎn)品是有AGI公司開發(fā)的一款開源三維地圖的JS庫撤摸，主要是可以用于時空數(shù)據(jù)領(lǐng)域的一些三維開發(fā)毅桃，它在github上已經(jīng)有6.2K個star了，github地址如下：https://github.com/CesiumGS/cesium）准夷，PBF是一種更高效輕便的結(jié)構(gòu)化數(shù)據(jù)存儲格式钥飞，將矢量瓦片數(shù)據(jù)打包成矢量瓦片包可以便于網(wǎng)絡(luò)傳輸和數(shù)據(jù)庫存儲，常見的矢量瓦片有VTPK格式（用于ArcGIS）衫嵌、MBTiles格式（用于SQLite數(shù)據(jù)庫存儲）等读宙。

雖然矢量瓦片也采用金字塔的方式進行存儲數(shù)據(jù)，但是由于其默認網(wǎng)格數(shù)較高楔绞，以PBF為例结闸，單個矢量瓦片的網(wǎng)格是4096*4096，所以在視網(wǎng)膜屏等設(shè)備上也顯示地很清楚酒朵，而不會出現(xiàn)鋸齒桦锄，同時這個網(wǎng)格數(shù)可以隨時進行修改調(diào)整，以更精確的方式來記錄幾何位置信息從而適應(yīng)不同屏幕的要求蔫耽。同時结耀，在矢量瓦片中，會將其幾何信息轉(zhuǎn)換成指令集表達匙铡，再將指令存儲到32位無符號整數(shù)進行存儲图甜。而在存儲屬性信息是，則是以不同的是表示鳖眼，geojson直接標(biāo)注黑毅，PBF則是用索引號進行標(biāo)注。

矢量瓦片之所以能夠在客戶端進行快速渲染具帮，主要得益于客戶端圖形渲染技術(shù)的發(fā)展博肋，推動了地圖渲染引擎的快速發(fā)展，常見的圖形渲染技術(shù)有OpenGL/WebGL等蜂厅，而OpenGL和WebGL是底層3D繪圖技術(shù)標(biāo)注匪凡，根據(jù)這些標(biāo)準衍生出了許多地圖渲染引擎，例如使用OpenGL 圖形API的開源3D渲染引擎Tangram（包括用于瀏覽器渲染引擎Tangram-JS和移動終端渲染引擎Tangram-ES掘猿，該產(chǎn)品有mapzen開源提供病游，github地址為https://github.com/tangrams/tangram，具有1.7K個star）稠通、Mapbox使用的Mapbox GL地圖渲染引擎（包含瀏覽器渲染引擎Mapbox GL JS和移動端渲染引擎Mapbox GL Native衬衬，github地址為https://github.com/mapbox/mapbox-gl-js，具有6.4k個star）改橘。

矢量瓦片所使用的樣式文件是用來在客戶端定義繪制地圖數(shù)據(jù)源滋尉、繪制順序和繪制樣式等規(guī)則的文件，比如Mapbox使用的json樣式文件可以讓用戶利用Mapbox GL JS地圖引擎實時渲染出互動性強的3D場景地圖飞主。

二狮惜、矢量瓦片和柵格瓦片的優(yōu)劣勢

使用矢量瓦片地圖來提供地圖比柵格瓦片地圖由更好的顯示效果，互動性也強碌识，實現(xiàn)二三維一體化碾篡，更新速度快，地圖樣式快速切換筏餐，占用空間少开泽，無極縮放顯示等特點。

其中占用空間少是和柵格瓦片進行的對比魁瞪，傳統(tǒng)的柵格瓦片每一張瓦片大小在十幾KB左右穆律，雖然看上去每張瓦片的大小不大，但是若放到全國或世界范圍內(nèi)來看的佩番，需要的瓦片數(shù)據(jù)量極大众旗，按照四叉樹金字塔切割的柵格瓦片的上一級的某張瓦片可以切割成下一級的四張瓦片，因此趟畏，瓦片的總量也是極快的增加贡歧，甚至最終所需存儲空間可以達到TB級別，而矢量瓦片就相對小很對赋秀，以全國數(shù)據(jù)的切圖來看利朵，最終所需的切圖所需存儲空間也僅需要GB級別的就可以了。同時猎莲，由于矢量瓦片的渲染是在客戶端進行的绍弟，它僅需要將請求到的數(shù)據(jù)按照樣式文件進行渲染即可，這讓矢量瓦片在不改變切圖比例與地圖內(nèi)容的情況下著洼，可以很快的調(diào)整地圖樣式樟遣，而不用為調(diào)整地圖樣式而重新進行切圖而叼，并且矢量瓦片和柵格瓦片雖然都需要對矢量數(shù)據(jù)進行切圖預(yù)處理，但實際上由于矢量瓦片切圖僅是針對幾何信息和屬性信息進行分層處理豹悬，所以它相對于柵格瓦片需要對圖像分割來說速度要快很對葵陵，全國數(shù)據(jù)的柵格切圖工作基本上是以周為單位的處理，而矢量瓦片可能僅需幾天時間瞻佛，這對于某些需要快速處理的項目來說具有先天優(yōu)勢脱篙，簡單的將矢量瓦片和柵格瓦片的優(yōu)劣勢進行比較后，可以得到以下表格內(nèi)容：

優(yōu)勢劣勢

矢量瓦片瓦片占用空間低伤柄，瓦片切圖效率高绊困，渲染地圖效果快，可以隨時動態(tài)調(diào)整地圖樣式适刀，地圖分辨率高秤朗。對客戶端性能要求比較高，對舊設(shè)備兼容性存在問題蔗彤。

柵格瓦片瓦片提前渲染川梅，對客戶端性能要求低，性能穩(wěn)定然遏。瓦片占用空間高贫途，瓦片切圖效率低，無法隨時動態(tài)調(diào)整地圖樣式待侵，地圖分辨率低丢早，加載速度比較慢。

鑒于矢量瓦片的優(yōu)勢以及各方面的考慮秧倾，現(xiàn)在大部分互聯(lián)網(wǎng)地圖服務(wù)提供商都開始在其網(wǎng)站上提供的地圖服務(wù)換成矢量瓦片進行地圖展示怨酝，這里面就包括百度地圖、高德地圖那先、騰訊地圖农猬、谷歌地圖等，但是依然會有不少互聯(lián)網(wǎng)地圖服務(wù)提供商依據(jù)在提供柵格瓦片地圖售淡，這里有搜狗地圖斤葱、Bing Map、天地圖·北京等揖闸。（以上信息是截止本次文章撰寫時統(tǒng)計的揍堕，不排除后來存在變動。）

三汤纸、矢量瓦片切片的主要技術(shù)流程

雖有現(xiàn)在矢量瓦片已經(jīng)逐步成為一張地圖瓦片的主流方式衩茸，但是各大廠商的切片工具和運行環(huán)境卻還是各不相同，常用的矢量瓦片切片工具有Mapbox的Mapbox Studio和Tippecanoe（前者需要訪問Mapbox的在線服務(wù)贮泞，后者為Mapbox的開源產(chǎn)品）楞慈、OGC的開源產(chǎn)品GeoServer幔烛、Esri的ArcGIS Pro、Osgeo的開源產(chǎn)品MapServer等囊蓝，這些工具都可以對矢量數(shù)據(jù)按照矢量瓦片要求進行切圖说贝，雖然這些工具不一致，但它們都需要遵循矢量四叉書金字塔模型的原理慎颗，將矢量數(shù)據(jù)發(fā)布成各自格式的矢量瓦片數(shù)據(jù)包，同時言询，它們的主要技術(shù)方法是一致俯萎，基本按照以下流程進行：

①獲取矢量數(shù)據(jù)；

1.1运杭、獲取矢量文件（.shp/.tab等）夫啊；

1.2、矢量數(shù)據(jù)入庫形成矢量數(shù)據(jù)表格辆憔；

②矢量瓦片制作撇眯；

2.1、獲取切圖范圍虱咧、切圖方式熊榛、切圖等級等信息，確保切片后能滿足使用腕巡；

2.2玄坦、獲取多層矢量瓦片數(shù)據(jù)表；

2.3绘沉、將矢量瓦片文件（Geojson/Topojson/PBF等）放入到不同圖層下煎楣；

③服務(wù)發(fā)布與展示

3.1、以服務(wù)的形式將矢量瓦片發(fā)布出來车伞，并提供給客戶端择懂；

3.2、客戶端按照一定調(diào)用規(guī)則調(diào)用矢量瓦片服務(wù)另玖，并按照樣式文件進行前端渲染展示困曙。

基本上大部分的切片工具都是按照這一流程對矢量數(shù)據(jù)進行的切片工作，即使是不同的廠商和切片工具日矫，只需要按照類似過程進行處理即可完成切片工作赂弓，另外在2018年，OGC也參與到矢量瓦片這一技術(shù)的研究中哪轿，驗證了相關(guān)信息盈魁， 并形成了相關(guān)報告，詳見https://www.ogc.org/projects/initiatives/vt-pilot-2018杨耙。

另外赤套，不同切片工具按照不同的切片方案產(chǎn)生的矢量瓦片數(shù)據(jù)占用存儲大小也不一致珊膜，主要原因是在于其保留的矢量瓦片的屬性信息不同導(dǎo)致的容握，在瓦片幾何信息一致的情況下车柠，切片方案內(nèi)制定的矢量瓦片屬性信息規(guī)則不一樣剔氏，其最終產(chǎn)生的矢量瓦片規(guī)則也會存在差異，這種差異最終影響的不僅僅是矢量瓦片占用的存儲空間竹祷，也會影響切片工具在進行切圖工作所需要耗費的時間上谈跛，例如ArcGIS Pro在進行切片是會按照一定抽稀策略來對矢量數(shù)據(jù)的屬性信息進行抽稀，僅保留有用的屬性信息塑陵，而使用GeoServer的切片工具則會保留全部的屬性信息，這就導(dǎo)致兩種最終切片的存儲空間的巨大差異令花，例如一個城市的地圖，用ArcGIS Pro切片會有幾百MB的矢量瓦片包兼都，而用GeoServer則會需要幾百GB的矢量瓦片包嫂沉，因此在使用不同切片工具生產(chǎn)矢量瓦片的時候需要考慮到這些內(nèi)容。

四扮碧、跨平臺調(diào)用矢量瓦片數(shù)據(jù)

由于矢量瓦片沒有統(tǒng)一標(biāo)準输瓜，因此我們在互聯(lián)網(wǎng)上常見的使用矢量瓦片的互聯(lián)網(wǎng)地圖在制作矢量瓦片的時候只需要遵循矢量四叉樹金字塔模型的原理即可，因此芬萍，高德地圖尤揣、百度地圖等互聯(lián)網(wǎng)地圖提供商在使用矢量瓦片的時候紛紛按照自己的矢量瓦片原則進行地圖切片柬祠，這就導(dǎo)致了你在使用它的地圖瓦片時，必須按照它制定的規(guī)則進行渲染才能將地圖顯示出來漫蛔，那么不同切圖工具切出來的矢量瓦片是否夠相互調(diào)用了嗜愈，答案是肯定的莽龟，但是你在調(diào)用它的瓦片時還是需要遵守它的切圖規(guī)則來進行。

跨平臺調(diào)用的時候毯盈，可以通過架設(shè)一套微服務(wù)來將請求的矢量瓦片數(shù)據(jù)規(guī)格轉(zhuǎn)成被請求的矢量瓦片數(shù)據(jù)規(guī)格，通過微服務(wù)將客戶端的請求進行重新編碼后發(fā)送至服務(wù)器端進行請求，再將服務(wù)器端的返回的數(shù)據(jù)按照客戶端的請求規(guī)格再次進行編碼后返回給客戶端進行渲染展現(xiàn)赘阀。

具體如何實現(xiàn)跨越參考不同平臺的的開發(fā)文檔進行設(shè)置，這里就不在細聊了基公，再聊下去就不是常識了。

另外附上一些可以參考的開發(fā)文檔的訪問鏈接：

①GeoServer開發(fā)文檔：https://docs.geoserver.org/

②MapServer開發(fā)文檔：https://www.osgeo.cn/mapserver/documentation.html

③tippecanoe開發(fā)文檔：https://github.com/mapbox/tippecanoe

④Mapbox GL JS開發(fā)文檔：https://docs.mapbox.com/mapbox-gl-js/api/

⑤Mapbox Vector Tiles API 開發(fā)文檔：https://docs.mapbox.com/api/maps/#vector-tiles

⑥ArcGIS Pro快速入門教程：https://pro.arcgis.com/zh-cn/pro-app/get-started/introducing-arcgis-pro.htm

⑦Cesium開發(fā)手冊：https://cesium.com/docs/

原文地址:

聊一聊矢量瓦片的常識 - JackSirius的文章 - 知乎

https://zhuanlan.zhihu.com/p/272203128