Question

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

所以，这是一个两部分的问题：

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

Answer 1

以下是我提出的建议，在文档（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来从服务器请求数据。

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

Answer 2

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

Showing Pixel and Tile Coordinates

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

2 个答案: