arcgis vector tile must enforce ?f=pjson other wise will fail to load

ESRI have 2 kind of place for vector tile:

1. at arcgis.com for example: https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Microsoft_Building_Footprints/VectorTileServer default format is json which works

           `olms( map,    "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/2020_USA_Median_Age/VectorTileServer/resources/styles/root.json"  );`
   

https://transparentgov.net/ol2/dist/arcgisvector.html?layer=Microsoft_Building_Footprints+%28+VectorTileServer+%29+&center_lat=42.36049978477919&center_long=-71.05959999999999&center_zoom=17&url=https%3A%2F%2Ftiles.arcgis.com%2Ftiles%2FP3ePLMYs2RVChkJx%2Farcgis%2Frest%2Fservices%2FMicrosoft_Building_Footprints%2FVectorTileServer

1. at third party arcgis server in “hosted” folder for example:
   https://gis.la-quinta.org/arcgis/rest/services/Hosted/ParcelZoning/VectorTileServer default format is html which broken

           `olms( map,    "https://gis.la-quinta.org/arcgis/rest/services/Hosted/ParcelZoning/VectorTileServer/resources/styles/root.json"  );`
   

   https://transparentgov.net/ol2/dist/arcgisvector.html?layer=ParcelZoning+%28+VectorTileServer+%29+&center_lat=33.66339980056587&center_long=-116.31&center_zoom=17&url=https%3A%2F%2Fgis.la-quinta.org%2Farcgis%2Frest%2Fservices%2FHosted%2FParcelZoning%2FVectorTileServer

   if you look at chrome developer tool, network tab, this url default output is html, which cause down stream error I think this URL call initiated by this ol-mapbox-style, I have no way to fix, you must fix inside this library code.

   must add ?f=pjson or ?f=json to enforce json format at this library. 

I use v7.1.1. please fix this bug. v8.0.3 is not compatible with my code. so not use.

[ahocevar]

In v8, you could use the transformRequest option. I think v8 will also work with OpenLayers versions older than v6.13, but I have not tried.

That said, if you’re stuck with v7, you can try to prepend the following code:

const originalFetch = fetch;
window.fetch = function(url, options) {
  const headers = options.headers || {};
  if (!headers['Accept']) {
    headers['Accept'] = 'application/json';
  }
  options.headers = headers;
  return originalFetch(url, options);
}

[hoogw]

This final production working: https://transparentgov.net/ol2/dist/arcgisvector.html?layer=ParcelZoning+%28+VectorTileServer+%29+&center_lat=33.674447844698506&center_long=-116.29896965586569&center_zoom=17.606760329604707&url=https%3A%2F%2Fgis.la-quinta.org%2Farcgis%2Frest%2Fservices%2FHosted%2FParcelZoning%2FVectorTileServer&overlayOpacity=5