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

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

---

效果预览

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

---

开发环境

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

---

完整代码

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

<!--
 * @Author: 彭麒
 * @Date: 2024/12/7
 * @Email: [email protected]
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->
<template>
    <button class="back-button" @click="goBack">返回</button>
    <div class="container">
        <div class="w-full flex justify-center flex-wrap">
            <div class="font-bold text-[24px]">在Vue3中使用OpenLayers加载鹰眼控件示例教程</div></div>
        <div id="vue-openlayers"></div>
    </div>
</template>

<script setup>
import "ol/ol.css";
import {ref, onMounted} from "vue";
import {Map, View} from "ol";
import Tile from "ol/layer/Tile";
import {OSM} from "ol/source";
import * as control from "ol/control";
const map = ref(null);
import router from "@/router";
const goBack = () => {
    router.push('/OpenLayers');
};
const initMap = () => {
    map.value = new Map({
        target: "vue-openlayers",
        layers: [
            new Tile({
                source: new OSM(),
            }),
        ],
        view: new View({
            projection: "EPSG:4326",
            center: [114.064839, 22.548857],
            zoom: 4,
        }),
        controls: control.defaults({
            zoom: false,
            doubleClickZoom: false,
            rotate: false,
            attribution: false,
        }).extend([
            new control.OverviewMap({
                collapsed: true,
                collapsible: true,
                rotateWithView: true,
            }),
        ]),
    });
};

onMounted(() => {
    initMap();
});

</script>

<style scoped>
.container {
    width: 840px;
    height: 570px;
    margin: 50px auto;
    border: 1px solid #42B983;
    position: relative;
}

#vue-openlayers {
    width: 800px;
    height: 400px;
    margin: 0 auto;
    border: 1px solid #42B983;
}

</style>

---

代码讲解

核心功能实现

1. 地图初始化

   使用 new Map 创建地图实例，绑定到 vue-openlayers 容器中。

   • 图层使用 OSM 提供的开源地图服务。
   • 视图设置为 EPSG:4326 坐标系，初始化中心点为深圳（[114.064839, 22.548857]）。

2. 鹰眼控件

   使用 OpenLayers 提供的 OverviewMap 控件，在主地图上添加缩略图。

   • 设置 collapsed: true，表示默认折叠。
   • 启用 rotateWithView，确保缩略图与主地图同步旋转。

3. Vue 3 Composition API

   • 通过 ref 定义响应式变量 map。
   • 使用 onMounted 在组件挂载时初始化地图。

---

开发过程中的注意事项

1. OpenLayers 版本问题

   本示例基于 OpenLayers 6+ 版本开发，请确保您的依赖是最新版本。

2. 坐标系设置
   EPSG:4326 是 WGS84 地理坐标系，与标准经纬度一致。如果需要加载 Web Mercator 坐标系，请改为 EPSG:3857。

3. 控件扩展

   OpenLayers 提供了丰富的控件（如缩放、比例尺等），可通过 control.defaults() 进行自定义。

---

总结

通过本教程，您可以快速在 Vue 3 项目中实现带有鹰眼控件的地图应用。这不仅提升了用户体验，还为更复杂的 WebGIS 功能打下基础。希望本文能为您的项目开发带来帮助！

如果您对本文内容有任何疑问或建议，欢迎在评论区留言。

更多 WebGIS 相关内容，请持续关注我的博客！