首页 / OpenLayers / 使用示例
从 Blob 挂载影像
用 canvas 生成 PNG 并转成 Blob,再通过 objectURL 交给 ImageStatic;释放 Blob 后图层源被移除。
源码与运行效果
说明
canvas.toBlob() 回调拿到二进制 PNG,用 URL.createObjectURL()
换成浏览器内部地址,交给 ol.source.ImageStatic 就能当作影像图层显示。
这条链路的优点是全程不经过服务器。
objectURL 会一直占用对应内存,直到 revokeObjectURL() 或页面刷新。
示例在重新生成前先释放旧地址,并把「释放」按钮单独做出来,方便观察图层被移除的效果。
| 操作 | 结果 |
|---|---|
| 点击「生成影像 Blob」 | 影像出现在地图上,状态栏给出大小与类型 |
| 再次点击 | 旧 objectURL 被释放,新影像替换旧影像 |
| 点击「释放 Blob」 | 图层源被置空,影像消失 |
生成过程中不要立刻 revoke:图片解码是异步的,过早释放会让图层拿到一个失效地址。