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.