首页 / MapLibre / 使用示例
地图截图
点一下按钮，把当前视角连同图层导出成 PNG，右侧立即出现缩略图与下载链接。
关键开关只有一个：preserveDrawingBuffer。
源码与运行效果
说明
WebGL 画布默认在每帧结束后丢弃绘制内容，直接读取只能得到透明空白。
创建地图时设置 preserveDrawingBuffer: true，读像素才是可靠的。
导出的是设备像素尺寸，高分屏上会比容器大一圈。
需要固定 1200×800 时，给 toDataURL 的结果再套一层离屏 canvas 缩放。
| 配置 | 取值 | 说明 |
|---|---|---|
preserveDrawingBuffer | true | 截图的前提，略增显存占用 |
getCanvas() | canvas | 取到底层画布 |
toDataURL('image/png') | data URL | 可直接用于 img 与下载 |
a.download | 文件名 | 浏览器直接保存，无需后端 |
地图上的 DOM 元素（标记、弹窗、控件）不在 WebGL 画布内，截图不会包含它们。
需要一起导出时，用 html2canvas 之类的库叠一层，
或把标记改成 symbol 图层。
只在截图功能确实需要时开启这个选项。长期开启会让每帧多保留一份缓冲， 低端设备上的帧率与内存都有可见的代价。