maptalks 如何加載 ArcGIS 瓦片圖層

最近需要加載 ArcGIS 瓦片圖層，運行官網加載 ArcGIS 瓦片圖層的 demo 是沒有問題的。如果把 ArcGIS 瓦片圖層 URL 換成是自已發布的 ArcGIS 地圖服務，發現加載不出來，而服務本身提供的 ArcGIS API 卻可以加載出來。到底是哪里的問題呢，於是便試着寫了個自定義擴展方法 ArcGISTileLayer 用來加載 ArcGIS 瓦片圖層。

1、分析 ArcGIS API 的 URL

打開瀏覽器的 Network

發現 URL 參數是由 dpi 、bboxSR、imageSR、size、transparent、format、f 、bbox 幾個參數構成。多分析幾條 URL 數據會發現，URL 參數中 dpi 、bboxSR、imageSR、size、transparent、format、f 這幾個參數是固定不變的。只有 bbox 在變動。那么，如果我們手動計算 bbox 並拼接參數，是不是就可以實現加載 ArcGIS 瓦片圖層了。

 2、編寫第一個版本 ，核心代碼如下 ( 完整代碼 )

var defaultArcParams = {
    dpi: '90',        
    bboxSR: '4326',
    imageSR: '4326',
    size: '512,512',
    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;
 };

把官網的 demo 改造下，發現果然可以順利加載 ArcGIS 瓦片圖層，心中一陣高興，原來加載 ArcGIS 瓦片圖層這么簡單。馬上把自己發布的 ArcGIS 地圖服務試下，發現加載不了。重新分析下 ArcGIS API 的 URL，最終發現只有 dpi 、transparent、format、f 這四個參數是不變，其他的參數 bboxSR ( EPSG )、imageSR( EPSG )、size ( 切片大小 )、bbox( tileExtent ) 都是需要根據服務動態計算的。

3、完善版本

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;
};

測試下自己發布的 ArcGIS 地圖服務，成功加載。