经纬志
首页 / OpenLayers / 使用示例

自定义瓦片网格的矢量瓦片

瓦片网格由原点、分辨率序列与瓦片尺寸决定;把范围收窄到中国后,同一套 {z}/{x}/{y} 地址只会请求范围内的瓦片,橙色网格标出当前级别覆盖的瓦片。

OpenLayers 10.3.1 · 对应官方 mapbox-vector-tiles-advanced.html · 更新 2026-10-27
源码与运行效果
运行效果

说明

官方示例加载 Mapbox 矢量瓦片,并给瓦片图层指定自定义网格。网格由 ol.tilegrid.TileGrid 的 origin、resolutions、 tileSize 三件事决定;示例沿用 EPSG:3857 的全球原点与标准分辨率序列, 只把 extent 收窄到中国范围,于是同样的 {z}/{x}/{y} 地址 只会请求范围内的瓦片。

橙色网格由 grid.getTileCoordExtent([z, x, y]) 逐块算出范围,再用 ol.geom.Polygon.fromExtent() 画成矢量要素,可以直接看到当前级别覆盖了哪些瓦片。

操作结果
取消勾选「显示瓦片网格」网格矢量层隐藏,底图保留
缩放地图请求的瓦片数量随级别变化,状态栏显示网格信息

resolutions 必须从粗到细排列,origin 与投影左上角一致,否则瓦片会错位一格。