二、Mapbox 樣式渲染圖層
顯然我們目前的地圖需要一些樣式。 VectorTile? 圖層的樣式與 Vector? 圖層的樣式工作方式完全相同。那里描述的樣式在這里也適用。
對于這樣的地圖，創建數據驅動的樣式（對矢量圖層操作）非常簡單。但矢量切片也用于街道地圖，其中樣式通常會根據地圖的縮放級別而有很大差異。在這些情況下，手動完成所有這些操作可能太耗時。
在網絡制圖的歷史中，人們曾多次嘗試創建用于設計地圖樣式的工具和格式。最流行的格式可能是 SLD 和 CartoCSS。一個圖形工具是 Atlas Styler。但這些格式或工具都沒有真正方便使用。
Mapbox 最終推出了 Mapbox Studio，一個非常用戶友好的樣式編輯器，以及 Mapbox 樣式格式。 Mapbox Style 格式易于手動讀寫，并且受到越來越多的應用程序的支持。圖形開源編輯器 Maputnik 可作為 Mapbox Studio 的獨立替代品，用于創建和修改 Mapbox 樣式文件。
使用 Mapbox 樣式定義
在 OpenLayers 中使用具有 Mapbox 樣式的矢量切片圖層有兩種方法。最簡單的是 MapboxVector? 層。它配置了一個指向 Mapbox 樣式文檔的 url。讓我們嘗試一下。
首先，添加所需的導入：
import MapboxVectorLayer from 'ol/layer/MapboxVector';
我們要使用的切片數據集是 https://cloud.maptiler.com/maps/bright/。要將其添加到我們的示例中，您需要一個 MapTiler 帳戶（請將下面代碼中的密鑰替換為您的密鑰）（作為練習下面的秘鑰是可以用的）。或者，如果您有 Mapbox 帳戶，則可以使用 Mapbox 中的原始地圖（請參閱下面代碼中的注釋）。
const layer = new MapboxVectorLayer({styleUrl:'https://api.maptiler.com/maps/bright/style.json?key=lirfd6Fegsjkvs0lshxe',// or, instead of the above, try// styleUrl: 'mapbox://styles/mapbox/bright-v9',// accessToken: 'Your token from https://mapbox.com/'
});
map.addLayer(layer);
上面的代碼替換了上一步中的 VectorTileLayer? 。當一切按預期進行時，我們終于可以享受一張漂亮的世界地圖了，并放大到布宜諾斯艾利斯！
?
?
從 Mapbox 樣式定義構建完整的地圖
Mapbox 樣式格式不僅僅用于設置矢量數據的樣式。它是為了描述整個地圖，及其所有源和圖層及其初始視圖配置（例如中心和縮放級別）。
ol-mapbox-style 包（屬于 Workshop 依賴項的一部分）向 OpenLayers 添加了對 Mapbox 樣式格式的支持。因此，將矢量切片圖層與 OpenLayers 一起使用的第二種方法是讓 ol-mapbox-style? 創建整個地圖。如果您想嘗試這樣做，可以將 main.js? 中的整個代碼替換為：
import olms from 'ol-mapbox-style';
olms('map-container', // HTML容器的ID。'https://api.maptiler.com/maps/bright/style.json?key=lirfd6Fegsjkvs0lshxe' // 自定義地圖樣式的URL，含API密鑰。
);
會顯示出來和上面一樣的地圖。
嘗試此操作后，切換回之前的代碼，因為我們將研究如何與矢量切片地圖進行交互。
?
)
