Openlayers3中有個(gè)ol.source.XYZ類，可以加載Tile瓦片圖層，本文只是做個(gè)說明，介紹如何識別以及如何正確加載這些圖層。
一 基礎(chǔ)XYZ-谷歌離線切片
觀察這些Tile命名，xyz是很明顯的，這是下載的谷歌切片，直接加載如下：
var layer= new ol.layer.Tile({
source : new ol.source.XYZ({
url : 'http://localhost:8080/baseMap/{z}/{x}/{y}.png'
})
});
二 變體XZY-谷歌在線切片
打開谷歌在線圖，觀察請求的url時(shí)，雖然看上去一大串一大串很長，似乎什么也看不懂，但是注意看紅框出，在放大縮小時(shí)，1i是會變的，而且變化的值和地圖的等級很相似，那么，我們很容易猜想，1i是z（level），2i，3i就是x,y（或者y,x）自己調(diào)調(diào)就可以了。
很明顯，這些url也是基本的xyz，只是不是十分明顯，需要心細(xì)的你仔細(xì)觀察剝離出來參數(shù)即可。
代碼如下：
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的切片，感覺xyz不明顯，但是組織形式也和xyz是一樣的，其實(shí)，稍微想想，除了名字不一樣，豈不都是一樣，那么我們認(rèn)為本質(zhì)就是一樣的，只是有個(gè)障眼法，問題就出在，ArcServer的圖片是16進(jìn)制的，位數(shù)是行R8位數(shù)，列C8位數(shù)，余位補(bǔ)0。
這里需要對圖片名稱轉(zhuǎn)下，通過正常的url“翻譯”到ArcServer的16進(jìn)制。
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進(jìn)制轉(zhuǎn)16進(jìn)制，余位補(bǔ)0，湊成ArcServer的切片格式
function padLeft(num, val) {
return (new Array(num).join('0') + val).slice(-num);
}
通過tileUrlFunction重寫url獲取函數(shù)，構(gòu)造成正確的，這里y-1不一定的，有的需要加1，有的需要z+-1，如果圖片組合混亂的話，對z，y微微加減一調(diào)整下，應(yīng)該很快就能湊齊地圖。
四 變幻的XYZ-GeoWebCache切片
變幻而不是變形，說明萬變不離其宗啊，GeoWebCache切片看著雖然很復(fù)雜，但是也是xyz嗎，只不過變幻了，難道就認(rèn)不出了？明顯epsg_900913是坐標(biāo)系，后面的_10是z。其他的雖然也是摸不著頭腦，可以了解下GeoWebCache的切片組織規(guī)范，比如看下源碼，然后理解了，稍微調(diào)整即可。
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行列轉(zhuǎn)換
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;
}
這個(gè)的確有點(diǎn)復(fù)雜了。。。
綜述：本文只是大概介紹下常見的XYZ格式和變體，對于簡單的XYZ可以直接format加載，對于復(fù)雜的需要使用tileUrlFunction 甚至tilegrid組合，重寫url，將標(biāo)準(zhǔn)的xyz，“翻譯”成脾氣不同的切片們，讓他們乖乖聽話，組成我們需要的切片。
