Add a WMS source

Add an external Web Map Service raster layer to the map using addSource's tiles option. See the example: https://docs.mapbox.com//mapbox-gl-js/example/wms/

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css">

<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

const VIEW_ID = "S2/21/H/UC/2020/12/9/0";
const BAND = "B02,B03,B04";
const API_KEY = "apk.b2a5fffb511b4afde659b8b62b1f2701d215b9f688e26a0a5c11520024cbb0cf";
const API = "https://gate.eos.com/api/render";

mapboxgl.accessToken = 'pk.eyJ1IjoiYWdyb2Zha2UiLCJhIjoiY2toMzlmYmx0MG1sODMwbHNxMjcxZHY0ciJ9.KXG7HeFRGFZ26wMXtG27Dw';

const  map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [-59.04317437121783, -34.21593430784393],
  zoom: 14
});

map.on('load', function() {
  map.addSource('tms-source', {
    type: 'raster',
    tiles: [`${API}/${VIEW_ID}/${BAND}/{z}/{x}/{y}?api_key=${API_KEY}`],
    "tileSize": 256
    /* "bounds": [3.38, 50.73, 7.2432, 53.5455] */
  });
  map.addLayer({
      'id': 'tms-layer',
      'type': 'raster',
      'source': 'tms-source',
    },
    'aeroway-line'
  );
});