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

分层瓦片影像

把一张 1024 × 1024 的影像按金字塔切分:z0 一块顶层瓦片,z4 共 16 块,tileUrlFunction 从主图对应区域裁切绘制。

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

说明

COG 内部按金字塔组织瓦片,读取时按当前缩放挑层级,只解码需要的那一块。示例把 resolutions 定为「W / 256 / 2^z」,形成 5 级金字塔,再把 tileUrlFunction 收到的瓦片范围换算成主图上的像素矩形,用 drawImage 裁切后返回 dataURL。

瓦片范围可能有一部分落在影像之外,所以裁切前要先把像素矩形与主图边界求交, 再把交集重新映射回 256 × 256 的画布,这样边缘瓦片不会出现拉伸。

操作结果
缩小到 z0只剩一块顶层瓦片,覆盖整幅影像
放大到 z416 块瓦片拼合,状态栏累计裁切数量
取消勾选底图影像与深色背景的边界更清楚

真实 COG 用 HTTP Range 读取瓦片字节,浏览器端还要配合 GeoTIFF 解析库;示例只演示瓦片选择与裁切这一层逻辑。