Openlayers 3加载XYZ示例

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的切片组织规范，比如看下源码，然后理解了，稍微调整即可。

 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，“翻译”成脾气不同的切片们，让他们乖乖听话，组成我们需要的切片。