首页 / OpenLayers / 使用示例
`r`n PMTiles 影像瓦片
只要 tileUrlFunction 能按 z/x/y 返回一个图片地址，瓦片源就不关心数据来自归档还是即时绘制。
源码与运行效果
说明
示例用 ol.tilegrid.createXYZ 建网格，tileUrlFunction 收到瓦片坐标后画一张 256×256 的 canvas，缓存在对象里并返回 data URL。已载瓦片数由源的 tileloadend 事件累加。官方示例从 PMTiles 归档直接取瓦片字节，本页用 canvas 生成同坐标的图片，装载链路完全一致。
| 操作 | 结果 |
|---|---|
| 拖动或缩放地图 | 新进入视野的瓦片即时生成并缓存 |
| 取消勾选「瓦片图层」 | 叠加层隐藏，OSM 底图保留 |
| 调整透明度滑块 | 叠加层整体变淡，便于对照底图 |
要点
- 网格的
tileSize必须与生成图片的边长一致，否则瓦片错位。 - 缓存键用 z/x/y，避免重复绘制同一块瓦片。
真实 PMTiles 归档需要先解析头部再取瓦片字节，装进 tileLoadFunction 后同样只需返回图片。