OpenLayers （以下簡稱ol）是一個(gè)專為Web GIS 客戶端開發(fā)提供的JavaScript 類庫包，用于實(shí)現(xiàn)標(biāo)準(zhǔn)格式發(fā)布的地圖數(shù)據(jù)訪問。OpenLayers支持從OSM、Bing、MapBox、Stamen和其他任何你能找到的XYZ瓦片資源中提取地圖瓦片并在前端展示。同時(shí)也支持OGC的WMTS、WMS、WFS規(guī)范的瓦片服務(wù)以及ArcGIS規(guī)范的瓦片服務(wù)。

在沒有第三方的支持下，ol可利用'ol/layer/Tile'類與'ol/source/Tile'類可以獲取mvt的數(shù)據(jù)流然后展示在地圖上，但是當(dāng)節(jié)點(diǎn)數(shù)量規(guī)模龐大到數(shù)十萬時(shí)，性能瓶頸便展現(xiàn)出來。于是，高性能的mvt圖層載體便呼之欲出。

關(guān)于高性能的加載mvt，我們首選的是mapbox-gl（以下簡稱mgl）。mgl是基于?WebGL?的開源地圖引擎，可以像ol那樣加載各種源的地圖，因此mgl也會(huì)實(shí)例化一個(gè)map，同樣是實(shí)例，我們?nèi)绾渭嫒菀黄鹉?，這就需要我們把mgl轉(zhuǎn)化成一個(gè)圖形加載到ol的serView方法中。

?我們來分析mgl實(shí)例如何轉(zhuǎn)化可加載的圖層。

如上圖，我們首先要實(shí)例化一個(gè)mgl實(shí)例，和ol一樣，要指定一個(gè)頁面元素作為容器，這個(gè)容器我們指定的和ol的是一樣的。version是必填項(xiàng)，我們這里應(yīng)用版本8。type有多種，我們這里應(yīng)用的mvt是失量類型，所以必然是“vector”。sources是一個(gè)對象，一個(gè)key對應(yīng)一條數(shù)據(jù)源，并且這個(gè)key在下面會(huì)多次應(yīng)用到。tiles是一個(gè)數(shù)組，可以包含多條數(shù)據(jù)請求。layers是一個(gè)數(shù)組，每個(gè)元素代表了一個(gè)圖層，每個(gè)圖層應(yīng)用的數(shù)據(jù)源source就是上述中提到的key，每個(gè)圖層的type可以指定所要渲染的圖形類型，mgl中的圖形類型有多種，我們這里只應(yīng)用了circle和line兩種，綁定好后可在paint中指定所要渲染的圖形樣式。

如上圖，我們實(shí)例化一個(gè)ol的ol/layer/Layer類，然后重寫render方法。我們獲取mgl的地圖實(shí)例中的canvas，設(shè)置它的樣式以滿足視圖基本需要。viewState參數(shù)中包含了地圖的常用信息，中心點(diǎn)、級別、角度等。mgl實(shí)例jumpTo方法指定center視圖的中心點(diǎn)，zoom的級別，bearing相機(jī)（視角）所朝向的方向，animate是否采用動(dòng)畫效果。最后執(zhí)行mgl實(shí)例的_render()方法渲染后返回一個(gè)canvas。這樣我們聲明的mbLayer就可以像ol自己聲明的'ol/layer/Tile'類一樣來加載圖層了。

?這時(shí)我們在地圖看到與之前引用的ol.layer.Tile類時(shí)對比時(shí)，地圖渲染的速度與頁面的流暢度都肉眼可見的提高，這就是我們要達(dá)到的目標(biāo)-高性能的mvt圖層加載。

文：王劍飛