当前位置：首页 > news >正文

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

news 2025/7/19 15:35:30

前言

在现代 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>