[GIS] How to select a feature in Openlayers 3 by right click it

javascriptopenlayers

I'm trying to selete / delete a feature by right click it on Openlayers 3.
I know I have map events singleclick/click/dblclick and I also know I can use the ol.interaction.Select for delete.

In openlayers 2 I recall I could use oncontextmenu.

How can I achieve such a thing using OL3 ?

Best Answer

UPDATE:

I've ended up developing a custom contextmenu extension for OpenLayers. It has a lot of features like callbacks. Here's a preview:

You can use:

map.getViewport().addEventListener('contextmenu', function (e) {
    e.preventDefault();

    console.info('contextmenu');
    var feature = map.forEachFeatureAtPixel(map.getEventPixel(e),
        function (feature, layer) {
            return feature;
        });
    if (feature) {

        // ...
    }
});

Tested: Firefox && Chrome

Reference: https://groups.google.com/d/msg/ol3-dev/yCgIcbURw9M/jeWH1aZcK_0J

Related Solutions

[GIS] How to use right-click to finish drawing a Polygon in OpenLayers

I just ran into this problem myself. There are a couple of steps to take to get the right-click events working.

There seems to be a piece of logic implemented solely for the Navigation tool in the Click handler class. This checks to see if the control associated with the handler has a handleRightClicks property set to true.

https://github.com/openlayers/openlayers/blob/master/lib/OpenLayers/Handler/Click.js

215        if (this.checkModifiers(evt) && this.control.handleRightClicks &&

So you need to add a handleRightClicks property to your DrawFeature control and set to true.

To prevent the browser's context menu from appearing when right clicking, you also need to include the following line of JavaScript:

    this.map.viewPortDiv.oncontextmenu = OpenLayers.Function.False;

This above line is used in the Navigation control.

Then you should be able to create a handler in your control similar to:

            var handlerOptions = {
                'single': true,
                'double': true
            };

            this.handlers = {
                click: new OpenLayers.Handler.Click(this, {
                    'click': this.onClick,
                    'rightclick': this.onRightClick,
                    'dblrightclick': this.onRightClick
                }, handlerOptions)
            };

The documents state that only the Click handler only supports callbacks for click and doubleclick, but this is not the case - rightclick and dblrightclick also work.

[GIS] How to delete a feature in Openlayers 3.8.2 with `del` Key

This way:

var deleteFeature = function(evt){
    if(evt.keyCode == 46){ //delete key pressed
        //delete feature

    }
};
document.addEventListener('keydown', deleteFeature, false);

Best Answer

Related Solutions

[GIS] How to use right-click to finish drawing a Polygon in OpenLayers

[GIS] How to delete a feature in Openlayers 3.8.2 with `del` Key

Related Question