Openlayers 3 getGetFeatureInfoUrl geoserver problem

Question

I try to use Openlayers 3 DragBox for BoxSelection ang get selected feature info from wms source. Layer projection EPSG:4326

    var host = 'http://x.x.x.x/geoserver/wms'
    var view = new ol.View({
        center: [12018110.072132599, 6954779.226347315],
        projection: 'EPSG:3857',
        zoom: 6
    });

    var wmsStation = new ol.source.TileWMS({
        url: host,
        params: {
            'LAYERS': 'baikalgeol:station_psg',
            'TILED': true,
            'VERSION': '1.1.1'
        },
        serverType: 'geoserver',
        crossOrigin: 'anonymous'
    });

    var layerStation = new ol.layer.Tile({
        title: 'Station',
        source: wmsStation,
    });

    var map = new ol.Map({
        pixelRatio: 1,
        controls: ol.control.defaults().extend([
            new ol.control.ScaleLine({
                units: 'metric'
            })
        ]),
        renderer: 'canvas',
        target: 'map',
        layers: [
            new ol.layer.Group({
                layerStation,
                ...
           })
        ],
        view: view
    });

var dragBox = new ol.interaction.DragBox({
    condition: ol.events.condition.platformModifierKeyOnly
});

map.addInteraction(dragBox);

dragBox.on('boxend', function(evt) {
    var info = []
    var extent = dragBox.getGeometry().getExtent();
    console.log(extent)
    // extent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326')
    // extent = [extent[1], extent[0], extent[3], extent[2]]
    console.log(extent)
    var source = wmsStation;
    var viewResolution = map.getView().getResolution();
    var queryLayers = source.getParams().LAYERS;
    var url = source.getGetFeatureInfoUrl(extent, viewResolution, 'EPSG:3857', {
        'INFO_FORMAT': 'text/html',
        'QUERY_LAYERS': queryLayers,
        'VERSION': '1.1.1'
    });


    if (url) {
        // url = url.replace('&CRS=', '&SRS=')
        console.log(url)
        document.getElementById('info').innerHTML =
            '<iframe id="frame" seamless src="' + url + '"></iframe>';
    }
});

But geoserver not return feature, only empty html.

URL: http://x.x.x.x/geoserver/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=baikalgeol%3Astation_psg&LAYERS=baikalgeol%3Astation_psg&TILED=true&INFO_FORMAT=text%2Fhtml&X=0&Y=255&WIDTH=256&HEIGHT=256&SRS=EPSG%3A3857&STYLES=&BBOX=0%2C0%2C626172.1357121639%2C626172.1357121639

I think the problem in the extent. I tried transform extent coordinates for layer projection and changed getGetFeatureInfoUrl projection:

extent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326')
...
var url = source.getGetFeatureInfoUrl(extent, viewResolution, 'EPSG:4326'...

But geoserver return:

<ServiceExceptionReport version="1.1.1" >   
     <ServiceException code="InvalidPoint">
        655, -176 not in dimensions of image: 256, 256
      </ServiceException>
 </ServiceExceptionReport>

Answer 1

You are misunderstanding how GetFeatureInfo works, I'm afraid. You can only ask for information at a single point (X,Y) which is passed to the WMS server as pixel coordinates on the map image. The WMS server then uses the bounding box (extent) parameter to work out where that click occurs in world coordinates and then performs the feature look up and returns the result. By modifying the bounds of the map or the X,Y of the click you end up confusing the server.

If you want all the features that are within a rectangular selection you need to make use of a WFS getFeature request.

Answer 2

with iant's help solved:

var parser = new ol.format.GeoJSON();
$.ajax('http://x.x.x.x/geoserver/wfs', {
    type: 'GET',
    data: {
        service: 'WFS',
        version: '2.0.0',
        request: 'GetFeature',
        typeName: 'baikalgeol:station_psg',
        maxFeatures: 200,
        outputFormat: 'text/javascript',
        request: 'GetFeature',
        srsname: 'EPSG:4326',
        bbox: extent.join(',') + ',EPSG:4326'
    },
    dataType: 'jsonp',
    jsonpCallback: 'parseResponse',
    jsonp: 'format_options'
}).then(function(response) {
    var result = parser.readFeatures(response);
    if (result.length) {
        ...
    }
});