google-maps-api-3 - 查找当前在 Google map v3 map 的视口(viewport)中可见的图 block

Question

我正在尝试在一些 Google Maps v3 网络 map 中构建对平铺矢量数据的支持，但我很难弄清楚如何找出当前 map 视口(viewport)中可见的 256 x 256 平铺图 block 。我知道如果您创建如下所示的 google.maps.ImageMapType ，则可以找到解决此问题所需的信息: Replacing GTileLayer in Google Maps v3, with ImageMapType, Tile bounding box? ，但我这样做显然不是为了引入传统的预渲染 map 图 block 。

所以，一个由两部分组成的问题:

1. 找出哪些图 block 在当前视口(viewport)中可见的最佳方法是什么？
2. 获得此信息后，将其转换为可用于请求必要数据的纬度/经度边界框的最佳方法是什么？我知道我可以将这些信息存储在服务器上，但如果有一种简单的方法可以在客户端上进行转换，那就太好了。

Answer 1

这是我在文档( http://code.google.com/apis/maps/documentation/javascript/maptypes.html ，特别是“ map 坐标”部分)和许多不同来源的帮助下得出的结论:

function loadData() {
    var bounds = map.getBounds(),
        boundingBoxes = [],
        boundsNeLatLng = bounds.getNorthEast(),
        boundsSwLatLng = bounds.getSouthWest(),
        boundsNwLatLng = new google.maps.LatLng(boundsNeLatLng.lat(), boundsSwLatLng.lng()),
        boundsSeLatLng = new google.maps.LatLng(boundsSwLatLng.lat(), boundsNeLatLng.lng()),
        zoom = map.getZoom(),
        tiles = [],
        tileCoordinateNw = pointToTile(boundsNwLatLng, zoom),
        tileCoordinateSe = pointToTile(boundsSeLatLng, zoom),
        tileColumns = tileCoordinateSe.x - tileCoordinateNw.x + 1;
        tileRows = tileCoordinateSe.y - tileCoordinateNw.y + 1;
        zfactor = Math.pow(2, zoom),
        minX = tileCoordinateNw.x,
        minY = tileCoordinateNw.y;

    while (tileRows--) {
        while (tileColumns--) {
            tiles.push({
                x: minX + tileColumns,
                y: minY
            });
        }

        minY++;
        tileColumns = tileCoordinateSe.x - tileCoordinateNw.x + 1;
    }

    $.each(tiles, function(i, v) {
        boundingBoxes.push({
            ne: projection.fromPointToLatLng(new google.maps.Point(v.x * 256 / zfactor, v.y * 256 / zfactor)),
            sw: projection.fromPointToLatLng(new google.maps.Point((v.x + 1) * 256 / zfactor, (v.y + 1) * 256 / zfactor))
        });
    });
    $.each(boundingBoxes, function(i, v) {
        var poly = new google.maps.Polygon({
            map: map,
            paths: [
                v.ne,
                new google.maps.LatLng(v.sw.lat(), v.ne.lng()),
                v.sw,
                new google.maps.LatLng(v.ne.lat(), v.sw.lng())
            ]
        });

        polygons.push(poly);
    });
}
function pointToTile(latLng, z) {
    var projection = new MercatorProjection();
    var worldCoordinate = projection.fromLatLngToPoint(latLng);
    var pixelCoordinate = new google.maps.Point(worldCoordinate.x * Math.pow(2, z), worldCoordinate.y * Math.pow(2, z));
    var tileCoordinate = new google.maps.Point(Math.floor(pixelCoordinate.x / MERCATOR_RANGE), Math.floor(pixelCoordinate.y / MERCATOR_RANGE));
    return tileCoordinate;
};

解释:基本上，每次平移或缩放 map 时，我都会调用 loadData 函数。该函数计算哪些图 block 位于 map View 中，然后迭代已加载的图 block 并删除不再位于 View 中的图 block (我取出了这部分代码，因此您不会在上面看到它)。然后，我使用存储在boundingBoxes数组中的LatLngBounds从服务器请求数据。

希望这对其他人有帮助......