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

离屏画布图标

图标先在离屏画布画好,再转成位图交给样式使用。

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

说明

图标可以在离屏画布上画好,再交给 ol.style.Icon 的 img。支持 transferToImageBitmap 时,位图能直接被渲染器使用。

示例五种颜色各画一次 48×48 的定位针,位图缓存后复用到全部要素。浏览器不支持离屏画布时退回普通 canvas,效果一致。

要点

  • anchor 取 [0.5, 0.96],把针尖对准坐标。
  • 同一颜色只建一个 Icon,减少内存占用。
  • transferToImageBitmap 之后原画布不可再绘制。

按两倍尺寸绘制图标再缩小显示,高分屏下边缘更干净。