首页 / OpenLayers / API 文档

TileGrid

先看结论

瓦片网格。定义瓦片从哪个角开始切、每层的分辨率与瓦片像素尺寸，是自建切片服务对图的依据。

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

new ol.tilegrid.TileGrid(options)

构造参数

参数	说明
`origin`	网格原点，通常取范围的左上角
`resolutions`	各层级分辨率数组，由大到小排列
`extent`	网格覆盖范围，用于限制瓦片数量
`tileSize`	瓦片边长像素，默认 256
`tileSizes`	逐层瓦片尺寸数组，与 `resolutions` 对应
`minZoom`	最小层级，默认 0
`maxZoom`	最大层级，省略时由分辨率数组长度推出
`zoomLevels`	层级数，配合 `extent` 与 `maxResolution` 自动生成分辨率
`origins`	逐层原点数组，用于特殊切片方案

常用方法

方法	返回	说明
`getResolution(z)`	number	取该层级的每像素地图单位数
`getOrigin(z)`	Coordinate	取该层级的网格原点
`getResolutions()`	Array<number>	取全部分辨率
`getMinZoom()`	number	取最小层级
`getMaxZoom()`	number	取最大层级
`getZForResolution(r)`	number	按分辨率反查层级
`getTileCoordForCoordAndZ(coord, z)`	TileCoord	坐标转该层级的瓦片行列号
`getTileCoordExtent(tileCoord)`	Extent	按行列号取瓦片覆盖范围

var extent = [-20037508.34, -20037508.34, 20037508.34, 20037508.34];

var grid = new ol.tilegrid.TileGrid({
  origin: ol.extent.getTopLeft(extent),
  extent: extent,
  resolutions: [
    156543.03392804097,
    78271.51696402048,
    39135.75848201024,
    19567.87924100512
  ],
  tileSize: 256,
  minZoom: 0
});

// 把地图坐标换算成 z/x/y
var tileCoord = grid.getTileCoordForCoordAndZ(
  ol.proj.fromLonLat([116.391263, 39.907359]), 3);
console.log(tileCoord);   // [3, 6, 3]

注意事项

resolutions 必须从大到小排列，索引 0 对应最低层级；顺序写反会导致瓦片全部错位。
原点用 ol.extent.getTopLeft(extent) 取得，与常见的 XYZ 切片方案一致；某些本地服务从右下角起算，需要用 origins 单独指定。
只给 zoomLevels、extent、maxResolution 时分辨率会自动推算，但与已有切片目录不一致时仍要写死 resolutions。
瓦片行列号的 y 轴向下增长，与 TMS 的 y 轴相反，自定义 tileUrlFunction 时要做一次翻转。

引用本文

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