首页 / OpenLayers / API 文档

VectorTileSource

先看结论

矢量瓦片数据源。负责按 {z}/{x}/{y} 模板请求 PBF 瓦片，用给定的格式解析成要素，再交给矢量瓦片图层渲染。

最后验证 2026-11-03 · OpenLayers 10.3.1 · 更新 2026-10-29 · 引用本文

new ol.source.VectorTile(options)

构造参数

参数	说明
`format`	必填，瓦片解析格式，通常是 `new ol.format.MVT()`
`url`	瓦片地址模板，必须含 `{z}`、`{x}`、`{y}`
`urls`	多子域模板数组，浏览器并发上限内可以提速
`tileUrlFunction`	自定义地址函数，签名 `(tileCoord, pixelRatio, projection)`
`tileGrid`	瓦片网格，未提供时按投影与 `maxZoom` 生成
`projection`	数据投影，默认 `EPSG:3857`
`overlaps`	默认 true，表示瓦片内的要素可能跨出瓦片边界
`wrapX`	默认 true，横向循环平铺世界
`zDirection`	默认 0，瓦片层级增大方向
`attributions`	数据版权说明

常用方法

方法	说明
`getFormat()`	返回解析格式实例
`getOverlaps()`	返回 overlaps 设置
`setUrl(url)`	替换地址模板并清空缓存
`getTileUrlFunction()` / `setTileUrlFunction(fn)`	读写地址函数
`refresh()`	清空瓦片缓存，数据更新后调用
`clear()`	清空已加载瓦片与要素

示例：本地 MVT 瓦片

var source = new ol.source.VectorTile({
  format: new ol.format.MVT({
    idProperty: 'id',
    layerName: 'roads'
  }),
  url: '/tiles/roads/{z}/{x}/{y}.pbf',
  projection: 'EPSG:3857',
  maxZoom: 14,
  wrapX: false,
  attributions: '© 本地路网数据'
});

var layer = new ol.layer.VectorTile({
  source: source,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({ color: '#333', width: 1.2 })
  })
});

overlaps 与裁切

overlaps: true 时不按瓦片边界裁剪要素，线状地物在瓦片拼接处不会断开；代价是同一要素可能被相邻瓦片重复渲染，透明样式下叠加处会变深。确认数据在瓦片外已经裁干净时，改成 false 可以省一部分绘制。

和 XYZ 图层的区别

ol.source.XYZ 拿到的每张瓦片就是最终像素，浏览器直接贴图； ol.source.VectorTile 拿到的是几何数据，需要先解析再逐要素绘制。因此后者能做样式切换、按属性过滤、文字避让，但首帧更慢，对 CPU 也更有压力。

MVT 需要服务端返回正确的压缩。多数瓦片服务对 PBF 使用 gzip，由浏览器自动解压。若手工设置 Content-Encoding 又重复压缩，解析会失败并表现为图层空白，控制台只报一行解析错误。

引用本文

经纬志（2026）。《VectorTileSource》。https://www.jingweizhi.com/openlayers/api/vector-tile-source.html（访问日期 2026-11-03）。