当前位置: 首页 > 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…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...