A RasterTileSetModel typically returns HTML5 Image objects. Sometimes though, you may want to display compressed images, such as PNG or GIF files, or raw uncompressed images as tiles.

To return ArrayBuffer objects with such compressed or raw images, override the getTileData method in UrlTileSetModel. Then, call the onSuccess callback with a TileData object. 

const reference = getReference("CRS:84");
//Create the model
const model = new UrlTileSetModel({
  structure: {
    reference: reference,
    bounds: createBounds(reference, [-180, 360, -90, 180]),
  },
  baseURL: "http://localhost:8072/sampledata/boston/{z}_{x}_{y}.png"
});
//and replace the getTileData method with a custom implementation
model.getTileData = function(tile: TileCoordinate,
                             onSuccess: (tile: TileCoordinate, data: TileData) => void,
                             onError: (tile: TileCoordinate, error: any) => void) {

  const xhr = new XMLHttpRequest();
  xhr.onload = function() {
    const tileData = {
      data: xhr.response,
      mimeType: "image/png"
    };
    onSuccess(tile, tileData);
  };
  xhr.onerror = function() {
    onError(tile, "An error occurred while fetching the tile image.");
  };

  const tileURL = model.getTileURL(model.baseURL, tile);
  if (!tileURL) {
    onError(tile, "Could not retrieve tile URL for tile.");
    return;
  }
  xhr.open("GET", tileURL);
  xhr.responseType = "arraybuffer";
  xhr.send();
};