首页 / Leaflet / 使用示例
图像叠加
把一张栅格图片按经纬度范围铺在地图上，并支持调透明度、切帧与显隐。
源码与运行效果
说明
叠加图用 canvas 现场生成，画布 480×320 对应经度 0.24°、纬度 0.12°。 在 39.9°N 附近，1° 经度的地面长度约为 1° 纬度的 0.77 倍， 两组跨度按这个比例取，图片铺上去后斑点才不会被拉成椭圆。
换帧时调用 setUrl 而不是移除再新建图层，图片节点保持不变，
不会出现白底闪动。透明度和显隐分别走 setOpacity 与
map.removeLayer，后者保留了图层的配置，重新添加即可恢复。
| 要点 | 本例做法 | 换成真实数据时 |
|---|---|---|
| 定位方式 | bounds 四角对齐 | GeoTIFF 先由服务端裁切成等经纬度 PNG，或转成瓦片 |
| 比例 | 画布比例与经纬跨度匹配 | 用 224/256 之类像素换算，按所在纬度校正 |
| 跨域 | data URL，无跨域问题 | 远程图片需服务端返回 CORS 头，否则导出画布会被污染 |
| 层级 | zIndex: 2 | 与矢量叠加时放在 overlayPane，靠 pane 层级控制 |
| 交互 | interactive: false | 需要点图取像素时设 true，并用 getElement() 读坐标 |
图片过大时浏览器会先解码再缩放，低端设备上首帧可能延迟 1–2 秒。 栅格图控制在 2048×2048 以内，更大的范围交给瓦片或 WebGL 图层处理。