openlayers3+中添加地图右键和要素右键菜单

openlayers3+中没有直接的监听地图右键的功能，但是我们可以通过使用jquery监听地图所在的html元素的右键事件来实现。
一、定义右键弹出框的html元素
<div id="contextmenu_container" class="contextmenu">
<ul>
<li>  缩放至  </li>
<span class="menuLine"></span>
<li>  添加地标  </li>
</ul>
</div>

结果：


二、定义以这个html为元素的overlay
var menu_overlay = new ol.Overlay({
element: document.getElementById("contextmenu_container"),
positioning: 'center-center'
});
map.addOverlay(menu_overlay);

三、监听地图所在元素的右键我们可以通过map.getViewport()获取地图所在的html元素，然后使用jquery监听右击事件，如下：
$(map.getViewport()).on("contextmenu", function(event){
event.preventDefault();//屏蔽自带的右键事件
});

四、地图右键当捕捉到地图元素右键时，设置右键框overlay弹出，坐标为事件发生的坐标。
$(map.getViewport()).on("contextmenu", function(event){
event.preventDefault();//屏蔽自带的右键事件
var coordinate = map.getEventCoordinate(event);
menu_overlay.setPosition(coordinate);
});

五、要素右键
当捕捉到地图元素右键时，判断鼠标所在像素点位置处是否存在要素，如果存在，设置右键框overlay弹出，坐标为事件发生的坐标。
$(map.getViewport()).on("contextmenu", function(event){
event.preventDefault();//屏蔽自带的右键事件
var pixel = [event.clientX,event.clientY];
var feature = map.forEachFeatureAtPixel(pixel,function(feature){
return feature;
})
if(feature){
var coordinate = map.getEventCoordinate(event);
menu_overlay.setPosition(coordinate);
}
});
六、效果：


如果你觉得对你有所帮助，你可以考虑发个小额微信红包鼓励一下