Verwenden Sie einen anderen CRS-Wert für eine bestimmte Ebene

rubenhesselink

esri-leaflet Version: 3.0.12

leaflet Version: 1.9.4

 

Hallo! Ich erstelle eine Karte mit mehreren Overlay-Ebenen.

Die Basiskarte verwendet den Standard-CRS-Wert von leaflet und wird ohne Probleme dargestellt. Aber wenn ich versuche, eine Ebene mit einem anderen CRS-Wert zu überlagern, zum Beispiel die folgende arcgis-Karte: https://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_2023/MapServer
Erhalte ich einen 404-Fehler, wenn ich zu dieser bestimmten Ebene wechsle.

(Ressource konnte nicht geladen werden: Der Server antwortete mit dem Status 404 (https://tiles2.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_2023/MapServer/tile/11/675/1058))

Ich lade meine Basiskarte wie folgt:

this.leafletMap = L.map(config["map-element-id"], {
  attributionControl: false,
  zoomSnap: 0.1,
  crs: L.CRS.EPSG3857, // Verwenden Sie den Standard-CRS für die Basiskartenebene
  layers: [L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png")],
});

Und der Wechsel der Ebene sieht so aus:

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, VERSUCH HIER HINZUZUFÜGEN ABER ES HAT NICHTS GETAN
          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; // Ebene gefunden und hinzugefügt, Schleife verlassen
    }
  }
}

Ich weiß, dass mein Problem etwas mit der Projektion (CRS) zu tun hat, aber ich kann nicht genau herausfinden, was schief läuft. Ich würde es sehr schätzen, wenn mir jemand den richtigen Weg zeigen könnte.

(Falls weitere Informationen/Kontext benötigt werden, lassen Sie es mich bitte wissen und ich werde sie bereitstellen)

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