首页 / OpenLayers / 使用示例
鹰眼图
主图缩放到街区级别后,用户容易失去方位感。右上角的鹰眼图始终显示更大范围, 红框标出当前视野,拖动红框就能平移主图。
源码与运行效果
说明
鹰眼图本质是一个嵌套的小 Map,所以它需要自己的图层,
不能直接复用主图的图层实例。示例给鹰眼单独建了一个 OSM 瓦片源。
解析出来的范围框样式由 CSS 里的 ol-overviewmap-box 控制,
不写也会显示默认的红色方框。
| 构造参数 | 作用 |
|---|---|
layers | 鹰眼图内部使用的图层数组 |
collapsed | 初始是否收起,示例设为 false |
collapsible | 是否显示折叠按钮,示例关掉以保持常显 |
tipLabel | 按钮的 title 文本 |
ratio | 鹰眼视野相对主图的比例,默认 5 |
默认控件集里已经包含一个鹰眼,示例在
ol.control.defaults.defaults({ overviewMap: false })
里关掉它,再用 extend 加入自定义配置的版本。
不关的话会出现两个鹰眼。
鹰眼图内的鼠标操作默认只用来拖动范围框。
想让它也能缩放,可以给鹰眼控件设置
collapsible: true,展开后滚轮作用在鹰眼上。