如何显示底图和 TileLayer ArcGIS Javascript API

Question

I'm using the API of ArcGIS for JavaScript to display a cached map service. So far, I've been following the documentation and this is what I have.

const mapLayer = new TileLayer({
  url: "https://sigmun.implanchihuahua.org/webserver/rest/services/Metrica_Chihuahua/PU023_Dosificacion_Zonificacion_Secundaria_2021_MC/MapServer",
  opacity: 0.3
});

const map = new Map({
  basemap: 'osm',
  layers: [mapLayer],
});

This code displays the next

Even though I created the TileLayer instance it doesn't show up, but if I removed the basemap line, like this.

const mapLayer = new TileLayer({
  url: "https://sigmun.implanchihuahua.org/webserver/rest/services/Metrica_Chihuahua/PU023_Dosificacion_Zonificacion_Secundaria_2021_MC/MapServer",
  opacity: 0.3
});

const map = new Map({
  // basemap: 'osm',
  layers: [mapLayer],
});

The TileLayer gets displayed.

What I want to do is display both things, the basemap and the tile layer.

Answer 1

Your tiled layer is not displaying on top of the OSM basemap because its tiles were created in a different spatial reference.

https://sigmun.implanchihuahua.org/webserver/rest/services/Metrica_Chihuahua/PU023_Dosificacion_Zonificacion_Secundaria_2021_MC/MapServer shows PROJCS["MEXICO_ITRF_2008_UTM_Zone_13N"... while the OSM basemap is in the WebMercator.