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

瓦片网格与 ArcGIS REST

按 z/x/y 定位瓦片,理解瓦片网格是怎么把一张张图片拼成地图的。

OpenLayers 10.3.1 · 更新 2026-10-28
源码与运行效果
运行效果

说明

图层用 ol.layer.Tile,数据源 ol.source.XYZ 挂上 ol.tilegrid.createXYZ({tileSize: 256}) 生成的网格,tileUrlFunction 按 [z, x, y] 返回图片地址。

官方示例指向 ArcGIS 的 REST 瓦片服务,服务地址交给 ol.source.TileArcGISRest。服务要联网且地址随部署变化,这里把瓦片图片换成页面内用 Canvas 画出,请求路径仍是「网格 → 瓦片坐标 → 图片」,与生产环境一致。

要点

  • 每升一级分辨率减半,瓦片数量变成四倍。
  • tileUrlFunction 对同一 tileCoord 必须返回稳定地址,否则缓存失效。
  • 状态栏读 getTileCoordForCoordAndZ,排查瓦片错位时直接看这里。

换成真实服务时只需把数据源改为 ol.source.TileArcGISRest({url: ...}),图层与视图代码不用动。