Selecting multiple polygons or points from WFS or WMS GetFeatureInfo

Question

Is there a way to select multiple polygons and/or points from a WFS or WMS service and then get the feature information for each selected item?

There are numerous examples on the OpenLayers website but none of them show how to multi-select AND get the attributes for the selected items.

For instance, I can get the feature info for a single selected item by using the GetFeatureInfo option for a WMS service, but this does not allow me to select multiple items. I absolutely have to have the ability to select multiple items!

Also, I can select multiple items by drawing a box, a freehand polygon, or multi-selecting individual features using a number of different methods but none of those methods have the ability to get the feature info.

My goal is to be able to select multiple features and then extract my unique identifier (point number or polygon number) from each of the feature's info in order to query data from a SQL Server database. I don't need to do anything fancy to the spatial data all I want to do is select multiple items and take the unique id from each of them so I can query my database for info that relates to the selected items.

I am using OpenLayers to build my map interface and GeoServer to serve my WMS/WFS services. I can connect to my point and polygon shapefiles using either WMS or WFS, but I cannot find a way to select multiple items and then get the attribute info for the items.

---

Here is the code that I ended up using:

//THIS FUNCTION UPDATES THE TEXT BOX WITH THE LIST OF SELECTED ATTRIBUES WHEN THE USER SELECTS A NEW POLYGON OR MULTIPLE POLYGONS
var update = function(feature) {
     names.push(feature.attributes['yourLayersAttributeNameHere']); 
    showStatus(names.join(", "));
};


//THIS FUNCTION UPDATES THE TEXT BOX WITH THE LIST OF SELECTED ATTRIBUTES WHEN THE USER UNSELECTS A POLYGON
var clear = function(feature) {
  name=feature.attributes['yourLayersAttributeNameHere']; 
    for(var y in names){
       if (name === names[y]){
         names.splice(y,1);
        }
    }
    showStatus(names.join(", "));
};




//INSTANTIATE A NEW CONTROL THAT ALLOWS THE USER TO SELECT FROM THE AVAILABLE WFS FEATURE
// var control = new OpenLayers.Control.SelectFeature(
               nameOfyourLayerHere, 
              /{
                clickout: true, 
       toggle: true,
                multiple: true, 
       hover: false, //if hover is set to true it takes away the selection functionality.                    
        toggleKey: "ctrlKey", // ctrl key removes from selection
               /multipleKey: "shiftKey", // shift key adds to selection
               /onSelect: update, //ON SELECT CALL THE UPDATE FUNCTION
                onUnselect: clear, //ON UNSELECT CALL THE CLEAR FUNCTION
     // 
              // }
          // );

//ADD THE CONTROL TO THE MAP CONTROLS COLLECTION
// map.addControl(control); 
//ACTIVATE THE NEW CONTROL
//control.activate();

Answer 1

The easiest way would be to use a WFS - try something like http://ian01.geog.psu.edu/geoserver/www/wfs/wfs-sld2.html and then instead of updating the div make a query.

Also you can create a WFS query that takes your box or polygon and carries out one query to return all the features that are contained or that intersect with the object. One way to get a feel for what's possible is to play with the GeoServer demos (use http://ian01.geog.psu.edu/geoserver/web/?wicket:bookmarkablePage=:org.geoserver.web.demo.DemoRequestsPage if you don't have a local install handy) - scroll down the request list to the WFS_GetFeatureXXXX ones.

Answer 2

Here is the code I ended up using. Thanks again to iant for providing his generous assistance!!

//INSTANTIATE A NEW CONTROL THAT ALLOWS THE USER TO SELECT FROM THE AVAILABLE WFS   FEATURE
var control = new OpenLayers.Control.SelectFeature(
                lyrstands, //THE NAME OF THE LAYER THAT IS BEING SELECTED FROM
               {
               clickout: true, //WHEN THEY CLICK OUTSIDE OF THE POLYGON LAYER ALL SELECTED ITEMS ARE DESELECTED
       toggle: true, //SELECTED ITEMS CAN BE DESELECTED AND VICE VERSA
               multiple: true, //USER CAN SELECTED MULTIPLE FEATURES
       hover: false, //IF HOVER IS SET TO TRUE IT TAKES AWAY THE SELECTION FUNCTIONALITY                    
      highlightOnly: false, 
       toggleKey: "ctrlKey", // CTRL KEY REMOVES FROM SELECTION
               multipleKey: "shiftKey", // SHIFT KEY ADDS TO SELECTION
               onSelect: update, //ON SELECT CALL THE UPDATE FUNCTION
               onUnselect: clear, //ON UNSELECT CALL THE CLEAR FUNCTION

               }
          );

//ADD THE CONTROL TO THE MAP CONTROLS COLLECTION
map.addControl(control); 
//ACTIVATE THE NEW CONTROL
control.activate(); 


//THIS FUNCTION UPDATES THE TEXT BOX WITH THE LIST OF SELECTED STANDS WHEN THE USER SELECTS A NEW STAND
var update = function(feature) {
     names.push(feature.attributes['yourAttributeName']); //THE SELECT FEATURE IN THIS FUNCTION IS HARD CODED TO A SPECIFIC ATTRIBUTE FROM THE LAYER
    showStatus(names.join(", "));
};


//THIS FUNCTION UPDATES THE TEXT BOX WITH THE LIST OF SELECTED FEATURE ATTRIBUTES WHEN THE USER UNSELECTS A FEATURE
var clear = function(feature) {
  name=feature.attributes['yourAttributeName']; //THE UNSELECT FEATURE IN THIS FUNCTIONS IS HARD CODED TO A SPECIFIC ATTRIBUTE FROM THE LAYER
    for(var y in names){
       if (name === names[y]){
         names.splice(y,1);
        }
    }
    showStatus(names.join(", "));
};

var names = [];
//CREATE THE SHOWSTATUS FUNCTION THAT IS CALLED BY UPDATE AND CLEAR FUNCTIONS
//THE NAME OF THE TEXTBOX THAT DISPLAYS THE SELECTED ITEMS IS 'responseText'. 
//THIS FUNCTION CALLS FOR THE VALUE 'text' (WHICH IS A STRING) FROM THE UPDATE AND    CLEAR FUNCTIONS AND THEN POPULATES THE TEXT BOX WITH THE VALUES
function showStatus(text) {
    document.getElementById("responseText").innerHTML = text;            
}