A009：如何在vue+openlayers中实现鹰眼控件(Controls篇)

---

前言

提示：如果对操作流程还不熟悉的话，可以参考之前的文章 ，这些内容会帮助你更好地了解 OpenLayers 的功能点。我们会持续更新相关内容，如果你感兴趣或有这方面的需求，欢迎关注并收藏。

---

一、示例效果图

二、示例简介

本示例介绍如何在openlayers中使添加鹰眼控件。 直接复制下面的vue+openlayers源代码，操作2分钟即可运行实现效果； 注意如果OpenStreetMap无法加载，请加载其他数据源来练习

二、示例源码

<template>
  <div class="wrapper">
    <div>天地图</div>
    <div class="map" id="olMap"></div>
    <div class="custom-mouse-position" id="mouse-position"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import {
    Tile as TileLayer } from "ol/layer";
import XYZ from "ol/source/XYZ";
import {
    defaults as defaultControls, OverviewMap } from "ol/control";
import {
    Map, View } from "ol";
export default {
   
  data(