Load WFS from ArcGIS Online on OpenLayers 3

Question

My goal is to load several shapefiles and display them using OpenLayers 3 as the basemap. I now have these shapefiles as a Web Feature Service (WFS) on ArcGIS Online. Below is what I have done (starting with one WFS).

// arcgis start
  var geojsonFormat = new ol.format.GeoJSON();

  var vectorSource = new ol.source.Vector({
    loader: function(extent, resolution, projection) {
      var url = '// https://dservices1.arcgis.com/DbPykcCwUUYq5zKg/arcgis/services/urban/WFSServer?service=wfs&request=getcapabilities';
      $.ajax({url: url, dataType: 'jsonp', jsonp: true});
    },
    strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
      maxZoom: 19
    }))
  });
  window.loadFeatures = function(response) {
    vectorSource.addFeatures(geojsonFormat.readFeatures(response));
  };

  var centerlocations = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style()
  });

  // arcgis end

My browser console shows ol.tilegrid.createXYZ is not a function. How do I go about successfully loading my shapefiles?

Answer 1

createXYZ wasn't added until the later versions of OpenLayers 3. Before that you had to construct an XYZ grid by the long method, if you cannot upgrade this is what is needed:

var proj3857 = ol.proj.get('EPSG:3857');
var origin = ol.extent.getTopLeft(proj3857.getExtent());
var maxResolution = ol.extent.getWidth(proj3857.getExtent()) / 256;

var resolutions = [];
for (var i = 0; i <= 19; i++) {
    resolutions[i] = maxResolution / Math.pow(2, i);
}

...
...

    strategy: ol.loadingstrategy.tile(new ol.tilegrid.TileGrid({
      resolutions: resolutions,
      origin: origin
    }))