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);
}