经纬志
首页 / OpenLayers / 使用示例

鹰眼图

主图缩放到街区级别后,用户容易失去方位感。右上角的鹰眼图始终显示更大范围, 红框标出当前视野,拖动红框就能平移主图。

OpenLayers 10.3.1 · 更新 2026-10-27
源码与运行效果
运行效果

说明

鹰眼图本质是一个嵌套的小 Map,所以它需要自己的图层, 不能直接复用主图的图层实例。示例给鹰眼单独建了一个 OSM 瓦片源。 解析出来的范围框样式由 CSS 里的 ol-overviewmap-box 控制, 不写也会显示默认的红色方框。

构造参数作用
layers鹰眼图内部使用的图层数组
collapsed初始是否收起,示例设为 false
collapsible是否显示折叠按钮,示例关掉以保持常显
tipLabel按钮的 title 文本
ratio鹰眼视野相对主图的比例,默认 5

默认控件集里已经包含一个鹰眼,示例在 ol.control.defaults.defaults({ overviewMap: false }) 里关掉它,再用 extend 加入自定义配置的版本。 不关的话会出现两个鹰眼。

鹰眼图内的鼠标操作默认只用来拖动范围框。 想让它也能缩放,可以给鹰眼控件设置 collapsible: true,展开后滚轮作用在鹰眼上。