Найдите, какие плитки в данный момент видны в окне просмотра карты Google Maps v3

Question

Я пытаюсь встроить поддержку мозаичных векторных данных в некоторые из наших веб-карт Google Maps v3, и мне трудно понять, как определить, какие плитки размером 256 x 256 видны в текущей области просмотра карты. Я знаю, что информация, необходимая для выяснения этого, доступна, если вы создадите google.maps.ImageMapType, например, здесь: Замена GTileLayer в Google Maps v3 на ImageMapType, ограничивающий прямоугольник плитки? , но я, очевидно, не делать этого, чтобы добавить традиционные предварительно отрендеренные тайлы карты.

Итак, вопрос из двух частей:

1. Каков наилучший способ узнать, какие плитки видны в текущем окне просмотра?
2. Как только я получу эту информацию, как лучше всего преобразовать ее в ограничивающие прямоугольники, которые можно использовать для запроса необходимых данных? Я знаю, что могу хранить эту информацию на сервере, но если есть простой способ преобразования на клиенте, было бы неплохо.

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.Эта функция вычисляет, какие листы находятся в виде карты, затем перебирает листы, которые уже загружены, и удаляет те, которых больше нет в представлении (я вынул эту часть кода, поэтому вы не увидите ее выше).Затем я использую LatLngBounds, хранящиеся в массиве boundingBoxes, для запроса данных с сервера.

Надеюсь, это поможет кому-то еще ...

Answer 2

Для более поздних пользователей можно получить изображения плитки из примера кода в документации на этой странице документации API Javascript Карт Google.

Отображение координат пикселей и плиток