监听html右击,Openlayers拓展右键事件

openlayers5+中没有直接的监听地图右键的功能，但是我们可以通过使用jquery监听地图所在的html元素的右键事件来实现。

一、定义右键弹出框的html元素

缩放至

添加地标

二、定义以这个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.originalEvent);

menu_overlay.setPosition(coordinate);

});

五、要素右键

当捕捉到地图元素右键时，判断鼠标所在像素点位置处是否存在要素，如果存在，设置右键框overlay弹出，坐标为事件发生的坐标。

$(map.getViewport()).on("contextmenu", function(event){

event.preventDefault();//屏蔽自带的右键事件

var pixel = map.getEventPixel(event.originalEvent);

var feature = map.forEachFeatureAtPixel(pixel,function(feature){

return feature;

})

if(feature){

var coordinate = map.getEventCoordinate(event);

menu_overlay.setPosition(coordinate);

}

});

六、效果：