假设使用墨卡托投影和 256x256 的 tileSize,生成一个基本的谷歌地图:
每个轴(x 和 y)上的瓦片数量为 Math.pow(2,zoom)
,所以在缩放级别 0
上,地图使用 1 个瓦片,在缩放级别 1
上,使用 4 个瓦片,在缩放级别 2
上使用 16 个瓦片,以此类推。
首先计算瓦片的 southwest/northeast 点。
瓦片的大小(以点为单位)为 256/Math.pow(2,zoom)
southwest-point:
x = tile.x * tileSizeInPoints
y = (tile.y * tileSizeInPoints) + tileSizeInPoints
北东角点:
x = (tile.x * tileSizeInPoints) + tileSizeInPoints
y = tile.y * tileSizeInPoints
这些点必须转换为LatLngs。当您使用地图时,可以使用地图投影的方法fromLatLngToPoint。
对于自定义实现,请查看https://developers.google.com/maps/documentation/javascript/examples/map-coordinates。
一个可能的独立于API的实现:
MERCATOR={
fromLatLngToPoint:function(latLng){
var siny = Math.min(Math.max(Math.sin(latLng.lat* (Math.PI / 180)),
-.9999),
.9999);
return {
x: 128 + latLng.lng * (256/360),
y: 128 + 0.5 * Math.log((1 + siny) / (1 - siny)) * -(256 / (2 * Math.PI))
};
},
fromPointToLatLng: function(point){
return {
lat: (2 * Math.atan(Math.exp((point.y - 128) / -(256 / (2 * Math.PI)))) -
Math.PI / 2)/ (Math.PI / 180),
lng: (point.x - 128) / (256 / 360)
};
},
getTileAtLatLng:function(latLng,zoom){
var t=Math.pow(2,zoom),
s=256/t,
p=this.fromLatLngToPoint(latLng);
return {x:Math.floor(p.x/s),y:Math.floor(p.y/s),z:zoom};
},
getTileBounds:function(tile){
tile=this.normalizeTile(tile);
var t=Math.pow(2,tile.z),
s=256/t,
sw={x:tile.x*s,
y:(tile.y*s)+s},
ne={x:tile.x*s+s,
y:(tile.y*s)};
return{sw:this.fromPointToLatLng(sw),
ne:this.fromPointToLatLng(ne)
}
},
normalizeTile:function(tile){
var t=Math.pow(2,tile.z);
tile.x=((tile.x%t)+t)%t;
tile.y=((tile.y%t)+t)%t;
return tile;
}
}
通过提供以下格式的单个对象作为参数来调用 MERCATOR.getTileBounds()
:
{
x:tileIndexX,
y:tileIndexY,
z:zoom
}
示例:http://jsfiddle.net/doktormolle/55Nke/