I'm using Leaflet to display agricultural plots obtain from a WMS.
Here is the link to the WMS : https://wxs.ign.fr/agriculture/geoportail/r/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities
Here's what I've done so far :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script data-key="agriulture" src="\node_modules\geoportal-extensions-leaflet\dist\GpPluginLeaflet.js"></script>
<script src="\node_modules\geoportal-extensions-leaflet\dist\GpPluginLeaflet.css"></script>
<script src="\node_modules\proj4\dist\proj4.js"></script>
<script src="\node_modules\proj4leaflet\src\proj4leaflet.js"></script>
<title>TEST MAP</title>
<style>
#map { height: 500px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map',{crs : L.CRS.EPSG3857}).setView([45.5 , 4.5], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
var wmsLayer = L.tileLayer.wms('https://wxs.ign.fr/agriculture/geoportail/r/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities', {
layers: 'LANDUSE.AGRICULTURE2020',
}).addTo(map);
</script>
</body>
</html>
The OSM tile is displaying well, but not the WMS layer.
In the console, I get this error :
<ServiceExceptionReport xmlns="http://www.opengis.net/ogc">
<script> try { Object.defineProperty(navigator, "globalPrivacyControl", { value: false, configurable: false, writable: false }); document.currentScript.parentElement.removeChild(document.currentScript); } catch(e) {}; </script>
<ServiceException code="MissingParameterValue"> Parametre CRS absent. </ServiceException>
</ServiceExceptionReport>
As there is a CRS params missing, I've tried something with proj4 and proj4leaflet but without success.
1 Answer 1
You are making a WMS version 3 request, which needs to use a CRS parameter while you are sending an SRS parameter.
So either use version 1.1.1 and an SRS parameter or change the SRS to a CRS.
In general the best practice is to allow the client code to negotiate the version with the server (so leave the version parameter out of the getCapabilitites request). Though with out checking the source of the leaflet plugin I can't say if this would work in this case.
-
Thanks a lot ! It finally works. I'm quite new to WMS in Leaflet , how can i interact with this layer's object : the plot in my case ? Thanks againAdBess– AdBess2021年12月01日 14:42:46 +00:00Commented Dec 1, 2021 at 14:42
-
1If you have additional question, please post it as a separate question.TomazicM– TomazicM2021年12月01日 16:43:34 +00:00Commented Dec 1, 2021 at 16:43
request(determining the type of request being made) but with different values, and two parameters namedversion(determining the version of the response required) also with different values. The WMS specification tells us thatWhen request parameters are duplicated with conflicting values, the response from the server may be undefined. This International Standard does not mandate which of the duplicated values sent by the client are to be used by the server.transparent=false&has no benefit here, the values for transparent areTRUEorFALSEi.e. case sensitive, the default being FALSE