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

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 集成地图,处理地图事件以及如何在前端获取地图的坐标信息。

相关文章:

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

前言 在现代 Web 开发中&#xff0c;地图应用越来越成为重要的组成部分。OpenLayers 是一个功能强大的 JavaScript 地图库&#xff0c;它提供了丰富的地图交互和操作功能&#xff0c;而 Vue 3 是当前流行的前端框架之一。在本篇文章中&#xff0c;我们将介绍如何在 Vue 3 中集…...

文件本地和OSS上传

这里写目录标题 前端传出文件后端本地存储阿里云OSS存储上传Demo实现上传ConfigurationProperties 前端传出文件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>上传文件</title> </head&g…...

elementui table 表格 分页多选,保持选中状态

elementui多选时分页&#xff0c;解决选中状态无法保留选中项问题&#xff1a; 在el-table标签中加入row-key&#xff0c;row-key的值取当前数据里的唯一key在el-table-column selection 项中加入以下:reserve-selection“true” 完成后&#xff0c;将需要清空的地方 ( 如返回…...

MSE+Range案例

MSE的demo实现思路&#xff1a;首先准备fmp4格式的视频地址或者切片&#xff0c;接着将MSE挂载到video上&#xff0c;创建createObjectURL转二进制数据&#xff0c;fetch请求在线地址&#xff0c;分段请求&#xff0c;监听这个数据流的获取状态&#xff0c;当这个ReadyState为o…...

C# 设计模式(结构型模式):代理模式

C# 设计模式&#xff08;结构型模式&#xff09;&#xff1a;代理模式 在软件开发中&#xff0c;有时我们需要通过某种方式间接地访问一个对象&#xff0c;这时就可以使用代理模式&#xff08;Proxy Pattern&#xff09;。代理模式通过引入一个代理对象来控制对目标对象的访问…...

YOLO——pytorch与paddle实现YOLO

YOLO——pytorch与paddle实现YOLO 本文将深入探讨YOLO目标检测的理论基础&#xff0c;并通过PyTorch和PaddlePaddle两个深度学习框架来展示如何实现基础的YOLO模型。我们将首先介绍YOLO的基本概念&#xff0c;这些理论基础是理解和实现YOLO网络的基础。通过PyTorch和PaddlePad…...

持续大额亏损,销量增幅有限,北汽蓝谷依旧黯然神伤

撰稿 | 行星 来源 | 贝多财经 “起了个大早&#xff0c;赶了个晚集”&#xff0c;用在如今的北汽蓝谷身上再合适不过。 2025年的第一个工作日&#xff0c;北汽蓝谷新能源科技股份有限公司&#xff08;SH:600733&#xff0c;简称“北汽蓝谷”&#xff09;对外披露了子公司北京…...

C# OpenCV机器视觉:背景减除与前景分离

在实验室的一角&#xff0c;阳光仿若一个急性子的小精灵&#xff0c;迫不及待地穿过窗帘缝隙&#xff0c;在阿强的桌面上欢快跳跃&#xff0c;洒下一片片斑驳陆离的光影&#xff0c;似乎在催促着阿强赶紧开启今日的奇妙探索。阿强端坐在桌前&#xff0c;眼神炽热地盯着眼前那台…...

C语言return与 ? :

上次讲解过一次函数&#xff0c;函数要配合return返回东西&#xff0c;但是在编写一些程序的时候我发现了很多冷门逻辑语法还没有掌握&#xff0c;当时讲课也是看一眼就过去了&#xff08;死去的记忆开始攻击我&#xff09; Return&#xff0c;爽&#xff01; 现在有一个小问…...

【论文阅读】SCGC : Self-supervised contrastive graph clustering

论文地址&#xff1a;SCGC : Self-supervised contrastive graph clustering - ScienceDirect 代码地址&#xff1a; https://github.com/gayanku/SCGC 摘要 图聚类旨在发现网络中的群体或社区。越来越多的模型使用自编码器&#xff08;autoencoders&#xff09;结合图神经网…...

python pyqt5+designer的信号槽和动态显示

