查找Google Maps v3地图视口中当前可见的切片

时间:2011-02-19 23:48:43

标签: google-maps-api-3

我正在尝试将平铺矢量数据支持到我们的一些Google Maps v3网络地图中,并且我很难弄清楚如何找出当前地图视口中可见的256 x 256个切片。我知道如果你像这里创建一个google.maps.ImageMapType,可以获得解决这个问题所需的信息:Replacing GTileLayer in Google Maps v3, with ImageMapType, Tile bounding box?,但我显然没有这样做来引入传统的预渲染地图图块。

所以,这是一个两部分的问题:

  1. 找出当前视口中哪些图块可见的最佳方法是什么?
  2. 一旦掌握了这些信息,将其转换为可用于请求必要数据的lat / lng边界框的最佳方法是什么?我知道我可以将这些信息存储在服务器上,但如果有一种简单的方法可以在客户端进行转换,那就太好了。

2 个答案:

答案 0 :(得分:6)

以下是我提出的建议,在文档(http://code.google.com/apis/maps/documentation/javascript/maptypes.html,特别是“地图坐标”部分)和许多不同来源的帮助下:

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;
};

解释:基本上,每次平移或缩放地图时,我都会调用loadData函数。此函数计算地图视图中的哪些图块,然后遍历已加载的图块并删除视图中不再存在的图块(我将这部分代码删除,因此您不会在上面看到它)。然后,我使用存储在boundingBoxes数组中的LatLngBounds来从服务器请求数据。

希望这有助于其他人...

答案 1 :(得分:0)

对于较新的用户,可以从Google Maps Javascript API文档此页上的文档中的示例代码中获取切片图像。

Showing Pixel and Tile Coordinates