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. 组件中的 refonMounted
  • ltrb 分别是存储左上角和右下角坐标的响应式变量。
  • map 用来保存 OpenLayers 地图对象。

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

3. 事件处理

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


3. 运行效果

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


4. 总结

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

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


作者:彭麒

联系方式: 1062470959@qq.com


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/501349.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Codigger集成Copilot:智能编程助手

在信息技术的快速发展中&#xff0c;编程效率和创新能力的提升成为了开发者们追求的目标。Codigger平台通过集成Copilot智能编程助手&#xff0c;为开发者提供了一个强大的工具&#xff0c;以增强其生产力、创新力和技能水平。本文将深入探讨Codigger与Copilot的集成如何为IT专…

用uniapp写一个播放视频首页页面代码

效果如下图所示 首页有导航栏&#xff0c;搜索框&#xff0c;和视频列表&#xff0c; 导航栏如下图 搜索框如下图 视频列表如下图 文件目录 视频首页页面代码如下 <template> <view class"video-home"> <!-- 搜索栏 --> <view class…

Java高频面试之SE-08

hello啊&#xff0c;各位观众姥爷们&#xff01;&#xff01;&#xff01;本牛马baby今天又来了&#xff01;哈哈哈哈哈嗝&#x1f436; 成员变量和局部变量的区别有哪些&#xff1f; 在 Java 中&#xff0c;成员变量和局部变量是两种不同类型的变量&#xff0c;它们在作用域…

在Typora中实现自动编号

文章目录 在Typora中实现自动编号1. 引言2. 准备工作3. 自动编号的实现3.1 文章大纲自动编号3.2 主题目录&#xff08;TOC&#xff09;自动编号3.3 文章内容自动编号3.4 完整代码 4. 应用自定义CSS5. 结论 在Typora中实现自动编号 1. 引言 Typora是一款非常流行的Markdown编辑…

Oracle exp和imp命令导出导入dmp文件

目录 一. 安装 instantclient-tools 工具包二. exp 命令导出数据三. imp 命令导入数据四. expdp 和 impdp 命令 一. 安装 instantclient-tools 工具包 ⏹官方网站 https://www.oracle.com/cn/database/technologies/instant-client/linux-x86-64-downloads.html ⏹因为我们在…

小程序发版后,强制更新为最新版本

为什么要强制更新为最新版本&#xff1f; 在小程序的开发和运营过程中&#xff0c;强制用户更新到最新版本是一项重要的策略&#xff0c;能够有效提升用户体验并保障系统的稳定性与安全性。以下是一些主要原因&#xff1a; 1. 功能兼容 新功能或服务通常需要最新版本的支持&…

设计模式 创建型 原型模式(Prototype Pattern)与 常见技术框架应用 解析

原型模式&#xff08;Prototype Pattern&#xff09;是一种创建型设计模式&#xff0c;其核心思想在于通过复制现有的对象&#xff08;原型&#xff09;来创建新的对象&#xff0c;而非通过传统的构造函数或类实例化方式。这种方式在需要快速创建大量相似对象时尤为高效&#x…

办公 三之 Excel 数据限定录入与格式变换

开始-----条件格式------管理规则 IF($A4"永久",1,0) //如果A4包含永久&#xff0c;条件格式如下&#xff1a; OR($D5<60,$E5<60,$F5<60) 求取任意科目不及格数据 AND($D5<60,$E5<60,$F5<60) 若所有科目都不及格 显示为红色 IF($H4<EDATE…

黑马JavaWeb开发跟学(十四).SpringBootWeb原理

黑马JavaWeb开发跟学 十四.SpringBootWeb原理 SpingBoot原理1. 配置优先级2. Bean管理2.1 获取Bean2.2 Bean作用域2.3 第三方Bean 3. SpringBoot原理3.1 起步依赖3.2 自动配置3.2.1 概述3.2.2 常见方案3.2.2.1 概述3.2.2.2 方案一3.2.2.3 方案二 3.2.3 原理分析3.2.3.1 源码跟踪…

linux-26 文件管理(四)install

说一个命令&#xff0c;叫install&#xff0c;man install&#xff0c;install是什么意思&#xff1f;安装&#xff0c;install表示安装的意思&#xff0c;那你猜install是用来干什么的&#xff1f;猜一猜干什么的&#xff1f;安装软件&#xff0c;安装第三方软件&#xff0c;错…

