Using Custom Aerial Raster Imagery with OpenLayers 3 or 4

Question

Currently, openlayers supports bing maps, however this is not an ideal option for a commercial application. What would be ideal is to have the ability to host and serve ariel imagery like NASA blue marble at http://visibleearth.nasa.gov/view_cat.php?categoryID=1484

Is there a way to serve an open source aerial image as a basemap in an openlayers 3 or 4 application? How could this be accomplished in theory?

EDIT: I'd like to know more about hosting and serving the aerial map locally. There are examples of how to do this with OpenStreetMaps using Mod_tile, renderd, mapnik, osm2pgsql and a postgresql/postgis database on the switch to OSM website https://switch2osm.org/manually-building-a-tile-server-16-04-2-lts/

How would one go about replicating this process locally using just raster imagery like NASA blue marble at http://visibleearth.nasa.gov/view_cat.php?categoryID=1484 (Large file)

Answer 1

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.

Answer 2

It seems there is a variation of this question that partly answers it by addressing how to import raster images into a PostGIS database How to import a raster into PostGIS?

Theoretically, you would load a raster image like the NASA blue marble imagery into a PostGIS database using a tool called raster2pgsql. The image could then be served as WMS - through a geospatial data server like GeoServer - in a web-based OpenLayers application.

• Loading raster data in the database/ Reading raster data from the database with raster2pgsql