Openlayers拓展右键事件

openlayers5+中没有直接的监听地图右键的功能，但是我们可以通过使用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.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);
    }
});

六、效果：