56.在 Vue 3 中使用 OpenLayers 通过 moveend 事件获取地图左上和右下的坐标信息

前言

在现代 Web 开发中，地图应用越来越成为重要的组成部分。OpenLayers 是一个功能强大的 JavaScript 地图库，它提供了丰富的地图交互和操作功能，而 Vue 3 是当前流行的前端框架之一。在本篇文章中，我们将介绍如何在 Vue 3 中集成 OpenLayers，并使用 moveend 事件来获取地图的左上角和右下角坐标信息。

通过获取这些坐标，你可以实现地图的视野限制、统计分析等多种功能。我们将详细讲解如何在 Vue 3 中完成这一功能的实现，并通过代码示例演示具体步骤。

1. 环境准备

首先，我们需要在项目中引入 Vue 3 和 OpenLayers 库。

安装 Vue 3

如果你还没有一个 Vue 3 项目，可以通过 Vue CLI 快速创建一个新项目：

npm install -g @vue/cli vue create vue-openlayers cd vue-openlayers

在创建过程中选择 Vue 3 配置。

安装 OpenLayers

接下来，安装 OpenLayers：

npm install ol

2. 创建 Vue 组件

在这个项目中，我们将创建一个 Vue 组件，该组件初始化了 OpenLayers 地图，并使用 moveend 事件来获取地图视图的左上和右下坐标。

组件代码

<!--
 * @Author: 彭麒
 * @Date: 2025/1/3
 * @Email: 1062470959@qq.com
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->
<template>
  <div class="container">
    <div class="w-full flex justify-center flex-wrap">
      <div class="font-bold text-[24px]">在Vue3中使用OpenLayers通过moveend事件获取地图左上和右下的坐标信息</div>
    </div>
    <h4 style="color: orangered">
      左上坐标：{{ lt }}；右下坐标：{{ rb }}
    </h4>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import {getTopLeft, getBottomRight} from 'ol/extent';
const lt = ref([]); // 左上坐标
const rb = ref([]); // 右下坐标
const map = ref(null); // 地图对象
// 初始化地图
const initMap = () => {
  map.value = new Map({
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
    ],
    target: 'vue-openlayers',
    view: new View({
      center: [116, 39],
      projection: 'EPSG:4326',
      zoom: 2,
      extent: [-180, -85, 180, 85],
    }),
  });
  moveendEvent(); // 绑定 moveend 事件
};

// 处理 moveend 事件
const moveendEvent = () => {
  map.value.on('moveend', () => {
    const extent = map.value.getView().calculateExtent(map.value.getSize());
    const gtl = getTopLeft(extent);
    lt.value = [Number(gtl[0].toFixed(2)), Number(gtl[1].toFixed(2))];
    const grb = getBottomRight(extent);
    rb.value = [Number(grb[0].toFixed(2)), Number(grb[1].toFixed(2))];
  });
};
// 在组件挂载时初始化地图
onMounted(() => {
  initMap();
});

</script>

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

#vue-openlayers {
  width: 800px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid #42b983;
  position: relative;
}
</style>

代码说明

1. 引入依赖

我们通过 import 语句引入了 ol/ol.css 和 OpenLayers 中需要使用的模块（如 Map, View, TileLayer, OSM 等）。这将确保地图可以正确渲染。

2. 组件中的 ref 和 onMounted

• lt 和 rb 分别是存储左上角和右下角坐标的响应式变量。
• map 用来保存 OpenLayers 地图对象。

在 onMounted 生命周期钩子中，我们初始化了地图，并绑定了 moveend 事件。

3. 事件处理

在 moveendEvent 方法中，我们使用 map.value.getView().calculateExtent() 获取当前视图的范围（即地图的显示区域）。然后通过 getTopLeft 和 getBottomRight 方法获取左上和右下的坐标。

3. 运行效果

将上述代码放入一个新的 Vue 组件中，并确保你的项目已经正确安装了 OpenLayers。运行 npm run serve 启动项目后，访问页面，移动地图视图后，页面上会实时显示地图左上和右下的坐标。

4. 总结

通过本篇文章的示例代码，我们实现了在 Vue 3 中集成 OpenLayers，并通过 moveend 事件获取地图视图的左上角和右下角坐标。这对于进行地图定位、视野管理等功能非常有用。

希望这篇文章能帮助你更好地理解如何在 Vue 3 中使用 OpenLayers，并掌握地图事件的处理方式。如果你有任何问题或进一步的需求，欢迎在评论区留言交流。

作者：彭麒

联系方式： 1062470959@qq.com

通过这篇博文，你可以帮助读者更好地了解如何使用 Vue 3 和 OpenLayers 集成地图，处理地图事件以及如何在前端获取地图的坐标信息。