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

自定义鹰眼图

OverviewMap 控件使用独立的图层实例、自定义标签与折叠按钮,与主图保持比例联动。

OpenLayers 10.3.1 · 对应官方 overviewmap-custom.html · 更新 2026-10-27
源码与运行效果
运行效果

说明

ol.control.OverviewMap 需要一组自己的图层实例,不能复用主图图层, 否则同一个源会在两处渲染。示例单独构造一个 OSM 图层传给 layers, 比例由 ratio 控制。

label 与 collapseLabel 分别对应展开、收起按钮上的文字, tipLabel 是控件的无障碍提示。折叠状态可以通过 setCollapsed() 外部控制,也能监听 change:collapsed 同步界面。

操作结果
勾选「折叠鹰眼」鹰眼收起,只留一个按钮
点击鹰眼里的按钮展开或收起,复选框同步
在主图平移鹰眼内的矩形框跟着移动

鹰眼的图层数量越多,重绘成本越高;通常只放一张低级别底图即可。