首页 / OpenLayers / 使用示例
瓦片网格与 ArcGIS REST
按 z/x/y 定位瓦片,理解瓦片网格是怎么把一张张图片拼成地图的。
源码与运行效果
说明
图层用 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: ...}),图层与视图代码不用动。