OpenLayers select features with polygon

Question

Trying to use this - http://openlayers.org/dev/examples/SLDSelect.html For example: I have select feature ( box ) which allow me to select features on layer. But it is box type. Now i am trying to make same selection but with polygon style. Like drawing new polygon but what are inside that polygon will select. did i look on right path trying to use this SLD selection or there is other better way?

Open to any solutions.

Thanks.

Answer 1

In this plunker I have used interaction.Draw to create a polygon. Once the polygon is finished, it finds all feature points in the polygon's extent and selects them.

Here is a link to the plunker

Here is the excerpt of the draw.on('drawend',... listener:

draw.on('drawend', function(e) {

  e.preventDefault();
  //stop a click select from overriding selection made by polygon
  setTimeout(function(){
    select.setActive(true)
  },300);

  // features that intersect the box are added to the collection of
  // selected features, and their names are displayed in the "info"
  // div
  var extent = e.feature.getGeometry().getExtent();

  //pointsLayer is the vector layer with the point features
  pointsLayer.getSource().forEachFeatureIntersectingExtent(extent, function(feature) {
    selectedFeatures.push(feature);
  });

});

Answer 2

From GIS StackEchange site:

function buildIt() {//START FUNCTION buildIt

//CREATE A NEW EMPTY VECTOR LAYER 
var polygonAdHoc = new OpenLayers.Layer.Vector("Poly Layer");
//ADD THE NEW VECTOR LAYER TO THE OPENLAYERS MAP
map.addLayer(polygonAdHoc);
//SET A VARIABLE TO THE NAME OF THE EXISTING LAYER THAT WILL BE TESTED FOR INTERSECTION WITH THE USER CREATED POLYGON
//I CHOSE TO GET THE LAYER BY NAME BUT YOU MIGHT CHOOSE TO DO IT ANOTHER WAY
var standLyr = map.getLayersByName("nameOfTheVectorLayerYouWantToTestForIntersection");

//CREATE A DRAW FEATURE CONTROL FOR THE USER CREATED VECTOR LAYER
var draw = new OpenLayers.Control.DrawFeature(polygonAdHoc, OpenLayers.Handler.Polygon);
//ADD THE DRAW FEATURE CONTROL TO THE MAP
map.addControl(draw);
//ACTIVATE THE DRAW FEATURE CONTROL
draw.activate();

//WHEN THE USER FINISHES DRAWING THE AD-HOC POLYGON THE beforefeatureadded EVENT WILL FIRE
polygonAdHoc.events.on({
    beforefeatureadded: function (event) {
        poly = event.feature.geometry;//SET A VARIABLE TO THE USERDRAWN POLYGONS GEOMETRY
        //alert("polygonAdHoc.features[0].geometry: " + poly);//IF YOU WANT TO SEE THE GEOMETRY COORDINATES UNCOMMENT THIS LINE
        for (var a = 0; a < standLyr[0].features.length; a++) {//LOOP THRU THE STANDS FEATURES OF THE LAYER YOU WANT TO TEST FOR INTERSECTION WITH THE USER DRAWN POLYGON
            if (poly.intersects(standLyr[0].features[a].geometry)) {//IF THE USER DRAWN POLYGON INTERSECTS THE TARGET LAYERS FEATURE REPRESENTED BY THE VARIABLE "a" THEN
                 //IDENTIFY THE FEATURE THAT INTERSECTS 
                 //FOR SIMPLICITIES SAKE I CHOSE TO JUST FIRE AN ALERT
                 //MY ACTUAL APP ADDS EACH SELECTED FEATURE TO A SELECT FEATURE CONTROL AND HIGHLIGHTS EACH POLYGON ON THE MAP                
                 alert("stands feature intersection: " +  standLyr[0].features[a].attributes['nameOfAttribute']);
            }//END OF IF STATEMENT
        }//END OF FOR STATEMENT
        draw.deactivate();//I ONLY WANT THE USER TO BE ABLE TO DRAW ONE AD-HOC POLYGON
        //SO I DEACTIVATE THE DRAW FEATURE CONTROL AFTER THEY CREATE THE FIRST POLYGON
        return false;
    }//END OF beforefeatureadded FUNCTION
});//END OF polygonAdHoc.events.on
}//END OF buildIt FUNCTION