OpenLayers3 实现地图鼠标右键菜单：坐标转换与Overlay应用

要实现地图上的右键菜单功能，首要步骤是监听用户的鼠标右键点击行为。在HTML中，该事件被称为 contextmenu。当用户在指定HTML元素上按下鼠标右键时，系统会触发此事件。我们只需在 contextmenu 事件的回调函数中编写显示菜单的逻辑代码即可。

在OpenLayers环境中实现这一功能，关键在于理解地图初始化的流程。我们需要从OpenLayers构建页面的基本过程入手，才能找到正确的切入点。

OpenLayers 初始化页面过程

OpenLayers 初始化页面过程

作为前端库，OpenLayers依赖于HTML结构。首先，页面中需存在一个用于承载地图的HTML元素，通常是一个div（假设其id为“map”，下文简称map div）。在初始化地图时，需指定该元素。OpenLayers会在此元素内部创建一个class为 ol-viewport 的div，其尺寸与map div保持一致。随后，在 ol-viewport 内部会生成一个canvas元素，用于渲染加载的地图数据。此外，还会添加一个class为 ol-overlaycontainer 的div，用于存放覆盖层（overlay）；以及一个class为 ol-overlaycontainer-stopevent 的div，主要用于放置OpenLayers的控件。关于自定义扩展控件的具体细节，前文已有涉及，此处不再赘述。

最终生成的HTML DOM结构如图所示：

图1 形成的DOM结构

直观的想法可能是在map div上直接绑定右键事件以弹出菜单，这确实可行。但在实施前，需具备全局视角。通常，右键菜单需要根据点击位置在地图上的具体坐标执行操作。虽然 contextmenu 事件对象提供了屏幕坐标，但如何将其转换为地图坐标系下的坐标是一个难点。

这一难点主要源于以下三个因素：

第一，事件对象中的坐标是相对于浏览器视口、页面或整个屏幕的绝对位置； 第二，承载地图的元素大小和位置通常是动态或随意的； 第三，屏幕坐标系与地图自身的坐标系往往存在巨大差异，如何将基于地图元素的相对坐标准确映射到地图坐标系中，是技术关键。

解决思路分为两步：首先计算事件坐标相对于map div（即地图容器）的相对坐标，然后将其转换为地图实际坐标系中的坐标。虽然第一步可通过数学计算得出，但第二步必须依赖OpenLayers，因为只有它掌握地图坐标系的详细信息。幸运的是，OpenLayers提供了 map.getEventCoordinate(event) 函数，可一步完成上述转换过程，下文将详细演示。

接下来，我们将分步展示具体实现方法。

鼠标右键菜单具体实现

鼠标右键菜单具体实现

为简化代码编写，示例中使用了JQuery库。

完整实例代码已上传至我的GitHub仓库，欢迎查阅或下载。如果觉得有帮助，请不吝Star支持。

我们将右键菜单功能的添加分为三个主要步骤：

为HTML元素绑定 contextmenu 事件；

获取地图对应的点击坐标；

在地图指定位置渲染菜单。

为HTML元素添加contextmenu事件

为HTML元素添加contextmenu事件

HTML元素的鼠标右键事件名为 contextmenu，该事件被所有主流浏览器支持。需注意不要将其与HTML新增的 contextmenu 属性混淆，后者目前仅Firefox支持。我们使用的是 oncontextmenu 事件。可以将此事件绑定到包含地图的任何HTML元素上，OpenLayers会自动处理坐标转换。例如，通过 map.getViewport() 可获取OpenLayers初始化时创建的class为 ol-viewport 的div元素，即直接包含地图的容器。由于浏览器默认会显示右键菜单，我们需要调用 e.preventDefault() 来阻止默认行为，从而显示自定义菜单。

$(map.getViewport()).on("contextmenu", function(event){
  e.preventDefault();
  // 书写事件触发后的函数
});

获取地图相应的点击坐标

获取地图相应的点击坐标

获取地图对应点击坐标仅需一行代码，如下所示：

var coordinate = map.getEventCoordinate(event);

该函数接收 oncontextmenu 对应的事件对象作为参数。其内部调用了 map.getCoordinateFromPixel()，该函数需要一个 ol.pixel 类型的坐标（格式为数组 [x, y]）。其底层实现进一步调用了 ol.vec.Mat4.multVec2()，由该函数完成实际的坐标转换计算工作。

地图相应位置添加菜单

地图相应位置添加菜单

此处结合Overlay组件来展示菜单。前文已介绍过Overlay，此处不再展开。首先，在HTML页面中定义一个菜单容器，CSS样式可根据需求自定义。完整源码可参考GitHub。

<div id="contextmenu_container" class="contextmenu">
  <ul>
    <li><a href="#">设置中心</a></li>
    <li><a href="#">添加地标</a></li>
    <li><a href="#">距离丈量</a></li>
  </ul>
</div>

使用此HTML元素初始化一个Overlay，并将其添加到地图中：

var menu_overlay = new ol.Overlay({
  element: document.getElementById("contextmenu_container"),
  positioning: 'center-center'
});
menu_overlay.setMap(map);

随后，在鼠标右键菜单的事件回调函数中，根据之前获取的地图坐标，设置Overlay的显示位置：

menu_overlay.setPosition(coordinate);

菜单隐藏

菜单隐藏

当用户右键点击时菜单出现，但需确保菜单不会一直悬浮在地图上。可以通过添加鼠标左键点击事件来隐藏菜单，或在用户选择某项功能后自动隐藏。实现较为简单，只需在鼠标左键事件的回调函数或菜单功能执行函数中调用以下代码即可：

menu_overlay.setPosition(undefined);

总结

本文主要阐述了OpenLayers初始化地图元素的过程，并详细演示了如何在地图上实现“鼠标右键菜单”及其隐藏功能。文中未对菜单内的具体条目绑定事件，因为核心在于右键菜单的触发与定位，而菜单条目的功能绑定与普通JavaScript事件绑定无异，故未作展开。