Utiliser une valeur CRS différente pour une couche spécifique

rubenhesselink

version esri-leaflet : 3.0.12

version leaflet : 1.9.4

 

Bonjour ! Je crée une carte avec plusieurs couches superposées.

La carte de base utilise la valeur CRS par défaut de leaflet et cela s'affiche sans problème. Mais lorsque j'essaie de superposer une couche avec une valeur CRS différente, par exemple la carte arcgis suivante : https://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_2023/MapServer
Cela me donne une erreur 404 non trouvée lorsque je passe à cette couche spécifique.

(Échec du chargement de la ressource : le serveur a répondu avec un statut 404 (https://tiles2.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_2023/MapServer/tile/11/675/1058))

Je charge ma carte de base comme suit :

this.leafletMap = L.map(config["map-element-id"], {
  attributionControl: false,
  zoomSnap: 0.1,
  crs: L.CRS.EPSG3857, // Utiliser le CRS par défaut pour la couche de la carte de base
  layers: [L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png")],
});

Et le changement de couche ressemble à ceci :

this.historicalCrs = new L.Proj.CRS(
  "EPSG:28992",
  "+proj=sterea +lat_0=52.1561605555556 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.4171,50.3319,465.5524,1.9342,-1.6677,9.1019,4.0725 +units=m +no_defs +type=crs",
  {
    origin: [-3.05155E7, 3.1112399999999993E7],
    resolutions: [
      3251.206502413005,
      1625.6032512065026,
      812.8016256032513,
      406.40081280162565,
      203.20040640081282,
      101.60020320040641,
      50.800101600203206,
      25.400050800101603,
      12.700025400050801,
      6.350012700025401,
      3.1750063500127004,
      1.5875031750063502,
    ]
  }
);

updateHistoricalLayer(element) {
  const self = this;
  if (this.activeHistoricalLayer) {
    this.leafletMap.removeLayer(this.activeHistoricalLayer);
    this.activeHistoricalLayer = null;
  }
  for (const index in this.historicalLayers) {
    const layer = this.historicalLayers[index];
    if (layer.id === element.value) {
      if (layer.wms) {
        this.activeHistoricalLayer = L.tileLayer.wms(layer.wms, {
          layers: layer.layer,
        });
      } else if (layer.wmts) {
        this.activeHistoricalLayer = L.esri.tiledMapLayer({
          url: "https://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_2023/MapServer",
          # crs: this.historicalCrs, ESSAYÉ DE L'AJOUTER ICI MAIS NE FAIT RIEN
          continuousWorld: true,
        });
      }
      if (this.activeHistoricalLayer) {
        if (layer.wmts) {
          this.leafletMap.options.crs = this.historicalCrs;
        }
        console.log(this.activeHistoricalLayer);
        this.leafletMap.addLayer(this.activeHistoricalLayer);
      }
      document
        .querySelectorAll("input[name=historical-layer-opacity]")
        .forEach((element) => {
          self.setHistorcialLayerOpacity(element);
        });
      break; // Couche trouvée et ajoutée, sortir de la boucle
    }
  }
}

Je sais que mon problème a quelque chose à voir avec la projection (CRS) mais je ne parviens pas à comprendre exactement ce qui ne va pas. Et j'apprécierais vraiment si quelqu'un pouvait m'indiquer la bonne direction.

(Si plus d'informations/contexte sont nécessaires, merci de me le faire savoir et je les fournirai)

GavinRehkemper

Hi @rubenhesselink,

Thank you for the question. Please see here for a sample of using a non-mercator projection for a tiled service: https://developers.arcgis.com/esri-leaflet/samples/non-mercator-projection/

Following that sample, using your projection (https://epsg.io/28992), I am getting your layer to work here: https://jsbin.com/cejovuy/2/edit?html,output

 

/* create new Proj4Leaflet CRS:
  1. Proj4 and WKT definitions can be found at sites like https://epsg.io, https://spatialreference.org/ or by using gdalsrsinfo https://www.gdal.org/gdalsrsinfo.html
  2. Appropriate values to supply to the resolution and origin constructor options can be found in the ArcGIS Server tile server REST endpoint (ex: https://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Background_2/MapServer).
  3. The numeric code within the first parameter (ex: `27700`) will be used to project the dynamic map layer on the fly
*/
const crs = new L.Proj.CRS(
  "EPSG:28992","+proj=sterea +lat_0=52.1561605555556 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.4171,50.3319,465.5524,1.9342,-1.6677,9.1019,4.0725 +units=m +no_defs +type=crs",
  {
    origin: [-30515500, 31112399.999999993],
    resolutions: [
      3251.206502413005,
      1625.6032512065026,
      812.8016256032513,
      406.40081280162565,
      203.20040640081282,
      101.60020320040641,
      50.800101600203206,
      25.400050800101603,
      12.700025400050801,
      6.350012700025401,
      3.1750063500127004,
      1.5875031750063502,
    ]
  }
);

const map = L.map("map", {
  crs: crs
}).setView([51.92, 5.2], 3);

// The min/maxZoom values provided should match the actual cache thats been published. This information can be retrieved from the service endpoint directly.
L.esri
  .tiledMapLayer({
    url: "https://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_2023/MapServer",
    maxZoom: 11,
    minZoom: 0
  })
  .addTo(map);

 

I hope this helps!
Gavin