ArcGIS tile layers need to be loaded recently. There is no problem with running the demo of loading ArcGIS tile layers on the official website. If the URL of ArcGIS tile layer is changed into the ArcGIS map service released by itself, it can not be loaded, but the ArcGIS API provided by the service itself can be loaded. So I tried to write a custom extension called ArcGISTileLayer to load the ArcGIS tile layer.

1. Analyze the URL of ArcGIS API

Open Network in your browser

The URL parameter is composed of dPI, bboxSR, imageSR, size, transparent, format, f, bbox. After analyzing several URL data, it can be found that dPI, bboxSR, imageSR, size, transparent, format and F are fixed. Only the Bbox is changing. So, if we manually calculate the bbox and concatenate the parameters, can we load the ArcGIS tile layer?

2. Write the first version with the core code as follows (complete code)

var defaultArcParams = {
    dpi: '90'.bboxSR: '4326'.imageSR: '4326'.size: '512512'.transparent: true.format: 'png32'.f:'image'
};
ArcGISTileLayer.prototype.getTileUrl = function getTileUrl(x, y, z) {
      var res = this.getSpatialReference().getResolution(z),
          tileConfig = this._getTileConfig(),
          tileExtent = tileConfig.getTilePrjExtent(x, y, res);

      var max = tileExtent.getMax(),
          min = tileExtent.getMin();
	  var bbox = [min.x, min.y, max.x, max.y].join(', ');

	  var url = _TileLayer.prototype.getTileUrl.call(this, x, y, z);

      return url + getParamString(defaultArcParams, url, false) + '&bbox=' + bbox;
    };
Copy the code

After modifying the demo on the official website, I found that ArcGIS tile layers could be loaded smoothly. I was delighted that loading ArcGIS tile layers was so easy. I immediately tried my ArcGIS map service, but found it could not be loaded. After re-analyzing the URL of ArcGIS API, it was found that only dPI, transparent, format and F remained unchanged. Other parameters bboxSR (EPSG), imageSR(EPSG), size (slice size), and bBox (tileExtent) need to be dynamically calculated based on the service.

3. Perfect version

var defaultArcParams = {
    dpi: '90',		
	transparent: true,
	format: 'png32',
	f:'image'
};
ArcGISTileLayer.prototype.getTileUrl = function getTileUrl(x, y, z) {
      var res = this.getSpatialReference().getResolution(z),
          tileConfig = this._getTileConfig(),
          tileExtent = tileConfig.getTilePrjExtent(x, y, res);

      var max = tileExtent.getMax(),
          min = tileExtent.getMin();
	  var bbox = [min.x, min.y, max.x, max.y].join(',');
	  
	  var pro = this.getSpatialReference().getProjection()
	  var srid = pro.code.split(':').pop();
      this.arcParams['bboxSR'] = srid;
	  this.arcParams['imageSR'] = srid;
	  
	  var tileSize = this.getTileSize();
	  this.arcParams['size'] = tileSize.width + ',' + tileSize.height;

	  var url = _TileLayer.prototype.getTileUrl.call(this, x, y, z);

      return url + getParamString(this.arcParams, url, false) + '&bbox=' + bbox;
    };
Copy the code

The ArcGIS map service released by myself was tested and loaded successfully.