javascript - 如何从谷歌地图获取纬度和经度边界 x y 和缩放参数

Question

我看过一些类似标题的问题，但它们似乎指的是 x 和 y 像素坐标。

我要从 Google map getTile() 函数中询问 x 和 y 的实际图 block 编号:

澄清问题...

给定 getTile() 函数中的 x、y 和缩放参数，如何找到图 block 的纬度和经度边界？

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {

    var x = coord.x,
    y = coord.y,
    url = "http://mt1.google.com/vt/lyrs=y&x="+x+"&y="+y+"&z="+zoom;
    //other stuff   
}

目前我需要这个的唯一原因是我想确定这个瓦片投影的最大缩放级别。从这个链接:Maximum Zoom ，它指出为了找到最大缩放，我需要使用 getMaxZoomAtLatLng() 的纬度和经度值。因此，如果我可以获得边界，那么我可以使用边界内的任何纬度和经度点来找到我的最大缩放。

我想到的替代方案是创建一个图像并检查 src url 是否有错误(这对我来说似乎是一个糟糕的主意，因为我会发出许多错误的请求只是为了检查图像是否存在)。

var img = new Image;
img.onload = function() {/*imagery exists*/ }
img.onerror = function() {/*past maximum zoom*/ }
img.src = url;

编辑:

经过进一步调查，我意识到 getMaxZoomAtLatLng() 函数使用的是 ajax 调用，这不符合我的计划。但我仍然对如何找到给定图 block 的纬度和经度边界感兴趣(这可能对其他应用程序有用)。

Answer 1

假设使用 mercator-projection 和 tileSize 为 256x256 的基本谷歌地图:

每个(x 轴和 y 轴)上的图 block 数是 Math.pow(2,zoom)，因此 map 使用的缩放 0 1 个图 block ，缩放 1 4 个图 block ，缩放 2 16 个图 block ，依此类推。

首先计算图 block 的西南/东北点。

图 block 的大小(以磅为单位)是 256/Math.pow(2,zoom)

西南点:

x = tile.x * tileSizeInPoints
y = (tile.y * tileSizeInPoints) + tileSizeInPoints

东北 Angular :

x = (tile.x * tileSizeInPoints) + tileSizeInPoints
y = tile.y * tileSizeInPoints

这些点必须转换为 LatLngs。当你使用 map 时，你可以使用方法 fromLatLngToPoint map 投影。

对于自定义实现，请查看 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/