首页 / Leaflet / 使用示例
地图导出图片
把当前视野的瓦片与矢量拼到一张 canvas 上，导出为 PNG 并自动下载。
源码与运行效果
说明
导出不是截图，而是重新绘制：先按 map.getPixelBounds() 算出视野覆盖的瓦片行列，
把每块瓦片画到离屏 canvas 的对应位置，再取 overlayPane 里的
canvas 渲染器，按 0,0 叠上去。地图本身的 HTML 标记不在画布里，
所以注记与版权文字在导出时手工绘制。
瓦片图层必须加 crossOrigin: 'anonymous'，且瓦片服务返回
Access-Control-Allow-Origin，否则 canvas 被污染，
toDataURL 会直接抛 SecurityError。
示例中把渲染器的 padding 设为 0，画布尺寸与视野严格一致，
省去偏移换算。服务没有开放跨域时，代码会退化为只导出矢量图层，并给出状态提示。
| 步骤 | 用到的接口 | 不做会怎样 |
|---|---|---|
| 算瓦片范围 | getPixelBounds() | 用容器像素当起点，边缘缺一条瓦片 |
| 瓦片跨域 | crossOrigin: 'anonymous' | 没开跨域时无法读取像素，只能导出矢量 |
| 矢量合成 | overlayPane 中的 canvas | SVG 渲染的矢量不在 canvas 里，导出会丢图层 |
| 画布对齐 | 渲染器 padding: 0 | 画布比视野大一圈，矢量整体偏移 |
| 注记 | 手动 fillText | HTML 标记与气泡不会出现在导出图上 |
分辨率固定为 CSS 像素，高分屏导出的图会偏小。需要 2 倍图时把 canvas 宽高
乘以 2，并在绘图前 ctx.scale(2, 2)，同时按 2 倍尺寸重新请求瓦片，
否则瓦片会被拉伸放大、文字发虚。