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

121.在 Vue3 中使用 OpenLayers 实现去掉鼠标右键默认菜单并显示 Feature 信息

article 2026/1/10 10:49:54

🎯 实现效果

👇 本文最终实现的效果如下：

✅ 地图初始化时绘制一个多边形；
✅ 鼠标 右键点击地图任意位置；
✅ 若命中 Feature，则弹出该图形的详细信息；
✅ 移除浏览器默认的右键菜单，保留地图交互的完整控制。

💡 整个功能基于 Vue3 + OpenLayers 完成，采用 Composition API 编写，代码清晰易维护。

✨ 前言

在开发 Web GIS 项目时，我们常常希望用户右键地图时执行自定义操作，而不是触发浏览器默认的右键菜单。本篇文章将手把手教你如何用 Vue3 + OpenLayers：

禁用默认右键菜单；
获取右键点击位置；
判断是否点击到了地图上的某个图形（Feature）࿱

121.在 Vue3 中使用 OpenLayers 实现去掉鼠标右键默认菜单并显示 Feature 信息

🎯 实现效果 👇 本文最终实现的效果如下： ✅ 地图初始化时绘制一个多边形； ✅ 鼠标右键点击地图任意位置； ✅ 若命中 Feature，则弹出该图形的详细信息； ✅ 移除浏览器默认的右键菜单，保留地图交互的完整控制。 💡 整个功能基于 Vue3 + OpenLayers 完成，采用 Com…...

编程日记 2026/1/1 23:05:08

仓颉造字，亦可造AI代理

CangjieMagic入门教程本文将为您提供一份关于CangjieMagic代码库的详细入门教程，CangjieMagic托管于GitCode - 全球开发者的开源社区,开源代码托管平台。这是一个基于仓颉编程语言的LLM（大语言模型）Agent开发平台，具有独特的Age…...

编程日记 2025/12/8 20:45:58

进阶篇第 6 篇：时间序列遇见机器学习与深度学习

进阶篇第 6 篇：时间序列遇见机器学习与深度学习 (图片来源: Tara Winstead on Pexels) 在上一篇中，我们探讨了如何通过精心的特征工程，将时间序列预测问题转化为机器学习可以处理的监督学习任务。我们学习了如何创建滞后特征、滚动统计特征…...

编程日记 2026/1/6 18:50:49

【音视频】音频解码实战

音频解码过程⾳频解码过程如下图所示： FFmpeg流程关键函数关键函数说明： avcodec_find_decoder：根据指定的AVCodecID查找注册的解码器。av_parser_init：初始化AVCodecParserContext。avcodec_alloc_context3：为…...

编程日记 2026/1/4 11:12:24

DOCA介绍

本文分为两个部分： DOCA及BlueField介绍如何运行DOCA应用，这里以DNS_Filter为例子做大致介绍。 DOCA及BlueField介绍： 现代企业数据中心是软件定义的、完全可编程的基础设施，旨在服务于跨云、核心和边缘环境的高度分布式应用工作…...

编程日记 2026/1/9 17:37:09

# 利用迁移学习优化食物分类模型：基于ResNet18的实践

利用迁移学习优化食物分类模型：基于ResNet18的实践在深度学习的众多应用中，图像分类一直是一个热门且具有挑战性的领域。随着研究的深入，我们发现利用预训练模型进行迁移学习是一种非常有效的策略，可以显著提高模型的性能&#…...

编程日记 2026/1/1 10:43:40

洗车小程序系统前端uniapp 后台thinkphp

洗车小程序系统前端uniapp 后台thinkphp 支持多门店分销在线预约套餐卡等...

编程日记 2025/12/19 0:26:32

HCIP(综合实验2)

1.实验拓补图 2.实验要求 1.根据提供材料划分VLAN以及IP地址，PC1/PC2属于生产一部员工划分VLAN10,PC3属于生产二部划分VLAN20 2.HJ-1HJ-2交换机需要配置链路聚合以保证业务数据访问的高带宽需求 3.VLAN的放通遵循最小VLAN透传原则 4.配置MSTP生成树解决二层环路问题…...

编程日记 2025/12/19 1:00:26

Linux mmp文件映射补充(自用)

addr一般为NULL由OS指明，length所需长度（4kb对齐），prot（权限，一般O_RDWR以读写）， flag（MAP_SHARED(不刷新到磁盘上，此进程独有)和MAP_PRIVATE（刷新…...

编程日记 2026/1/8 21:10:29

单元测试学习笔记（一）

