13.在 Vue 3 中使用OpenLayers加载鹰眼控件示例教程

在 WebGIS 开发中，鹰眼控件 是一个常用的功能，它可以为用户提供当前地图位置的概览，帮助更好地定位和导航。在本文中，我们将基于 Vue 3 的 Composition API 和 OpenLayers，创建一个简单的鹰眼控件示例。

---

效果预览

在最终效果中，地图中会加载一个支持缩放、拖动的主地图，同时左下角显示一个缩略图（鹰眼图），展示全局视图并同步更新。

---

开发环境

• 框架：Vue 3
• 地图库：OpenLayers 6+
• 样式工具：内置 CSS

---

完整代码

以下是实现鹰眼控件的完整代码：

<!--
 * @Author: 彭麒
 * @Date: 2024/12/7
 *