首页 / OpenLayers / 使用示例
自定义鹰眼图
OverviewMap 控件使用独立的图层实例、自定义标签与折叠按钮,与主图保持比例联动。
源码与运行效果
说明
ol.control.OverviewMap 需要一组自己的图层实例,不能复用主图图层,
否则同一个源会在两处渲染。示例单独构造一个 OSM 图层传给 layers,
比例由 ratio 控制。
label 与 collapseLabel 分别对应展开、收起按钮上的文字,
tipLabel 是控件的无障碍提示。折叠状态可以通过
setCollapsed() 外部控制,也能监听 change:collapsed 同步界面。
| 操作 | 结果 |
|---|---|
| 勾选「折叠鹰眼」 | 鹰眼收起,只留一个按钮 |
| 点击鹰眼里的按钮 | 展开或收起,复选框同步 |
| 在主图平移 | 鹰眼内的矩形框跟着移动 |
鹰眼的图层数量越多,重绘成本越高;通常只放一张低级别底图即可。