0

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" :

EPSG:3857

And it looks like this :

layer

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.

blank screen

On top of that, my request has been modified meanwhile; it now turned to:

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%3A3857&BBOX=-21846.05200578905%2C-21805.38973278905%2C21855.544965789053%2C21896.20723878905&STYLES=&FORMAT_OPTIONS=dpi%3A81&WIDTH=1&HEIGHT=1

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

The request is now : http://localhost:8080/geoserver/donnees_validees/wms?SERVICE=WMS&VERSION=1.1.0&REQUEST=GetMap&FORMAT=image/png8&TRANSPARENT=true&LAYERS=donnees_validees:shp&SRS=EPSG:4326&STYLES=&FORMAT_OPTIONS=dpi:81&WIDTH=1&HEIGHT=1&BBOX=4.5501909375,45.212463937500004,4.9427690625,45.605042062500004

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)

 inline snippet

now Working !

  • See the OpenLayers documentation openlayers.org/en/latest/apidoc/… "BBOX and CRS/SRS will be set dynamically" so anything you set in params will be ignored and overwritten. projection should be set as a separate option in ImageWMS, BBOX and SRS will both be set dynamically based on that. – Mike Dec 5 '18 at 17:23
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.