The VectorTile layer VectorTile 图层
我们现在已经知道如何去加载瓦片图片了，并且我们也见识过多中不同的方法去加载并渲染矢量的数据。但是如果我们想将瓦片快速地传输到浏览器，并动态设置样式呢？这就是vector tiles存在的意义了。OpenLayers的VectorTile图层支持矢量瓦片。
A world map rendered from vector data 用矢量数据渲染一个世界地图
我们使用和 Basics 这一节中同样的index.html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenLayers</title>
<style>
html, body, #map-container {
margin: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="map-container"></div>
</body>
</html>
通常来说，我们将index.html文件保存在workshop文件夹的根目录中。
在这个应用中，我们在根目录中使用一个全新的mian.js文件，并添加下面的依赖：
import 'ol/ol.css';
import {Map, View} from 'ol';
import MVT from 'ol/format/MVT';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import {fromLonLat} from 'ol/proj';
数据源将采用OpenStreetMap的街道地图数据。瓦片的提供者为了演示而提供给我们免费访问的权限，但是需要访问密钥。所以需要我们阅读https://cloud.maptiler.com/的条款，并从中获取我们自己的key。下面的代码展示了我们获取的key，并将其定义为一个常量以便后续使用。
// See https://cloud.maptiler.com/ for terms and API key
const key = 'lirfd6Fegsjkvs0lshxe'; // use your own instead
和之前一样我们要创建一个地图，但是我们这次以圣地亚哥为中心并放大一点点。
const map = new Map({
target: 'map-container',
view: new View({
center: fromLonLat([-117.1625, 32.715]),
zoom: 6
})
});
我们要用到的图层类型是VectorTileLayer，数据源是VectorTileSource：
const layer = new VectorTileLayer({
source: new VectorTileSource({
attributions: [
'<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a>',
'<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>'
],
format: new MVT(),
url: `https://api.maptiler.com/tiles/v3/{z}/{x}/{y}.pbf?key=${key}`,
maxZoom: 14
})
});
map.addLayer(layer);
数据源只提供从0-14的缩放等级，所以我们需要将这一消息传送给source。矢量瓦片图层通常针对512像素的瓦片进行优化，这也是矢量瓦片数据源的瓦片网格的默认值。数据提供者要求我们必须在attributions中展示数据来源，所以我们要在source的配置中进行相应设置。
现在一个没有样式的矢量瓦片地图就做好了：
