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 的事件对象包含发生点击的屏幕坐标，但是如何根据屏幕坐标获得地图中的相应坐标系下的坐标将会比较困难。

困难在哪里呢？主要有以下的三点：

• 首先，事件对象所含的坐标是相对于整个浏览器的视口、页面或者整个