Openlayers with multiple TileLayers with WMTS source, second layer shifted

Question

I'm trying to create a map widget with multiple layers. The base layer is OSM base map. Upon that, I add two more layers with different CRS. Layer A is added with EPSG:3912. Layer B is added with EPSG:3857 (which is actually WGS 84 / Pseudo-Mercator). Layer B also has a feature layer that can be queried.

Layer B was generated via ArcGIS Online services from a feature layer.

Layers are added to ol.Map as VectorTileLayers like this:

const layer = new TileLayer()
layer.setSource(new WMTS(async (source: MapServerSource): Promise<WMTSOptions> => {
    const wmtsParser: WMTSCapabilities = new WMTSCapabilities();
    const response: Response = await fetch(source.url);
    const capText: string = await response.text()
    const capablilities: any = wmtsParser.read(capText);
    const options: WMTSOptions = {
      ...optionsFromCapabilities(capablilities, {
        layer: source.layer,
      }),
      attributions: [source.copyRight],
    };

    return options;
  }))

Layer A perfectly aligns with the base layer. But layer B is off for a few meters (maybe 10). It's shifted. If I query layer b feature layer, when the user clicks on the map, the result I get and I render falls approx. 10 m off the point rendered from the TileLayer. If I use the same layer on google maps it's OK. Also if I try to create web-map on ArcGIS Online and use LayerA and LayerB, they both align perfectly.

Any clue what the issue could be?

Answer 1

I managed to solve this by using this layer as XYZ:

const esriLayer = new TileLayer({
      source: new XYZ({
        url: 'https://services-nocdn.arcgis.com/.../MapServer/WMTS/tile/1.0.0/mylayer/default/default028mm/{z}/{y}/{x}.png',
      })
    }); // change mylayer with the name of the layer