首页 / deck.gl / API 文档

TileLayer

先看结论

按视口调度瓦片，把每个瓦片交给自定义子图层渲染。

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

new deck.TileLayer(props)

参数

参数	默认	说明
`data`	—	地址模板，含 `{z}` `{x}` `{y}`，或返回瓦片的函数
`tileSize`	`512`	瓦片像素边长，Esri 栅格为 256
`minZoom` / `maxZoom`	`0` / `30`	可用层级
`maxRequests`	`6`	并发请求上限
`refinementStrategy`	`'best-available'`	父瓦片替换策略
`renderSubLayers`	—	为每个瓦片生成图层
`onTileError`	—	加载失败回调

示例

new deck.TileLayer({
  id: 'basemap',
  data: 'https://services.arcgisonline.com/ArcGIS/rest/services/' +
        'Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}',
  tileSize: 256,
  maxZoom: 16,
  renderSubLayers: function (props) {
    var bb = props.tile.boundingBox;
    return new deck.BitmapLayer(props, {
      data: null,
      image: props.data,
      bounds: [bb[0][0], bb[0][1], bb[1][0], bb[1][1]]
    });
  }
});

地址模板的顺序

XYZ 瓦片模板是 {z}/{x}/{y}，但 Esri 的 MapServer 用 {z}/{y}/{x}。照抄模板而不改顺序，瓦片会拼成错位的图案。

与数据的层级

TileLayer 的瓦片渲染在子图层里，叠放在瓦片上的业务图层应放在 layers 数组靠后位置，而不要塞进 renderSubLayers，否则每个瓦片都会重复绘制同一批要素。

并发数不是越大越好。浏览器对同域并发有限制，超过阈值的请求会排队，反而拖慢首屏。默认 6 已经够用。

引用本文

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