openlayers加载切片地图

使用的软件是tilemile。openlayers2和openlayers3加载切片地图使用的接口是不同的。下面做分析。

openlayers2:

layerName为图层名字，tileUrl为切片所在路径

function getTileLayerFunc(layerName,tileUrl){
	var mapMinZoom = 16;
    var mapMaxZoom = 23;
    var mapBounds = new OpenLayers.Bounds( 120.215163348, 30.2106933606, 120.216941889, 30.2125873624);

    //新建切片图层
    var tileLayer = new OpenLayers.Layer.TMS( layerName, "",
            {
                serviceVersion: '.',
                layername: layerName,
                alpha: true,
				type: 'jpg',
				getURL: overlay_getTileURL
            });

		//获取每个小切片路径函数
        function overlay_getTileURL(bounds) {
			bounds = this.adjustBounds(bounds);
            var res = this.map.getResolution();
            var x = Math.round((bounds.left - this.tileOrigin.lon) / (res * this.tileSize.w));
            var y = Math.round((bounds.bottom - this.tileOrigin.lat) / (res * this.tileSize.h));
            var z = this.map.getZoom();
			var path = tileUrl+"/_alllayers/" + z + "/" + x + "/" + y + "." + this.type+"?time="+new Date().getTime();
			var url = tileUrl+"/_alllayers/";

	        if (mapBounds.intersectsBounds( bounds ) && z >= mapMinZoom && z <= mapMaxZoom) {

	        	return path;
	        } else {
//               return "http://www.maptiler.org/img/none.png";
            }
        }

    //返回切片图层
	//return tileLayer;

	map.addLayer(tileLayer);
	tileLayer.setZIndex(0);
}

openlayers3:

layerName为图层名字，tileUrl为切片所在路径

function getTileLayerFunc(layerName,tileUrl){
	var projectionExtent = Map.projection.getExtent();
	var maxResolution = ol.extent.getWidth(projectionExtent) / (Map.tileSize * 2);
	var resolutions = new Array(23);
	var z;
	for (z = 0; z < resolutions.length; ++z) {
		resolutions[z] = maxResolution / Math.pow(2, z);
	}

	var urlTemplate = tileUrl+'/_alllayers/{z}/{x}/{y}.jpg'+"?time="+new Date().getTime();

	var tileLayer = new ol.layer.Tile({
		/* ol.source.XYZ and ol.tilegrid.TileGrid have no resolutions config */
		source: new ol.source.TileImage({
			tileUrlFunction: function(tileCoord, pixelRatio, projection) {
			var z = tileCoord[0];
			var x = tileCoord[1];
			var y = Math.pow(2, z) + tileCoord[2];
			// wrap the world on the X axis
			var n = Math.pow(2, z + 1); // 2 tiles at z=0
			x = x % n;
			if (x * n < 0) {
				// x and n differ in sign so add n to wrap the result
				// to the correct sign
				x = x + n;
			}
			return urlTemplate.replace('{z}', z.toString())
			.replace('{y}', y.toString())
			.replace('{x}', x.toString());
			},
			projection: Map.projection,
			tileGrid: new ol.tilegrid.TileGrid({
				origin: ol.extent.getTopLeft(projectionExtent),
				resolutions: resolutions,
				tileSize: Map.tileSize
			})
		}),
		name:layerName
	});

	//return tileLayer;

	map.addLayer(tileLayer);
	//tileLayer.setZIndex(0)
}