Openlayers3中有個ol.source.XYZ類，可以加載Tile瓦片圖層，本文只是做個說明，介紹如何識別以及如何正確加載這些圖層。

一 基礎XYZ-谷歌離線切片

明顯的名稱.png

觀察這些Tile命名，xyz是很明顯的，這是下載的谷歌切片，直接加載如下：

 var layer= new ol.layer.Tile({
     source : new ol.source.XYZ({
        url : 'http://localhost:8080/baseMap/{z}/{x}/{y}.png'
     })
});

二 變體XZY-谷歌在線切片

谷歌在線圖的url.png

打開谷歌在線圖，觀察請求的url時，雖然看上去一大串一大串很長，似乎什么也看不懂，但是注意看紅框出，在放大縮小時，1i是會變的，而且變化的值和地圖的等級很相似，那么，我們很容易猜想，1i是z（level），2i，3i就是x,y（或者y,x）自己調調就可以了。
很明顯，這些url也是基本的xyz，只是不是十分明顯，需要心細的你仔細觀察剝離出來參數即可。
代碼如下：

var layer= new ol.layer.Tile({
     source : new ol.source.XYZ({
        url : 'http://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i342009817!3m9!2szh-CN!3sCN!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=32965'
     })
});

三 變形的XYZ-ArcServer切片

ArcServer切片.png

這是ArcServer的切片，感覺xyz不明顯，但是組織形式也和xyz是一樣的，其實，稍微想想，除了名字不一樣，豈不都是一樣，那么我們認為本質就是一樣的，只是有個障眼法，問題就出在，ArcServer的圖片是16進制的，位數是行R8位數，列C8位數，余位補0。
這里需要對圖片名稱轉下，通過正常的url“翻譯”到ArcServer的16進制。

 var road= new ol.layer.Tile({
               source : new ol.source.XYZ({
                                tileUrlFunction : function (xyz, obj1, obj2) {
                                    var z = xyz[0];
                                    var x = Math.abs(xyz[1]);
                                    var y = Math.abs(xyz[2]) - 1;
                                    var x = 'C' + padLeft(8, x.toString(16));
                                    var y = 'R' + padLeft(8, y.toString(16));
                                    var z = 'L' + padLeft(2, z);
                                    var url = 'ArcServerTile/' + z + '/' + y + '/' + x + '.png';
                                    return url;
                                }
                            })
            })
            //將10進制轉16進制，余位補0，湊成ArcServer的切片格式
            function padLeft(num, val) {
                return (new Array(num).join('0') + val).slice(-num);
            }

通過tileUrlFunction重寫url獲取函數，構造成正確的，這里y-1不一定的，有的需要加1，有的需要z+-1，如果圖片組合混亂的話，對z，y微微加減一調整下，應該很快就能湊齊地圖。

四 變幻的XYZ-GeoWebCache切片

GeoWebCache切片.png

變幻而不是變形，說明萬變不離其宗啊，GeoWebCache切片看著雖然很復雜，但是也是xyz嗎，只不過變幻了，難道就認不出了？明顯epsg_900913是坐標系，后面的_10是z。其他的雖然也是摸不著頭腦，可以了解下GeoWebCache的切片組織規(guī)范，比如看下源碼，然后理解了，稍微調整即可。

 var road= new ol.layer.Tile({
     source : new ol.source.XYZ({
              tileUrlFunction :function (xyz, obj1, obj2) {
          if (!xyz) 
              return "";        
          var z=xyz[0];
          var x=Math.abs(xyz[1]);
          var y=Math.abs(xyz[2]);
          var xyz_convert= convert_(z,x,y);
          x=xyz_convert[0];
          y=xyz_convert[1];
          z=xyz_convert[2];
          var shift = z / 2;
          var half = 2 << shift;
          var digits = 1;
          if (half > 10)
              digits = parseInt(Math.log(half)/Math.log(10)) + 1;
          var halfx = parseInt(x / half);
          var halfy = parseInt(y / half);
          x=parseInt(x);
          y=parseInt(y)+1;
          var url=tileRoot+"/EPSG_900913"+"_"+padLeft_(2,z)+"/"+padLeft_(digits,halfx)+"_"+padLeft_(digits,halfy)+"/"+padLeft_(2*digits,x)+"_"+padLeft_(2*digits,y)+"."+format;
          return url;
      }
    })
});


//字符截取
var padLeft_ = function(num, val) {
   return (new Array(num).join('0') + val).slice(-num);
};
//xy行列轉換
var convert_=function(zoomLevel, x, y) {
    var extent = Math.pow(2, zoomLevel);
    if (x < 0 || x > extent - 1) {
        console.log("The X coordinate is not sane: " + x);
        return;
    }
    if (y < 0 || y > extent - 1) {
        console.log("The Y coordinate is not sane: " + y);
        return;
    }
    var gridLoc = [x, extent - y - 1, zoomLevel];
    return gridLoc;
}

這個的確有點復雜了。。。

綜述：本文只是大概介紹下常見的XYZ格式和變體，對于簡單的XYZ可以直接format加載，對于復雜的需要使用tileUrlFunction 甚至tilegrid組合，重寫url，將標準的xyz，“翻譯”成脾氣不同的切片們，讓他們乖乖聽話，組成我們需要的切片。