首页 / OpenLayers / 使用示例
分层瓦片影像
把一张 1024 × 1024 的影像按金字塔切分:z0 一块顶层瓦片,z4 共 16 块,tileUrlFunction 从主图对应区域裁切绘制。
源码与运行效果
说明
COG 内部按金字塔组织瓦片,读取时按当前缩放挑层级,只解码需要的那一块。示例把
resolutions 定为「W / 256 / 2^z」,形成 5 级金字塔,再把
tileUrlFunction 收到的瓦片范围换算成主图上的像素矩形,用
drawImage 裁切后返回 dataURL。
瓦片范围可能有一部分落在影像之外,所以裁切前要先把像素矩形与主图边界求交, 再把交集重新映射回 256 × 256 的画布,这样边缘瓦片不会出现拉伸。
| 操作 | 结果 |
|---|---|
| 缩小到 z0 | 只剩一块顶层瓦片,覆盖整幅影像 |
| 放大到 z4 | 16 块瓦片拼合,状态栏累计裁切数量 |
| 取消勾选底图 | 影像与深色背景的边界更清楚 |
真实 COG 用 HTTP Range 读取瓦片字节,浏览器端还要配合 GeoTIFF 解析库;示例只演示瓦片选择与裁切这一层逻辑。