首页 / OpenLayers / API 文档

OverviewMap

先看结论

鹰眼图控件。在主图角落放一张缩略图，用矩形框标出当前视野，可直接在缩略图上拖动定位。

最后验证 2026-11-03 · OpenLayers 10.3.1 · 更新 2026-10-27 · 引用本文

new ol.control.OverviewMap(options)

构造参数

参数	说明
`className`	控件类名，默认 `'ol-overviewmap'`
`collapsed`	初始是否折叠，默认 true
`collapsible`	是否允许折叠，默认 true
`label`	展开按钮文字，默认 `'»'`
`collapseLabel`	折叠按钮文字，默认 `'«'`
`layers`	缩略图使用的图层，省略时用内置底图
`target`	控件挂载的容器元素或 id
`tipLabel`	按钮提示文字，默认 `'Overview map'`
`rotateWithView`	缩略图是否随主图旋转，默认 false

常用方法

方法	返回	说明
`getCollapsed()`	boolean	取折叠状态
`setCollapsed(collapsed)`	void	展开或折叠缩略图
`getCollapsible()`	boolean	取是否允许折叠
`setCollapsible(flag)`	void	设置是否允许折叠
`setMap(map)`	void	挂载到地图，通常由 `addControl` 调用

var overview = new ol.control.OverviewMap({
  collapsed: false,
  collapsible: true,
  layers: [
    new ol.layer.Tile({ source: new ol.source.OSM() })
  ],
  tipLabel: '鹰眼图',
  rotateWithView: true
});

map.addControl(overview);
overview.setCollapsed(true);

注意事项

layers 省略时使用内置的 OSM 底图，内网环境会因取不到瓦片而显示空白，应显式传入可用图层。
缩略图与主图共用视图范围，主图缩放到不同层级时缩略图会跟着调整，不需要单独维护。
rotateWithView 为 true 时缩略图随主图旋转，矩形框始终保持与屏幕对齐，否则观感会不一致。
控件不参与主图导出，导出图片时缩略图不会出现在结果里。

引用本文

经纬志（2026）。《OverviewMap》。https://www.jingweizhi.com/openlayers/api/overview-map.html（访问日期 2026-11-03）。