自动化测试通过测试工具/编程模拟手动测试步骤，全自动半自动执行测试用例，对比预期输出和实际输出，记录并统计测试结果，减少重复的工作量。单元测试针对最小的单元测试，Java中就是一个一个的方法就是一个一个的单…...

编程日记 2025/12/19 1:00:31

【深度学习新浪潮】新视角生成的研究进展调研报告（2025年4月）

新视角生成（Novel View Synthesis）是计算机视觉与图形学领域的核心技术，旨在从单张或稀疏图像中生成任意视角的高保真图像，突破传统多视角数据的限制，实现对三维场景的自由探索。作为计算机视觉与图形学的交叉领域，近新视角生成年来在算法创新、应用落地和工具生态上均取…...

编程日记 2025/12/19 2:16:01

OpenHarmony OS 5.0与Android 13显示框架对比

1. 架构概述 1.1 OpenHarmony OS 5.0架构 OpenHarmony OS 5.0采用分层架构设计，图形显示系统从底层到顶层包括： 应用层：ArkUI应用和第三方应用框架层：ArkUI框架、窗口管理API系统服务层：图形合成服务、窗口管理服务…...

编程日记 2025/12/19 1:00:28

[Java] 泛型

目录 1、初识泛型 1.1、泛型类的使用 1.2、泛型如何编译的 2、泛型的上界 3、通配符 4、通配符上界 5、通配符下界 1、初识泛型泛型：就是将类型进行了传递。从代码上讲，就是对类型实现了参数化。泛型的主要目的：就是指定当前的容器…...

编程日记 2025/12/29 8:32:58

Vue3 项目中零成本接入 AI 能力（以图搜图、知识问答、文本匹配)...

以下是在 Vue3 项目中零成本接入 AI 能力（以图搜图、知识问答、文本匹配）的完整解决方案，结合免费 API 和开源工具实现，无需服务器或付费服务：一、以图搜图（基于 Hugging Face CLIP 模型）核心思路通过 Hugging Face Inference API 调用 CLIP 模型，将图片转换为向…...

编程日记 2025/12/22 3:01:20

Spark–steaming

实验项目: 找出所有有效数据，要求电话号码为11位，但只要列中没有空值就算有效数据。按地址分类，输出条数最多的前20个地址及其数据。代码讲解： 导包和声明对象，设置Spark配置对象和SparkContext对象。使用Spark S…...

编程日记 2025/12/20 6:31:13

目录 1.YOLOv12.YOLOv23.YOLOv34.YOLOv45.YOLOv66.YOLOv77.YOLOv9 YOLO系列文章汇总： 【论文#目标检测】You Only Look Once: Unified, Real-Time Object Detection 【论文#目标检测】YOLO9000: Better, Faster, Stronger 【论文#目标检测】YOLOv3: An Incremental …...

编程日记 2025/12/31 2:09:55

前端框架的“快闪“时代：我们该如何应对技术迭代的洪流？

引言：前端开发者的"框架疲劳" “上周刚学完Vue 3的组合式API，这周SolidJS又火了？”——这恐怕是许多前端开发者2023年的真实心声。前端框架的迭代速度已经达到了令人目眩的程度，GitHub每日都有新框架诞生，n…...

编程日记 2025/12/8 3:43:04

深度学习训练中的显存溢出问题分析与优化：以UNet图像去噪为例

最近在训练一个基于 Tiny-UNet 的图像去噪模型时，我遇到了经典但棘手的错误： RuntimeError: CUDA out of memory。本文记录了我如何从复现、分析，到逐步优化并成功解决该问题的全过程，希望对深度学习开发者有所借鉴。训练数据&am…...

编程日记 2025/12/19 1:00:44

Python爬虫实战：获取优志愿专业数据

一、引言在信息爆炸的当下，数据成为推动各领域发展的关键因素。优志愿网站汇聚了丰富的专业数据，对于教育研究、职业规划等领域具有重要价值。然而，为保护自身数据和资源，许多网站设置了各类反爬机制。因此，如何高效、稳定地从优志愿网站获取计算机专业数据成为一个具有…...

编程日记 2025/12/30 12:30:28

2025.4.22学习日记 JavaScript的常用事件

在 JavaScript 里，事件是在文档或者浏览器窗口中发生的特定交互瞬间，例如点击按钮、页面加载完成等等。下面是一些常用的事件以及案例： 1. click 事件当用户点击元素时触发 const button document.createElement(button); button.textCo…...

编程日记 2025/12/8 10:25:40