概述：

本文讲述怎样在OpenLayers中调用Arcgis Server切片并显示。

思路：

在OpenLayers中载入Arcgis Server切片用XYZ图层，Arcgis Server的切片调用地址我们能够看到例如以下：

能够看到，切片的请求地址为http://localhost:6080/arcgis/rest/services/china/MapServer/z/y/x。当中，z为缩放级别，x，y分别为改切片距离tileOrigin的行列号。其计算方式为：

        var res = this.getResolution();
        var originTileX = (this.tileOrigin.lon + (res * this.tileSize.w/2));
        var originTileY = (this.tileOrigin.lat - (res * this.tileSize.h/2));
        var center = bounds.getCenterLonLat();
        var point = { x: center.lon, y: center.lat };
        var x = (Math.round(Math.abs((center.lon - originTileX) / (res * this.tileSize.w)))); 
        var y = (Math.round(Math.abs((originTileY - center.lat) / (res * this.tileSize.h)))); 
        var z = this.map.getZoom();

将之封装为一个OpenLayers扩展类OpenLayers.Layer.AgsTileLayer。该类的代码方式为：

OpenLayers.Layer.AgsTileLayer = OpenLayers.Class(OpenLayers.Layer.XYZ, {
    url: null,
    tileOrigin: null,
    tileSize: new OpenLayers.Size(256, 256),
    type: ‘png‘,
    useScales: false,
    overrideDPI: false,
    initialize: function(name, url, options) { 
        OpenLayers.Layer.XYZ.prototype.initialize.apply(this, arguments);
    },
    getURL: function (bounds) {
        var res = this.getResolution();
        var originTileX = (this.tileOrigin.lon + (res * this.tileSize.w/2));
        var originTileY = (this.tileOrigin.lat - (res * this.tileSize.h/2));
        var center = bounds.getCenterLonLat();
        var point = { x: center.lon, y: center.lat };
        var x = (Math.round(Math.abs((center.lon - originTileX) / (res * this.tileSize.w)))); 
        var y = (Math.round(Math.abs((originTileY - center.lat) / (res * this.tileSize.h)))); 
        var z = this.map.getZoom();
        var url = this.url;
        var s = ‘‘ + x + y + z;
        if (OpenLayers.Util.isArray(url)) {
            url = this.selectUrl(s, url);
        }
        url = url + ‘/tile/${z}/${y}/${x}‘;
        url = OpenLayers.String.format(url, {‘x‘: x, ‘y‘: y, ‘z‘: z});
        return OpenLayers.Util.urlAppend(
            url, OpenLayers.Util.getParameterString(this.params)
        );
    },

    CLASS_NAME: ‘OpenLayers.Layer.AgsTileLayer‘
}); 

调用方式为：

<script src="http://www.mamicode.com/AgsTileLayer.js"></script>

            var tiled = new OpenLayers.Layer.AgsTileLayer( "AGSCache",
                    "http://localhost:6080/arcgis/rest/services/china/MapServer", {
                        isBaseLayer: true,
                        tileSize: new OpenLayers.Size(256, 256),
                        resolutions: [
                            0.07614275218656896,
                            0.03807137609328448,
                            0.01903568804664224,
                            0.00951784402332112,
                            0.00475892201166056
                        ],
                        tileOrigin: new OpenLayers.LonLat(-400 , 400),
                        maxExtent: bounds,
                        projection: ‘EPSG:4326‘
                    });
            map.addLayers([tiled]);

代码中涉及到的參数能够从http://localhost:6080/arcgis/rest/services/china/MapServer?f=pjson返回的JSON数据中获取。例如以下：

{
   "capabilities" : "Map,Query,Data",
   "copyrightText" : "",
   "currentVersion" : 10.110,
   "description" : "",
   "documentInfo" : {
      "AntialiasingMode" : "None",
      "Author" : "",
      "Category" : "",
      "Comments" : "",
      "Keywords" : "",
      "Subject" : "",
      "TextAntialiasingMode" : "Force",
      "Title" : ""
   },
   "fullExtent" : {
      "spatialReference" : {
         "latestWkid" : 4326,
         "wkid" : 4326
      },
      "xmax" : 134.9767976465060,
      "xmin" : 73.45100463562233,
      "ymax" : 53.53194315222358,
      "ymin" : 18.16324718764174
   },
   "initialExtent" : {
      "spatialReference" : {
         "latestWkid" : 4326,
         "wkid" : 4326
      },
      "xmax" : 138.0530872970502,
      "xmin" : 70.37471498507816,
      "ymax" : 55.85657468506156,
      "ymin" : 35.30335092712114
   },
   "layers" : [
      {
         "defaultVisibility" : true,
         "id" : 0,
         "maxScale" : 0,
         "minScale" : 0,
         "name" : "province",
         "parentLayerId" : -1,
         "subLayerIds" : null
      },
      {
         "defaultVisibility" : true,
         "id" : 1,
         "maxScale" : 0,
         "minScale" : 0,
         "name" : "bcity",
         "parentLayerId" : -1,
         "subLayerIds" : null
      },
      {
         "defaultVisibility" : true,
         "id" : 2,
         "maxScale" : 0,
         "minScale" : 0,
         "name" : "bcounty",
         "parentLayerId" : -1,
         "subLayerIds" : null
      }
   ],
   "mapName" : "Layers",
   "maxImageHeight" : 2048,
   "maxImageWidth" : 2048,
   "maxRecordCount" : 1000,
   "maxScale" : 1000000,
   "minScale" : 32000000,
   "serviceDescription" : "",
   "singleFusedMapCache" : true,
   "spatialReference" : {
      "latestWkid" : 4326,
      "wkid" : 4326
   },
   "supportedImageFormatTypes" : "PNG32,PNG24,PNG,JPG,DIB,TIFF,EMF,PS,PDF,GIF,SVG,SVGZ,BMP",
   "supportedQueryFormats" : "JSON, AMF",
   "supportsDynamicLayers" : false,
   "tables" : [],
   "tileInfo" : {
      "cols" : 256,
      "compressionQuality" : 0,
      "dpi" : 96,
      "format" : "PNG",
      "lods" : [
         {
            "level" : 0,
            "resolution" : 0.07614275218656896,
            "scale" : 32000000
         },
         {
            "level" : 1,
            "resolution" : 0.03807137609328448,
            "scale" : 16000000
         },
         {
            "level" : 2,
            "resolution" : 0.01903568804664224,
            "scale" : 8000000
         },
         {
            "level" : 3,
            "resolution" : 0.009517844023321120,
            "scale" : 4000000
         },
         {
            "level" : 4,
            "resolution" : 0.004758922011660560,
            "scale" : 2000000
         },
         {
            "level" : 5,
            "resolution" : 0.002379461005830280,
            "scale" : 1000000
         }
      ],
      "origin" : {
         "x" : -400,
         "y" : 400
      },
      "rows" : 256,
      "spatialReference" : {
         "latestWkid" : 4326,
         "wkid" : 4326
      }
   },
   "units" : "esriDecimalDegrees"
}