JavaScript: лучший способ поддерживать границы (Google Maps)? - PullRequest
Новая
       22

JavaScript: лучший способ поддерживать границы (Google Maps)?

5 голосов
/ 13 мая 2011

Я использую Google Maps v3 API . В настоящее время я делаю запрос на выборку новых данных каждый раз, когда человек меняет область просмотра (путем увеличения или смещения карты) и выбрасываю старые данные, которые у меня есть. Это прекрасно работает, но теперь я хочу кэшировать данные, чтобы мне не нужно было извлекать данные каждый раз, когда изменяется область просмотра. API Карт Google определяет область просмотра по ее северо-восточной и юго-западной координате, состоящей из широты и долготы. Они хранятся в объектах с именем LatLngBounds .

Я предложил 2 способа сделать это:

  1. Сохраните границы каждого нового окна просмотра, которое посещает пользователь, и проверьте, находится ли новое окно просмотра в старом окне просмотра, и извлеките новые данные только той части нового окна просмотра, которая не находится в старом окне просмотра. По сути,
  2. Разделите каждый новый видовой экран на прямоугольные участки данных, которые у нас есть, и данных, которые необходимо получить. Сохраните границы каждого из прямоугольных сечений.

Если кто-то может придумать лучший способ сделать это, смело предлагайте новые подходы.

Мой вопрос: какой из них будет лучше с точки зрения лучшей производительности / использования памяти и общей скорости? Оба алгоритма похожи, так ли это важно?

Кроме того, сейчас оба алгоритма полагаются на разделение нового видового экрана на основе старых видовых экранов. Как будет выглядеть алгоритм разделения новых видов? (Предположим, я реализовал мой второй алгоритм) 

var prevBounds = [ /* Array of previously seen bounds */ ];
var newViewport = map.getBounds(); // New Viewport to divide up
var sw = newViewport.getSouthWest();
var swlat = sw.lat();
var swlng = sw.lng();
var ne = newViewport.getNorthEast();
var nelat = ne.lat();
var nelng = ne.lng();
// newViewport.intersects(bounds) 
// Returns true if this bounds shares any points with this bounds.

1 Ответ

1 голос
/ 14 мая 2011

Я мог бы подумать о том, чтобы сделать это более или менее точно так, как Google подает листы карты - вместо того, чтобы загружать данные для всего окна просмотра сразу, разделите всю карту на квадратные области (хотя, вероятно, большие области, чем плитки Google 256x256),определить, какие области находятся в текущем окне просмотра, и загрузить данные для этих областей.Когда пользователь перемещает и масштабирует карту, проверьте границы области просмотра, чтобы увидеть, появились ли новые области в кадре, и загрузите их по мере необходимости.Примерный псевдокод: 

var cache = {}

function onViewportChange() {
    // get new bounds
    var bounds = map.getBounds();
    // identify all the areas in the bounds
    var areas = getAreas(bounds);
    areas.forEach(function(area) {
        if (area.key in cache) {
            // do nothing, or load items from cache
        } else {
            // load new data, storing the key (and maybe the data) 
            // to the cache
        }
    })
}

function getAreas(bounds) {
    /* given a set of bounds, return an array of objects like:
    [
        {
           x: 1,
           y: 2,
           zoom: 4,
           key: "4-1,2",
           bounds: b // lat/lon bounds of this area
        },
        ...
    ]
    */
}

(см. Google объяснение координат карты и в этом примере для идеи о том, как реализовать getAreas.)

Привлекательность этого в том, что области, которые вы извлекаете, намного проще, и становится очень легко проверить, загружены ли вы уже данные для данной области - каждая область может иметь простой уникальный ключ, вероятно, строкусделан из координат x / y / zoom, и при загрузке каждой новой области вы сохраняете ключ (или, возможно, ключ и данные - это зависит от того, удаляете ли вы старые данные с карты или просто оставляете их там)к некоторому объекту кэша.Затем все, что вам нужно сделать, когда область просмотра перемещается в новую область, это проверить наличие этого ключа в вашем кэше.

Недостатком является то, что вы часто можете загружать данные вне текущего окна просмотра, и вывозможно, отправив на сервер больше запросов, чем вы предложили бы в реализации.Этот метод может работать лучше всего, если вы обслуживаете разные данные при разных уровнях масштабирования - в противном случае вы можете застрять, пытаясь выбрать область кэша одного размера, которая хорошо работает при разных масштабах.

...