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

导出图片

把当前视野连同矢量标注一起导出成 PNG。瓦片和要素分别渲染在不同的画布上, 需要按图层顺序合成到一张新画布。

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

说明

导出必须等瓦片加载完成,否则图片只有背景色。 做法是注册一次性的 rendercomplete 事件,再调用 map.renderSync() 主动触发一轮渲染:

步骤作用
map.once('rendercomplete')等所有可见瓦片绘制结束
map.renderSync()立即渲染,避免等下一帧
查询 .ol-layer canvas取得每个图层的画布
drawImage 逐个合成按顺序叠加到目标画布
toDataURL转成图片并触发下载

每块图层画布可能带有 transform 缩放,合并前要提取矩阵 并应用到目标画布的上下文,否则导出图会错位或只剩左上角一块。 图层的 opacity 也要同步到 globalAlpha。

如果瓦片服务没有返回跨域头,toDataURL 会抛出 SecurityError。示例捕获了这个异常并在状态栏提示。 解决办法是数据源加 crossOrigin: 'anonymous',同时让服务端开启 CORS。