Question

假设我从谷歌静态地图API

请求此图片

https://maps.googleapis.com/maps/api/staticmap?center=52.591370,-2.110748&zoom=18&size=600x600&maptype=satellite&markers=color:blue|52.591370,-2.110748

我得到一个600px x 600px图像，中心位于52.591370，-2.110748。给定中心，图像大小和缩放级别，如何计算lat lng坐标中图像的边界框。更具体地说，我如何计算左下角和右上角的纬度/经度。

我做了一些研究并研究了墨卡托投影，但文章一直提到瓷砖尺寸，这与本案例无关。

有人可以帮忙吗？

Answer 1

const _C = { x: 128, y: 128 };
const _J = 256 / 360;
const _L = 256 / (2 * Math.PI);

function tb(a) {
    return 180 * a / Math.PI
}

function sb(a) {
    return a * Math.PI / 180
}

function bounds(a, b, c) {
    null != b && (a = Math.max(a, b));
    null != c && (a = Math.min(a, c));
    return a
}

function latlonToPt(ll) {
  a = bounds(Math.sin(sb(ll[0])), -(1 - 1E-15), 1 - 1E-15);
  return {
    x: _C.x + ll[1] * _J,
    y: _C.y + 0.5 * Math.log((1 + a) / (1 - a)) * - _L
  }
}

function ptToLatlon(pt) {
    return [tb(2 * Math.atan(Math.exp((pt.y - _C.y) / -_L)) - Math.PI / 2),(pt.x - _C.x) / _J]
}


function calculateBbox(ll, zoom, sizeX, sizeY) {
    const cp = latlonToPt(ll);
    const pixelSize = Math.pow(2, -(zoom+1));
    const pwX = sizeX*pixelSize;
    const pwY = sizeY*pixelSize;

    return {
      ne: ptToLatlon({x: cp.x + pwX, y: cp.y - pwY}),
      sw: ptToLatlon({x: cp.x - pwX, y: cp.y + pwY})
    }
}

此解决方案不需要包含Google Map客户端侧地图。见例子： https://jsfiddle.net/1wy1mm7L/6/

Answer 2

我可以解释如何使用Maps JavaScript API计算边界框的NorthEast和SouthWest点。

你有一个中心位置，并知道从中心到NorthEast和SouthWest的距离都是300轴。

查看以下计算NE和SW点的代码

$weekago

myTable

var map;
function initMap() {
  var latLng = new google.maps.LatLng(52.591370, -2.110748);

  map = new google.maps.Map(document.getElementById('map'), {
      center: latLng,
      zoom: 18,
      mapTypeId: google.maps.MapTypeId.SATELLITE
  });

  var marker = new google.maps.Marker({
      position: latLng,
      map: map
  });

  google.maps.event.addListener(map, "idle", function() {
      //Verical and horizontal distance from center in pixels
      var h = 300;
      var w = 300;

      var centerPixel = map.getProjection().fromLatLngToPoint(latLng);
      var pixelSize = Math.pow(2, -map.getZoom());

      var nePoint = new google.maps.Point(centerPixel.x + w*pixelSize, centerPixel.y - h*pixelSize);
      var swPoint = new google.maps.Point(centerPixel.x - w*pixelSize, centerPixel.y + h*pixelSize);

      var ne = map.getProjection().fromPointToLatLng(nePoint);
      var sw = map.getProjection().fromPointToLatLng(swPoint);

      var neMarker = new google.maps.Marker({
        position: ne,
        map: map,
        title: "NE: " + ne.toString()
      });

      var swMarker = new google.maps.Marker({
        position: sw,
        map: map,
        title: "SW: " + sw.toString()
      });

      var polygon = new google.maps.Polygon({
          paths: [ne, new google.maps.LatLng(ne.lat(),sw.lng()), sw, new google.maps.LatLng(sw.lat(),ne.lng())],
          map: map, 
          strokeColor: "green"
      });

      console.log("NE: " + ne.toString());
      console.log("SW: " + sw.toString());

  });
}

你也可以在jsbin看到这个例子：http://jsbin.com/jahocos/edit?html,output

希望这有帮助！

计算静态谷歌地图图像的边界框

2 个答案: