Openlayers not re-projecting WMS queries

Question

I have an openlayers map in my project and I wanted to add WMS tiles to it. This is my code :

const map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      name: 'wmstiles',
      source: new ol.source.TileWMS({
        url: 'https://ssl-geowms.lillemetropole.fr/dynmapr/dynmapr.php',
        serverType: 'geoserver',
        version:"1.1.1",
        params: {
          LAYERS: 'PLU%2Fplu',
          VERSION: '1.1.1',
          TRANSPARENT: false,
          HEIGHT: 256,
          WIDTH: 256
        },
        pixelRatio: 1,
        projection: 'EPSG:2154'
      }),
      visible: false
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([3.1666, 50.6167]),
    zoom: 13,
    maxZoom: 20,
  })
});

As you can see, I'm trying to project the coordinates into EPSG:2154 (France) in order to send them to the WMS server. But my map is blank because openlayers did not generate a call with the good projection.

It generated me this one : https://ssl-geowms.lillemetropole.fr/dynmapr/dynmapr.php?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=false&IN=PLU%2Fplu&LAYERS=PLU%252Fplu&HEIGHT=919&WIDTH=2881&SRS=EPSG%3A3857&STYLES=&BBOX=324977.41473478096%2C6544989.716173889%2C380031.18435717915%2C6562551.1234224085

Instead of something like this (generated from another website that is not using openlayers) : https://ssl-geowms.lillemetropole.fr/dynmapr/dynmapr.php?in=PLU/plu&service=WMS&request=GetMap&version=1.1.1&layers=PLU%2Fplu&styles=&format=image%2Fjpeg&transparent=false&height=256&width=256&srs=EPSG%3A2154&bbox=704615.2885901299,7064111.541254971,705393.894388002,7064886.656737898

As you can see, it dit not reproject into EPSG:2154 but in EPSG:3857. There are also other problems like the height and width but this is another story. If I copy/paste the bounding box from the working link to the first one, it works.

Mike Mike · Accepted Answer · 2019-01-15T11:10:07

You code works for me (after adding the IN parameter). Had you defined the projection (and registered it if using OpenLayers 5)? I've added a semi-transparent OSM layer to check the reprojection aligns correctly. You don't need to specify tile size, OpenLayers will set that automatically based on the default tile grid and other parameters.

proj4.defs('EPSG:2154', '+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ');
if (ol.proj.proj4 && ol.proj.proj4.register) { ol.proj.proj4.register(proj4); }

const map = new ol.Map({
  layers: [
new ol.layer.Tile({
  name: 'wmstiles',
  source: new ol.source.TileWMS({
    url: 'https://ssl-geowms.lillemetropole.fr/dynmapr/dynmapr.php',
    serverType: 'geoserver',
    version:"1.1.1",
    params: {
      IN: "PLU/plu",
      LAYERS: 'PLU%2Fplu',
      VERSION: '1.1.1',
      TRANSPARENT: false,
    },
    pixelRatio: 1,
    projection: 'EPSG:2154',
  }),
  visible: true,
}),
new ol.layer.Tile({
    source: new ol.source.OSM(),
    opacity: 0.5
}),
  ],
  target: 'map',
  view: new ol.View({
center: ol.proj.fromLonLat([3.1666, 50.6167]),
zoom: 13,
maxZoom: 20,
  })
});

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
<div id="map" class="map"></div>

Openlayers not re-projecting WMS queries

1 Answers