Using Custom Aerial Raster Imagery with OpenLayers 3 or 4

You could use this example as a template. You can substitute in any tile server in the form http:{a}.server/layer/{z}/{x}/{y}.png, where server is the url, layer is the layer name, and z, x, y and the zoom, row and column of the globally defined 3857 xyz tileset, which is the standard in OpenLayers, Leaflet, Google Maps and other slippy map server you are likely to come accross.

The {a}.server is for mostly historical reasons, as old browsers used to be limited by the number of simultaneous requests they could make to the same domain, which slowed down slippy maps type interfaces, allowing a.tileserver.com, b.tileserver.com, etc, to get round it.

There is a nice Leaflet page which a list of tile server urls you could drop into the above.

There are many options for aerial imagery, for example, from ESRI http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}

The code is as simple as:

 var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.XYZ({
          url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
              '?apikey=Your API key from http://www.thunderforest.com/docs/apikeys/ here'
        })
      })
    ],
    view: new ol.View({
      center: [-472202, 7530279],
      zoom: 12
    })
  });

ie, you create an ol.Map instance and pass in ol.layer.Tile instance and an ol.View instance, to set the initial zoom and center point.

There is also a Mapbox using OpenLayers demo page, with a url for satellite of https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/256/{z}/{x}/{y}?access_token='. You will need to apply for an API access token, but their free layer is quite generous.