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

实现结果

  本文最终实现的结果如下：

  

• ✅ 舆图初始化时绘制一个多边形；
    
  
• ✅ 鼠标 右键点击舆图恣意位置；
    
  
• ✅ 若掷中 Feature，则弹出该图形的详细信息；
    
  
• ✅ 移除欣赏器默认的右键菜单，生存舆图交互的完备控制。
  
  

    整个功能基于 Vue3 + OpenLayers 完成，接纳 Composition API 编写，代码清晰易维护。
  <hr> ✨ 前言

在开发 Web GIS 项目时，我们经常盼望用户右键舆图时实验自界说利用，而不是触发欣赏器默认的右键菜单。本篇文章将手把手教你如何用 Vue3 + OpenLayers：

  

• 禁用默认右键菜单；
    
  
• 获取右键点击位置；
    
  
• 判断是否点击到了舆图上的某个图形（Feature）；
    
  
• 弹出相应信息。
  
  

<hr> 项目技能栈

  

• Vue 3
    
  
• OpenLayers 7+
  <