I'm having trouble with using OpenLayers to render a GeoServer WMS layer.
I have searched about it on the internet but have found no workaround yet.
I intend to provide as much as I know on this issue, that's why my post is quite long!
I am trying to render a shp layer which is located inside a donnees_validees workspace (in GeoServer). I am using a 1.1.0 version for Web Map Service (WMS). I can reach this layer on GeoServer; the SRC is "EPSG:3857" :
And it looks like this :
This is the URL used by GeoServer to access it:
http://localhost:8080/geoserver/donnees_validees/wms?
service=WMS&
version=1.1.0&
request=GetMap&
layers=donnees_validees%3Ashp&
bbox=4.7153439%2C44.6334029%2C5.1199732%2C45.6618753&
width=330&
height=768&
srs=EPSG%3A3857&
format=application/openlayers
It tells us the bounding box is the following:
4.7153439,44.6334029,5.1199732,45.6618753
My problem is that when using OpenLayers (v3) library to render that, I'm getting nothing on my screen even though the page have been reached. It might come from a wrong view initialization, but I'm not sure.
On top of that, my request has been modified meanwhile; it now turned to:
You can notice my bounding box parameter turned to:
-21846.05200578905,-21805.38973278905,21855.544965789053,21896.20723878905.
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {Image as ImageLayer, Tile as TileLayer} from 'ol/layer.js';
import ImageWMS from 'ol/source/ImageWMS.js';
import OSM from 'ol/source/OSM.js';
var mysource = new ImageWMS
({
url: 'http://localhost:8080/geoserver/donnees_validees/wms',
params: {'VERSION': '1.1.0',
'LAYERS': 'donnees_validees:shp',
'SRS': 'EPSG:3857',
'FORMAT': 'image/png8',
'BBOX':'4.713221,45.393568,4.779739,45.423938'
},
serverType: 'geoserver',
});
var layerlist = [ myUpperLayer ];
var myview = new View
({
center: [4.55, 45.4009],
zoom: 2
});
var map = new Map
({
layers: layerlist,
target: 'map',
view: myview
});
In my case, trying to force the weight and height arguments (which have changed as well) didn't work out.
I can't tell why has my bbox parameter changed but I would like to keep the bounding box with the same SRC I have given in the imageWMS constructor.
Does someone have a clue about that?
Is it the cause of my blank screen?
After reviewing answers from Ian Turton♦︎, and Mike, I have put back the good CRS in the Geoserver Interface.
I have also tweaked my code to set up a projection in my view.
I tried to set the projection as 'EPSG:4326' in my ImageWMS but it resulted in a suspicious request
http://localhost:8080/geoserver/donnees_validees/wms?SERVICE=WMS&VERSION=1.1.0&REQUEST=GetMap&FORMAT=image%2Fpng8&TRANSPARENT=true&LAYERS=donnees_validees%3Ashp&SRS=EPSG%3A4326&STYLES=&FORMAT_OPTIONS=dpi%3A81&WIDTH=1&HEIGHT=1&BBOX=-0.1962464241397277%2C-0.1958811487264987%2C0.19633170085032303%2C0.19669697626355204
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {Image as ImageLayer, Tile as TileLayer} from 'ol/layer.js';
import ImageWMS from 'ol/source/ImageWMS.js';
import OSM from 'ol/source/OSM.js';
var myextent = [4.713221,45.393568,4.779739,45.423938]; // bbox
var mycenter =[(myextent[0] + myextent[2])/2 ,(myextent[1] + myextent[3])/2]; // center (x;y)
var mysource = new ImageWMS
({
url: 'http://localhost:8080/geoserver/donnees_validees/wms',
params: {
'VERSION': '1.1.0',
'LAYERS': 'donnees_validees:shp'
},
serverType: 'geoserver'
});
var myUpperLayer = new ImageLayer
({
extent: myextent, // REMOVING THIS LINE DID THE TRICK !
source: mysource
});
var layerlist = [myUpperLayer ];
var myview = new View
({
projection: 'EPSG:4326',
center: [4.73, 45.408],
zoom: 2
});
var map = new Map
({
layers: layerlist,
target: 'map',
view: myview
});
I end up with a bbox quite close from the "myextent" variable, which seems fine !
I still have this blank page problem .. Perhaps it's a css problem. Mine is currently embedded into the html page of my app :
(edited)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> My title</title>
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css"> -
</head>
<body>
<div id="map" style="height:400px; width:600px;">
<script src="./index.js"></script>
</body>
</html>
I am now sure the problem is related to the CSS.
I've added this line since :
If I manually enter a "png " request with decent parameters for width and height.. ( http://localhost:8080/geoserver/donnees_validees/wms?SERVICE=WMS&VERSION=1.1.0&REQUEST=GetMap&FORMAT=image%2Fpng8&TRANSPARENT=true&LAYERS=donnees_validees%3Ashp&SRS=EPSG%3A4326&STYLES=&FORMAT_OPTIONS=dpi%3A27&WIDTH=500&HEIGHT=500&BBOX=4.1605425%2C44.822815500000004%2C5.3324175%2C45.994690500000004 ) .. I get a nice image .. But something is going wrong with width and height when I go through OL. (cf commentary)
Best Answer
Your data is in lat/lon (EPSG:4326) not Web mercator(EPSG:3857). Try not to lie to GeoServer about projections as it will believe you and it won't work.