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

数值数组瓦片

瓦片里装的不一定是图片,也可以是一段二进制数组。

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

说明

ol.source.TileImage 的 tileLoadFunction 可以自己解码二进制数组,再把结果画到 tile.getImage() 上。

官方示例的瓦片是 numpy 的 .npy 数组。这里数组在页面内按瓦片坐标算出,解码路径与真实服务一致:数组 → 画布 → 图片。

要点

  • 每张瓦片 256×256 个 Uint8,按 py * 256 + px 索引。
  • tile.getImage().src 直接接受 dataURL。
  • 点击取值要再按瓦片内偏移算一次。

二进制解码放到 Worker 里做,连续缩放时主线程不会卡。