Gebruik een andere CRS-waarde voor een specifieke laag

rubenhesselink

esri-leaflet versie: 3.0.12

leaflet versie: 1.9.4

 

Hallo daar! Ik maak een kaart met meerdere overlay-lagen.

De basemap gebruikt de standaard CRS-waarde van leaflet en deze wordt zonder problemen weergegeven. Maar wanneer ik probeer een laag te overlayen met een andere CRS-waarde, bijvoorbeeld de volgende arcgis-kaart: https://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_2023/MapServer
Krijg ik een 404 niet gevonden fout bij het schakelen naar deze specifieke laag.

(Kon bron niet laden: de server reageerde met status 404 (https://tiles2.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_2023/MapServer/tile/11/675/1058))

Ik laad mijn basemap als volgt:

this.leafletMap = L.map(config["map-element-id"], {
  attributionControl: false,
  zoomSnap: 0.1,
  crs: L.CRS.EPSG3857, // Gebruik standaard CRS voor basemap-laag
  layers: [L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png")],
});

En de wissellaag ziet er zo uit:

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, PROBEER HIER TOE TE VOEGEN MAAR HEEFT GEEN EFFECT
          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; // Laag gevonden en toegevoegd, lus verlaten
    }
  }
}

Ik weet dat mijn probleem iets te maken heeft met de projectie (CRS), maar ik kan niet precies achterhalen wat er misgaat. En ik zou het zeer op prijs stellen als iemand me in de juiste richting kan wijzen.

(Als er meer informatie/context nodig is, laat het me dan weten en ik zal het aanleveren)

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