Selecting map objects using ol.source.TileWMS in open layers 3

Question

I am using open layers 3, and I am using this code for displaying the map:

wmsSource = new ol.source.TileWMS({
           url: 'http://demo.boundlessgeo.com/geoserver/wms',
           params: { 'LAYERS': 'ne:ne' },
           serverType: 'geoserver',
           crossOrigin: ''
      });
       var wmsLayer = new ol.layer.Tile({
           source: wmsSource
       });    

I am using dragbox to make the rectangular selection and when I do the shift + drag I am not able to select the objects in map. Can somebody please help me on how to achieve it? This is the code I am using for rectangular selection.

dragBox.on('boxend', function(e) {
  // features that intersect the box are added to the collection of  
  // selected features, and their names are displayed in the "info"
  // div
  var info = [];
  var extent = dragBox.getGeometry().getExtent();
  wmsSource .forEachFeatureIntersectingExtent(extent, function(feature) {
    selectedFeatures.push(feature);
    info.push(feature.get('name'));
  });
  if (info.length > 0) {
   infoBox.innerHTML = info.join(', ');
 }
});   `

Answer 1

You use a TileWMS source, which is a collection of images (tiles) rendered on the WMS server. OpenLayers does not know about the features used to render the images. Because of this, forEachFeatureIntersectingExtent is only available on vector sources.

You could create a WMS getFeatureInfo-request in the boxend callback, to load the feature information from the server.

Alternatively, you could create a vector source containing the features you want and use for the forEachFeatureIntersectingExtent call.