首页 / Leaflet / 使用示例
鹰眼图
右下角缩略图显示主图在更大范围中的位置，主图移动时矩形跟随，点击缩略图反向跳转。
源码与运行效果
说明
缩略图不是图片，而是第二个 L.map 实例，挂在 150×110 的 div 上。
拖动、滚轮、双击、键盘全部关闭，只保留点击跳转；主图的视野用
L.rectangle 画在缩略图上，随 move 与 zoomend 更新。
| 处理 | 原因 |
|---|---|
| 独立的瓦片图层实例 | 一个图层对象只能挂在一张地图上，不能复用 |
| 缩略图级别 = 主图 − 4 | 保证缩略图总能看到主图周边的更大范围 |
syncing 标志 | 双向联动时避免回调互相触发形成循环 |
延迟 invalidateSize | 容器尺寸稳定后校正，防止首帧读到 0 |
视野矩形用 interactive: false，否则点击矩形会被它拦截，缩略图的点击跳转只在矩形外生效。
缩略图上的瓦片数量不多，额外开销可以接受。
主图缩到很低级别时，缩略图级别按 max(3, z − 4) 兜底，避免出现 0 级或负数级别。
需要固定范围的鹰眼时，给缩略图设置 maxBounds 并关闭拖动。