openlayer右键菜单_OpenLayers 3 之 添加地图鼠标右键菜单

添加右键菜单，首先我们要监听鼠标右键点击的操作，我们知道鼠标右键事件名是 contextmenu，当鼠标在 html 元素之上，点击鼠标右键，便会触发 contextmenu 事件，在 contextmenu 事件的回调函数中实现相应的显示菜单功能即可。

那么在 openlayers 中，在地图中添加这个事件，我们从哪里下手呢？首先我们得了解 openlayers 的初始化页面的过程。

openlayers 初始化页面过程

openlayers 也是一个前端库，那么它肯定离不开 html 的运用，比如，我们首先需要在页面放置一个显示地图的 html 元素，一个 div 元素(假设其 id 属性设置为 “map”，后面简称为 map div)，然后在地图初始化的时候指定这个元素，openlayers 会首先在这个元素中创建一个 class 为 ol-viewport 的 div 元素，其尺寸保持与 map div 相同，然后在 ol-viewport div 中创建一个 canvas 元素，在这个 canvas 元素中渲染请求到的地图；其次，还会添加一个 class 为 ol-overlaycontainer 的 div 元素，用来放置 overlay；最后，添加一个 class 为 ol-overlaycontainer-stopevent 的 div 元素，主要是放置 openlayers 的控件，上一篇添加 自定义扩展控件 的文章开篇有讲过，这里不是重点，我们不详细介绍了。

最后形成的 html dom 结构如下图：

图1 形成的DOM结构

我们会想到在这个 map div 元素添加事件，然后右键弹出菜单，这个想法很自然，也确实可以实现，然而我们要想到后面的事情，至少对事情有一个全局的认识再下手，我们显示出菜单后，往往是要根据相应的地图所在位置进行一定的操作，那么我们的 contextmenu 的事件对象包含发生点击的屏幕坐标，但是如何根据屏幕坐标获得地图中的相应坐标系下的坐标将会比较困难。喎�"/kf/ware/vc/" target="_blank" class="keylink">vcD4KCjxwPsCnxNHU2sTEwO/E2KO/1vfSqtPQ0tTPwrXEyP2146O6PC9wPgoKCsrXz8ijrMrCvP621M/zy/m6rLXE1/ix6srHz+C21NPa1fu49uSvwMDG97XEytO/2qGi0rPD5rvy1d/V+7j2xsHEu7XEo7sKxuS0zqOstvjP1Mq+tdjNvLXE1KrL2M35zfnT1srHy+bS4rXEtPPQobrNzrvWw6O7CtfuuvOjrMbBxLu1xNf4serPtbrNtdjNvLXE1/ix6s+109bN+c35zerIq7K7zayjrMjnus69q8/gttTT67XYzbzUqsvYtcTX+LHq1NnXqruvzqq12M281/ix6s+1z8K1xNf4seqjvwoKCjxwPiAgICAgIMrXz8ijrM7Sw8fQ6NKqu/G1w8rCvP7X+LHqz+C21NPaIG1hcCBkaXYgo6iw/LqstdjNvLXE1KrL2KOptcTX+LHqo6zIu7rzvavP4LbU09ogbWFwIGRpdiC1xNf4serXqruvzqq12M281tC1xMq1vMrX+LHqoaO12tK7sr3W0KOsztLDx7/J0tTNqLn9vMbL47vxtcOjrLWryse12rb+sr2x2NDrzai5/SBvcGVubGF5ZXJzIMC0zeqzyaOs0vLOqta709Agb3BlbmxheWVycyC21LXYzby1xNf4serPtdfux+Wz/qOs1eLU2iBvcGVubGF5ZXJzICDW0NKy09DP4LnYtcS5psTcoaPH7NDStcTKx6Osb3BlbmxheWVycyDW0M7Sw8e/ydLU0ruyvc3qs8nJz8r2stnX96Os1rvQ6NKq0ru49rqvyv2jujxjb2RlPm1hcC5nZXRFdmVudENvb3JkaW5hdGUoZXZlbnQpPC9jb2RlPqOs1NrPwsPmtcS+38zlyrXP1tbQo6zO0rvhz+rPuL2ytb3V4rj2uq/K/aGjPC9wPgoKPHA+z8LD5s7Sw8e/tL+0vt/M5cjnus7Ktc/WsMmhozwvcD4KCjxoMSBpZD0="鼠标右键菜单具体实现">鼠标右键菜单具体实现

为了方便，文章中的代码使用了 JQuery。

文章中的实例完整代码可以到我的 GitHub 中查看或者下载，有用的话别忘了点一下 star。

下面我们一步一步地添加右键菜单功能，我们分为三步：

对 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() 的调用，map.getCoordinateFromPixel() 参数为 ol.pixel，是一个坐标，数组格式[x, y]，其实现中又调用了 ol.vec.Mat4.multVec2()，该函数完成处理坐标转换的实际工作。

地图相应位置添加菜单

这里我们结合 overlay 添加菜单，之前的文章介绍过 overlay，这里就不再具体展开了。首先，我们在 html 页面添加一个目录，具体的 css 样式可以自己设定，想看完整源码的可以到我的 GitHub 中查看或者下载完整的代码：