Openlayers and Geoserver. Projections and WMSGetFeatureInfo()

Question

I use openlayers 3 and Geoserver 2.12. I'm writing a function to get features by mouse click but in the result I get the features far south-west from the clicked pixel.

I have to notice that my Geoserver's shapes and the group of layers are in EPSG:4326. OL loads my map normally but if try to set the EPSG:4326 projection in the view's declaration it doesn't load it. In debug I can see that view's projection is EPSG:4326 but the map is not shown.

As I know OL sets the EPSG:3857 by default and now I can't change it. So most likely because of the inconsistency of the projections it finds wrong features.

Here is the code:

function initMap() {

var wmsSource = new ol.source.TileWMS({
    url: 'http://178.208.82.80:8082/geoserver/CFD/wms',
    params: {
        'FORMAT': 'image/png',
        'service':'WMS&version = 1.1',
        'LAYERS': 'CFD:CFD',
        'TILED': 'true'
    },
    serverType: 'geoserver',
    transition: 0
});

var layers = [
    new ol.layer.Tile({
        source: wmsSource,
        minResolution: 0
    })
];

var view = new ol.View({
   // projection: 'EPSG:4326', - if uncomment the map will not load
    center: ol.proj.transform([36.587147,50.598299], 'EPSG:4326', 'EPSG:3857'),
    zoom:11,
    minZoom:2,
    maxZoom:18
});

var map = new ol.Map({
    controls: ol.control.defaults().extend([
        new ol.control.ScaleLine({
            units: 'degrees'
        })
    ]),
    layers: layers,
    target: 'map',
    view: view
});

function onMapClick2(evt) {

    var pixel = evt.pixel;
    var bbox = evt.map.getView().calculateExtent(evt.map.getSize());

    var url = 'http://178.208.82.80:8082/geoserver/CFD/wms?' +
        'SERVICE=WMS&' +
        'VERSION=1.3.0&' +
        'REQUEST=GetFeatureInfo&' +
        'FORMAT=text/xml&' +
        'QUERY_LAYERS=CFD%3ACFD&' +
        'version%20%3D%201.1&' +
        'LAYERS=CFD:CFD&INFO_FORMAT=text/xml&' +
        'FEATURE_COUNT=50&'+
        'I=' + parseInt(pixel[1]) +'&'+
        'J=' + parseInt(pixel[0]) +'&'+
        'WIDTH='+ evt.map.getSize()[0] +'&' +
        'HEIGHT='+ evt.map.getSize()[1] + '&' +
        'CRS=EPSG:3857&' +
        'STYLES=&' +
        'BBOX=' + bbox[0] +',' + bbox[1] +',' + bbox[2] +',' + bbox[3];
    fetch(url).then(function(response) {
        return response.text();
    }).then(function(response) {

        var allFeatures = new ol.format.WMSGetFeatureInfo().readFeatures(response);
        document.getElementById('all').innerText = allFeatures.length.toString();
        console.log(url);
        var res = '';
        for (var i = 0; i < allFeatures.length; i++) {
            res = res + ' name = ' + allFeatures[i].getProperties().name +  ' fclass = ' +
                allFeatures[i].getProperties().fclass + ' || ';
        }
        console.log(res);
    });
}

   map.on('singleclick',onMapClick2);
}

Answer 1

I suspect your problem is caused by the fact you are mixing WMS versions and using EPSG:4326. Your map is being requested using WMS version 1.1.0 which defines EPSG:4326 as lon/lat while your GetFeatureInfo is using WMS 1.3.0 which defines EPSG:4326 as lat/lon.

The correct way to construct a GetFeatureInfo request is to take the GetMap URL and change the request to GetFeatureInfo and then add the X/Y (or I/J) pixel location of the click and a QueryLayers parameter to list the layer(s) you want to query. This way you are sure the server is using the same map as you are.