Dépliant + Proj4Leaflet + EPSG3995 + WMS

J'essaie de prendre en charge une couche WMS avec une projection stéréographique North Polar (EPSG3995) sur Leaflet mais je ne peux pas le faire fonctionner.

J'ai utilisé Proj4Leaflet et j'ai créé la projection avec les résolutions données par GeoServer (la couche WMS est desservie par GeoServer, voir l'image jointe).

Sur le jsfiddle suivant: https://jsfiddle.net/gaubert/Lyojcrzo/ J'ai essayé de l'implémenter et si vous zoomez sur la carte du dépliant, vous verrez que les tuiles sont hors place?

Qu'est-ce qui manque pour le faire fonctionner? Dois-je implémenter une méthode de transformation ou de projet?

Il y a plusieurs problèmes ici.

Tout d'abord, permettez-moi de citer http://leafletjs.com/examples/wms/wms.html (c'est moi qui souligne):

Notez également que les supports Dépliant très peu de systèmes de coordonnées: CRS:3857, CRS:3395et CRS:4326(voir la documentation L.CRS). Si votre service WMS ne sert pas d'images dans ces systèmes de coordonnées, vous devrez peut-être utiliser Proj4Leaflet pour utiliser un système de coordonnées différent dans Leaflet. En dehors de cela, utilisez simplement le bon CRS lors de l'initialisation de votre carte, et toutes les couches WMS ajoutées l'utiliseront :

var map = L.map('map', {
    crs: L.CRS.EPSG4326
});

var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
    layers: 'nasa:bluemarble'
}).addTo(map);

Le code de votre violon fait le contraire, il spécifie le CRS comme une option pour la couche wms, au lieu d'une option pour la carte:

wmsBKLayer = new L.tileLayer.wms('http://eumetview.eumetsat.int/geoserv/wms', {
    layers: 'bkg-raster:bkg-raster',
    crs: customCRS
}

var map = new L.map('map', {
   // No CRS option here!!
});

Spécifiez le CRS dans les options de la carte , et ça devrait aller.

Deuxièmement, l'instanciation d'objet. Leaflet utilise camelCase avec la première lettre majuscule pour les classes (par exemple L.TileLayerest une classe) et camelCase commençant par une lettre minuscule pour les méthodes d'usine (par exemple L.tileLayerest une méthode d'usine).

var foo = L.tileLayer(...);     // Preferred
var foo = new L.TileLayer(...); // OK, but not preferred
var foo = L.TileLayer(...);     // Nope, one cannot call a class
var foo = new L.tileLayer(...); // Nope nope nope nope, one cannot create an instance of a factory

Veuillez lire « /programming/8698726/constructor-function-vs-factory-functions » si vous trouvez cela déroutant.

Troisièmement, citant https://kartena.github.io/Proj4Leaflet/ :

Utilisez-vous Leaflet 1.0 beta 1 ou des versions de développement de Leaflet? Ensuite, vous devez utiliser la branche de développement de Proj4Leaflet.

Cela signifie qu'il n'y a pas de version publiée de proj4leaflet qui fonctionne avec Leaflet 1.

Dans votre violon, vous utilisez Leaflet 1.0.2 et proj4leaflet 0.7.2. Ceux-ci ne fonctionneront tout simplement pas ensemble.

Utilisez une version inférieure de Leaflet ou créez (et déployez et utilisez) une version plus récente de proj4leaflet. Veuillez noter que proj4leaflet pourrait utiliser un peu d'aide pour sa maintenance, car @liedman ne peut plus le prendre en charge.

Si vous avez le temps, je vous suggère de prendre contact avec les mainteneurs actuels, afin de vous aider avec une nouvelle version compatible avec Leaflet 1.0.0.

Si l'on aborde ces trois problèmes, tout fonctionnera à nouveau. Voir un exemple de travail sur:

https://playground-leaflet.rhcloud.com/giwo/edit?html,output