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

【问题标题】：Calculate bounding box of static google maps image计算静态谷歌地图图像的边界框
【发布时间】：2017-11-30 18:38:07
【问题描述】：

假设我从谷歌静态地图 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 坐标中图像的边界框。更具体地说，如何计算左下角和右上角的 lat/lng。

我做了一些研究并查看了墨卡托投影，但文章一直提到在这种情况下不相关的图块大小。

谁能帮忙？

【问题讨论】：

标签： google-maps google-maps-api-3 google-static-maps map-projections

【解决方案1】：

我可以解释如何使用 Maps JavaScript API 计算边界框的东北和西南点。

您有一个中心位置，并且知道从中心到东北和西南的距离在两个轴上都是 300 像素。

看看下面计算NE和SW点的代码

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());

  });
}

#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=geometry&callback=initMap"
    async defer></script>

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

希望这会有所帮助！

【讨论】：

【解决方案2】：

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/

【讨论】：