Win11+WLS Ubuntu 鸿蒙开发环境搭建(二)

参考文章 penHarmony南向开发笔记&#xff08;一&#xff09;开发环境搭建 OpenHarmony&#xff08;鸿蒙南向开发&#xff09;——标准系统移植指南&#xff08;一&#xff09; OpenHarmony&#xff08;鸿蒙南向开发&#xff09;——小型系统芯片移植指南&#xff08;二&…

多文件比对

要比对多个存储目录下的文件是否存在重复文件&#xff0c;可以通过以下步骤实现 MD5 值的比对&#xff1a; 1. 提取文件路径 首先从你的目录结构中获取所有文件的路径&#xff0c;可以使用 find 命令递归列出所有文件路径&#xff1a;find /traixxxnent/zpxxxxx -type f >…

46. Three.js案例-创建颜色不断变化的立方体模型

46. Three.js案例-创建颜色不断变化的立方体模型 实现效果 知识点 Three.js基础组件 WebGLRenderer THREE.WebGLRenderer是Three.js提供的用于渲染场景的WebGL渲染器。它支持抗锯齿处理&#xff0c;可以设置渲染器的大小和背景颜色。 构造器 antialias: 是否开启抗锯齿&am…

【51单片机零基础-chapter6:LCD1602调试工具】

实验0-用显示屏LCD验证自己的猜想 如同c的cout,前端的console.log() #include <REGX52.H> #include <INTRINS.H> #include "LCD1602.h" int var0; void main() {LCD_Init();LCD_ShowNum(1,1,var211,5);while(1){;} }实验1-编写LCD1602液晶显示屏驱动函…

【GO基础学习】gin的使用

文章目录 模版使用流程参数传递路由分组数据解析和绑定gin中间件 模版使用流程 package mainimport ("net/http""github.com/gin-gonic/gin" )func main() {// 1.创建路由r : gin.Default()// 2.绑定路由规则&#xff0c;执行的函数// gin.Context&#x…

杰盛微 JSM4056 1000mA单节锂电池充电器芯片 ESOP8封装

JSM4056 1000mA单节锂电池充电器芯片 JSM4056是一款单节锂离子电池恒流/恒压线性充电器&#xff0c;简单的外部应用电路非常适合便携式设备应用&#xff0c;适合USB电源和适配器电源工作&#xff0c;内部采用防倒充电路&#xff0c;不需要外部隔离二极管。热反馈可对充电电流进…

Linux实验报告14-Linux内存管理实验

目录 一&#xff1a;实验目的 二&#xff1a;实验内容 1、编辑模块的源代码mm_viraddr.c 2、编译模块 3、编写测试程序mm_test.c 4、编译测试程序mm_test.c 5、在后台运行mm_test 6、验证mm_viraddr模块 一&#xff1a;实验目的 (1)掌握内核空间、用户空间&#xff…

供需平台信息发布付费查看小程序系统开发方案

供需平台信息发布付费查看小程序系统主要是为了满足个人及企业用户的供需信息发布与匹配需求。 一、目标用户群体 个人用户&#xff1a;寻找兼职工作、二手物品交换、本地服务&#xff08;如家政、维修&#xff09;等。 小微企业&#xff1a;推广产品和服务&#xff0c;寻找合…

overleaf写学术论文常用语法+注意事项+审阅修订

常用语法 导入常用的宏包 \usepackage{cite} \usepackage{amsmath,amssymb,amsfonts} \usepackage{algorithmic} \usepackage{algorithm} \usepackage{graphicx} \usepackage{subfigure} \usepackage{textcomp} \usepackage{xcolor} \usepackage{lettrine} \usepackage{booktab…

动态规划<八> 完全背包问题及其余背包问题

目录 例题引入---找到解决问题模版 LeetCode 经典OJ题 1.第一题 2.第二题 3.第三题 其余的一些背包问题 1.二维费用的背包问题 例题引入---找到解决问题模版 OJ 传送门 牛客 DP42 【模板】完全背包 画图分析: 使用动态规划解决(第二问与第一问的不同之处用绿色来标记) 1.…