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);
    }
});

六、效果：