首页 / OpenLayers / 使用示例
导出图片
把当前视野连同矢量标注一起导出成 PNG。瓦片和要素分别渲染在不同的画布上, 需要按图层顺序合成到一张新画布。
源码与运行效果
说明
导出必须等瓦片加载完成,否则图片只有背景色。
做法是注册一次性的 rendercomplete 事件,再调用
map.renderSync() 主动触发一轮渲染:
| 步骤 | 作用 |
|---|---|
map.once('rendercomplete') | 等所有可见瓦片绘制结束 |
map.renderSync() | 立即渲染,避免等下一帧 |
查询 .ol-layer canvas | 取得每个图层的画布 |
drawImage 逐个合成 | 按顺序叠加到目标画布 |
toDataURL | 转成图片并触发下载 |
每块图层画布可能带有 transform 缩放,合并前要提取矩阵
并应用到目标画布的上下文,否则导出图会错位或只剩左上角一块。
图层的 opacity 也要同步到 globalAlpha。
如果瓦片服务没有返回跨域头,toDataURL 会抛出
SecurityError。示例捕获了这个异常并在状态栏提示。
解决办法是数据源加 crossOrigin: 'anonymous',同时让服务端开启 CORS。