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

六、效果：