至少需要两个文件&#xff0c;一个是python的主文件&#xff0c;一个是designer的UI文件 1.对UI文件的处理 首先需要将UI文件转化成python文件&#xff0c;并且引入到主文件中。 2.在主文件中接受UI上的一些动作和返回主文件处理的数据到UI界面上。 框中选中的部分&#xff0c…...

版本控制系统Helix Core 2024.2增强功能:与OpenTelemetry协议集成、Delta同步和传输等

“Perforce团队非常高兴为您带来Helix Core 2024.2版本&#xff0c;它拥有众多旨在提高团队效率、优化工作流程的增强功能。通过新的Open Telemetry协议集成&#xff0c;团队现在可以轻松将结构化日志集成到可观测性平台中。DeltaTransfer现在也适用于同步操作——这是2024.1版…...

certificate verify failed: unable to get local issuer certificate (_ssl.c:10

出现 “certificate verify failed: unable to get local issuer certificate (_ssl.c:10)” 这个错误通常是因为Python在尝试建立HTTPS连接时&#xff0c;无法验证服务器的SSL证书。这可能是因为本地系统中缺少必要的根证书&#xff0c;或者服务器的证书链不完整&#xff0c;导…...

关于大一上的总结

大一上总结 前言 源于学长们都喜欢写总结&#xff0c;今晚也正好听见一首有点触动心灵的歌&#xff0c;深有感慨&#xff0c;故来此写下这篇总结 正文 1.暑假前的准备 暑假之前姑且还是学习了基本的C语法&#xff0c;大概是到了结构体的地方&#xff0c;进度很慢&#xff0…...

JavaScript的基础知识

在鸿蒙操作系统的应用开发中&#xff0c;JavaScript作为一种广泛使用的编程语言&#xff0c;扮演着重要的角色。无论是构建用户界面还是实现业务逻辑&#xff0c;理解JavaScript的基础知识都是必不可少的。本文将深入探讨鸿蒙开发中与JavaScript相关的几个关键概念&#xff1a;…...

数据结构之单链表(超详解)

文章目录 1. 单链表1.1 概念、结构1.2 结点1.2.1 链表的性质 2. 链表的打印3. 尾插、头插创建结点尾插头插 4. 尾删、头删尾删头删 5. 查找指定结点6. 指定位置之前、之后插入数据指定位置之前插入数据指定位置之后插入数据 7. 删除指定位置结点7.1 删除指定位置之后结点8. 链表…...

告别编程困惑:GDB、冯诺依曼、操作系统速通指南

&#x1f31f; 快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。&#x1f31f; &#x1f6a9;用通俗易懂且不失专业性的文字&#xff0c;讲解计算机领域那些看似枯燥的知识点&#x1f6a9; 目录 前言 一…...

网络分析工具-tcpdump

文章目录 前言一、tcpdump基础官网链接命令选项详解常规过滤规则tcpdump输出 一、tcpdump实践HTTP协议ICMP状态抓包 前言 当遇到网络疑难问题的时候&#xff0c;抓包是最基本的技能&#xff0c;通过抓包才能看到网络底层的问题 一、tcpdump基础 tcpdump是一个常用的网络分析工…...

基于AI边缘计算盒子的智慧零售场景智能监控解决方案

一、方案背景 随着零售业的快速发展&#xff0c;传统零售模式面临着诸多挑战&#xff0c;如人力成本高、管理效率低、顾客体验不佳等。智慧零售借助人工智能、物联网等技术手段&#xff0c;实现对零售场景的全面感知和智能管理。AI边缘计算盒子作为智慧零售的关键技术之一&…...

STM32G431收发CAN

1.硬件连接 PB8作为CAN_RX&#xff0c;PB9作为CAN_TX&#xff0c;连接一个CAN收发器TJA1051T/3 2. CubeMX里配置CAN 设置连接FDCAN1的参数&#xff0c;使用1个标准过滤器&#xff0c;波特率位500K 使能FDCAN1的中断 3 自动生成代码 3.1 初始化 static void MX_FDCAN1_In…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...