[GIS] Using multiple Openlayers.Control.SelectFeature controls

openlayers-2

I am working with Openlayers 2. The problem that I am facing right now is that I have multiple editable layers in my application I want to add, delete, modify features as well as Displaying Feature information regarding features. So that I uses one SelectFeature Control for displaying info and one for deleting feature. when I select control from one of them it results conflicting with each other.

How can i remove this problem?

Best Answer

Try defining seperate events like this:

        vectors1.addFeatures(createFeatures());
        vectors2.addFeatures(createFeatures());

        vectors1.events.on({
            "featureselected": function(e) {
                showStatus("selected feature "+e.feature.id+" on Vector Layer 1");
            },
            "featureunselected": function(e) {
                showStatus("unselected feature "+e.feature.id+" on Vector Layer 1");
            }
        });
        vectors2.events.on({
            "featureselected": function(e) {
                showStatus("selected feature "+e.feature.id+" on Vector Layer 2");
            },
            "featureunselected": function(e) {
                showStatus("unselected feature "+e.feature.id+" on Vector Layer 2");
            }
        });

There is a working example in offical OpenLayers example site http://dev.openlayers.org/examples/select-feature-multilayer.html

Example

Not exactly what you asked (select on dblClick; deselect on click) but should be easy to change

// Simple WFS layer
wfs = new OpenLayers.Layer.Vector(
    "WFS",
    {
        strategies: [new OpenLayers.Strategy.BBOX()],
        protocol: new OpenLayers.Protocol.WFS(
        {
            url:  "/optima/geoserver/wfs",
            featureType: "node",
            featureNS: "http://piemonte.optima.sistemaits.com",
            geometryName: 'poin'
        })
});
map.addLayer(wfs);

// Add a select control (note: this control is added to the map, but is disabled)
var select = new OpenLayers.Control.SelectFeature(
    wfs,
    {
        multiple: false,
        clickout: true,             // Will be ignored (aka, you have to deselect a feature when no feature is found onClick)
        onSelect: function(feature)
        {
            // ...
        },
        onUnselect: function(feature)
        {
            // ...
        }
    }
);

map.addControl(select);

// Handler to intercept click.
handler = new OpenLayers.Handler.Click(
    select,  // The select control
    {
        click: function(evt)
        {
            console.warn(this); // OpenLayers.Control.SelectFeature
            var feature = this.layer.getFeatureFromEvent(evt);
            
            // clickout
            if(this.layer.selectedFeatures){
                this.unselect(this.layer.selectedFeatures[0]);
            }
        },
        dblclick: function(evt)
        {
            console.info(this); // OpenLayers.Control.SelectFeature
            var feat = this.layer.getFeatureFromEvent(evt);
            // Select a feature
            if(feat){
                this.select(feat);
            }

        }
    },
    {
        single: true,
        double: true,
        stopDouble: true,
        stopSingle: true
    }
);

// select.activate();  // The select control must NOT be active
handler.activate();    // The handler will handles the click events for the select control

[GIS] How to register to event in OpenLayers 3

There're two examples that modify features in the documentation. One is

http://ol3js.org/en/master/examples/modify-test.html

and the other is

http://ol3js.org/en/master/examples/modify-features.html

Best Answer

Related Solutions

OpenLayers Feature Click and Double Click Event – How to Implement

Example

[GIS] How to register to event in OpenLayers 3

Related Question