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

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

效果预览

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

开发环境

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

完整代码

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

<!--
 * @Author: 彭麒
 * @Date: 2024/12/7
 * @Email: 1062470959@qq.***
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->
<template>
    <button class="