openlayers 3 加载地图瓦片数据

openlayers 是一套开源的js地图渲染框架，数据源可以使用天地图的数据源。

map对象相当如一个容器，它上面可以铺放多个layer，layer可以加载数据源或其它作用。

有关openlayers 的详细介绍，请参考http://openlayers.org/

下面创建一个layer

urlTemplate中包含x,y,z(z:地图级数，x:x方向序数， y:y方向序数)

function newTilesUrlLayer(urlTemplate, tileSize, zeroLevelSize) {
    var resolutions = new Array(22);
    for (var i = 0, ii = resolutions.length; i < ii; ++i) {
        resolutions[i] = zeroLevelSize / Math.pow(2, i) / 512;
    }
    var layer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            tileSize: tileSize,
            tileUrlFunction: tileUrlFunctionCallBack,
            projection: 'EPSG:4326',
            //tilePixelRatio: tileSize / 256,
            tileGrid: new ol.tilegrid.TileGrid({
                resolutions: resolutions,
                tileSize: tileSize,
                origin:[-180,-90]
		    })
        }),
        name: ''
    });

    function tileUrlFunctionCallBack(tileCoord, pixelRatio, projection) {
        var z = tileCoord[0];
        var x = tileCoord[1];
        var y = tileCoord[2];

        var xStr4 = "0000" + x.toString();
        xStr4 = xStr4.substr(xStr4.length - 4, 4);
        var yStr4 = "0000" + y.toString();
        yStr4 = yStr4.substr(yStr4.length - 4, 4);

        var url = urlTemplate.replace('{z}', z.toString());
        url=url.replace('{y}', yStr4);
	    url=url.replace('{y}', yStr4);
        url = url.replace('{x}', xStr4);
        url = url.replace('{x}', xStr4);
        return url
    }

    return layer;
}

这里的 tileUrlFunctionCallBack淡淡的

就是解析数据源地址的回调函数。

以下给出一个应用的例子的完整代码：

1. Itelluro.ol.js

/**
 * those are for pulling tiles from Itelluro tiles source address, which would return a new layer or map that is access to openlayer3.
 * refer to http://openlayers.org
 */

//
// map

/**
 * @param {string} id The container for the map.