查找当前在Google Maps v3地图的视口中可见的图块 [英] Find which tiles are currently visible in the viewport of a Google Maps v3 map

问题描述

我正在尝试在我们的某些Google Maps v3网络地图中构建对平铺矢量数据的支持，而且我很难确定如何找出在当前地图视口中可见的256 x 256瓦片.我知道，如果您像下面这样创建google.maps.ImageMapType，就可以找到解决此问题的信息:

I am trying to build support for tiled vector data into some of our Google Maps v3 web maps, and I'm having a hard time figuring out how to find out which 256 x 256 tiles are visible in the current map viewport. I know that the information needed to figure this out is available if you create a google.maps.ImageMapType like here: Replacing GTileLayer in Google Maps v3, with ImageMapType, Tile bounding box?, but I'm obviously not doing this to bring in traditional pre-rendered map tiles.

因此，有两个部分的问题:

So, a two part question:

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

推荐答案

在文档(

Here's what I came up with, with help from the documentation (http://code.google.com/apis/maps/documentation/javascript/maptypes.html, especially the "Map Coordinates" section) and a number of different sources:

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从服务器请求数据.

An explanation: Basically, everytime the map is panned or zoomed, I call the loadData function. This function calculates which tiles are in the map view, then iterates through the tiles that are already loaded and deletes the ones that are no longer in the view (I took this portion of code out, so you won't see it above). I then use the LatLngBounds stored in the boundingBoxes array to request data from the server.

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

Hope this helps someone else...

这篇关于查找当前在Google Maps v3地图的视口中可见的图块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！