首页 / deck.gl / API 文档

MVTLayer

先看结论

矢量瓦片图层。按 {x}/{y}/{z} 模板请求 Mapbox Vector Tile，解析后交给内部的 GeoJsonLayer 渲染，样式与 GeoJsonLayer 一致。

最后验证 2026-11-03 · deck.gl 9.0 · 更新 2026-10-29 · 引用本文

new deck.MVTLayer(props)

核心参数

参数	默认	说明
`data`	必填	瓦片地址模板字符串，如 `https://.../{z}/{x}/{y}.mvt`
`minZoom`	0	开始加载瓦片的最小层级
`maxZoom`	—	最大层级，超过后沿用最高层级的瓦片
`tileSize`	512	瓦片像素尺寸，决定层级换算
`uniqueIdProperty`	''	用作要素唯一标识的属性名，跨瓦片去重与拾取时使用
`binary`	false	以二进制方式读取几何，大瓦片解析更快，但访问器不能读 `properties`
`loadOptions`	—	加载选项，如 `{ mvt: { shape: 'geojson' } }`
`getFillColor`	[0, 0, 0, 255]	面填充色
`getLineColor`	[0, 0, 0, 255]	线与面边界颜色
`getLineWidth`	1	线宽
`getPointRadius`	1	点半径，单位见 `pointRadiusUnits`
`pickable`	false	是否参与拾取

示例

var parcels = new deck.MVTLayer({
  id: 'parcels',
  data: 'https://tiles.example.com/parcels/{z}/{x}/{y}.mvt',
  minZoom: 10,
  maxZoom: 16,
  uniqueIdProperty: 'parcel_id',
  getFillColor: function (f) {
    var use = f.properties.use_type;
    if (use === 'residential') return [228, 196, 128, 200];
    if (use === 'commercial') return [168, 116, 196, 200];
    return [140, 160, 190, 180];
  },
  getLineColor: [70, 80, 96, 160],
  getLineWidth: 1,
  lineWidthUnits: 'pixels',
  pickable: true
});

binary 模式的限制

binary: true 时几何以 TypedArray 传递，省掉对象创建的开销，适合十几万要素的瓦片。但访问器拿到的对象没有 properties， getFillColor 这类按属性取色的写法会失效，只能返回常量。需要按属性着色时保持 binary: false。

跨层级的一致性

同一要素在相邻层级会重复出现，uniqueIdProperty 让 deck.gl 能识别它们是同一个对象，拾取结果更稳定。服务端切瓦片时若无唯一标识，可以先用要素属性拼一个哈希值写进数据。

v9 的不可变更新

deck.gl 9 的图层不可变，切换数据源或改样式都要新建实例。用 clone 生成新图层后交给 deckgl.setProps：

var next = parcels.clone({
  data: 'https://tiles.example.com/parcels-v2/{z}/{x}/{y}.mvt',
  getFillColor: [120, 170, 220, 200]
});

deckgl.setProps({ layers: [next] });

瓦片地址里的占位符是必需项。传固定 URL 只会加载一张瓦片，缩放后画面空白。确认模板里同时含 {x}、{y}、{z}，且 {y} 的方向与服务端一致（TMS 与 XYZ 的 y 轴相反）。

引用本文

经纬志（2026）。《MVTLayer》。https://www.jingweizhi.com/deckgl/api/mvt-layer.html（访问日期 2026-11-03）。