can i send request as post request for imageArcgisRest | OPENLAYERS 6.5

Question

I am using imageArcgisRest source and I need to filter data by ids in export layer API, ids can be in thousands. so get a request is not possible to do that. is there any way to request data as a post method with OpenLayers imageArcGisRest source?

here is my code of creating source:

const source = new ImageArcGISRest({
    url: l.url,
    crossOrigin: 'anonymous',
    params: {
      dpi: 96,
      FORMAT: 'PNG8',
      layers: `show: 1`,
      token: 'api-token-here'
    },
  });

Answer 1

This setup works in a simple test (using a test browser because the sample server does not support CORS) to filter highways in the OpenLayers example https://openlayers.org/en/latest/examples/arcgis-image.html

var url =
  "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/" +
  "Specialty/ESRI_StateCityHighway_USA/MapServer";

var filter = {
  "0": "(TOLL_RD = 'N') AND (TYPE LIKE 'Paved%' OR TYPE LIKE 'Gravel%')"
};

var layers = [
  new TileLayer({
    source: new OSM()
  }),
  new ImageLayer({
    source: new ImageArcGISRest({
      ratio: 1,
      params: {
        layerDefs: JSON.stringify(filter)
      },
      url: url,
      imageLoadFunction: function (image, src) {
        var xhr = new XMLHttpRequest();
        xhr.responseType = "blob";
        xhr.addEventListener("loadend", function (evt) {
          var data = this.response;
          if (data) {
            var img = image.getImage();
            var url = URL.createObjectURL(data);
            img.addEventListener("loadend", function () {
              URL.revokeObjectURL(url);
            });
            img.src = url;
          }
        });
        var split = src.split("?");
        xhr.open("POST", split[0]);
        xhr.setRequestHeader(
          "Content-type",
          "application/x-www-form-urlencoded"
        );
        xhr.send(split[1]);
      }
    })
  })
];

The filter could be dynamically updated using

source.updateparams({layerDefs: JSON.stringify(filter)});