Openlayers 3加载XYZ示例

Openlayers3中有个ol.source.XYZ类,可以加载Tile瓦片图层,本文只是做个说明,介绍如何识别以及如何正确加载这些图层。

一 基础XYZ-谷歌离线切片

Openlayers 3加载XYZ示例_第1张图片
明显的名称.png

观察这些Tile命名,xyz是很明显的,这是下载的谷歌切片,直接加载如下:

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

二 变体XZY-谷歌在线切片

Openlayers 3加载XYZ示例_第2张图片
谷歌在线图的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切片

Openlayers 3加载XYZ示例_第3张图片
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切片

Openlayers 3加载XYZ示例_第4张图片
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,“翻译”成脾气不同的切片们,让他们乖乖听话,组成我们需要的切片。

你可能感兴趣的:(Openlayers 3加载XYZ示例)