Интересно. Логика работы карт.

[haZe]

Добрый день!

Стало интересно и решил задать этот вопрос экспертам. Какова логика работы различных карт (Яндекс, Гугл). Как осуществляется масштабирование, скроллинг карт, прорисовка различных объектов. Особенно волнует зум.

Очень интересно. Поделитесь пожалуйста, если кто знает.

[stars]

Добрый день!

Стало интересно и решил задать этот вопрос экспертам. Какова логика работы различных карт (Яндекс, Гугл). Как осуществляется масштабирование, скроллинг карт, прорисовка различных объектов. Особенно волнует зум.

Очень интересно. Поделитесь пожалуйста, если кто знает.

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

если есть какой-то более конкретный вопрос то его можно рассмотреть детально...

Edited October 1, 2010 by stars

[s0rr0w]

Добрый день!

Стало интересно и решил задать этот вопрос экспертам. Какова логика работы различных карт (Яндекс, Гугл). Как осуществляется масштабирование, скроллинг карт, прорисовка различных объектов. Особенно волнует зум.

Очень интересно. Поделитесь пожалуйста, если кто знает.

Мы делали в свое время так. Берется карта в самом гигантском масштабе. Разрезается на квадраты, например, по 200x200px.

Получившиеся картинки складываем в папку zoom0. При этом каждой картинке присваиваем индекс h15v45 (15й квадрат по горизонтали, 45й по вертикали). Не забываем сохранить ширину и высоту нашей гигантской картинки.

Потом карта уменьшается, например, на 10%, записываем ширину и высоту исходной картинки, и снова разрезаем на квадраты по 200x200px. Ставятся свои индексы картинкам и ложится все в папку zoom1.

И так далее.

При начальной загрузке выбираем самый большой уровень зума, например zoom10, и центрируем содержимое карты в неком окошке.

Берем высоту и ширину результирующей картинки, делим их пополам. Например, при максимальном зуме картинка у нас была 1000 на 1000 пикселей. Половинка - 500 пикселей.

Потом берем ширину и высоту viewport'a (окошка для просмотра карты), к примеру, было у нас 500 на 500 пикселей, и делим эти числа пополам (250)

Wz10 / 2 = 1000 / 2 = 500;

Hz10 / 2 = 1000 / 2 = 500;

Wv / 2 = 500 / 2 = 250;

Hv / 2 = 500 / 2 = 250;

Вычитаем из половинки ширины картинки половинку ширины вьюпорта, и получаем координату X, на которую нужно сместить картинку влево, чтобы она стала по центру области просмотра

X = - ( ( Wz10 / 2 ) - (Wv / 2 ) ) = - ( 500 - 250 ) = -250 px;

Аналогично делаем с вертикальной координатой.

После таких нехитрых манипуляций в окошке 500х500 карта шириной и высотой 1000px будет отцентрирована.

Допустим, пользователь сдвинул карту влево на 100 px, а вниз на 200px.

Координаты большой карты будут

X = -250 -100 = -350

Y = -250 + 200 = -50;

Если мы сделаем зум(для начала возьмем просто зум по центру карты), то нам нужно для начала узнать, в какой точке карты находится середина вьюпорта.

Прибавляем к |X| и |Y| половину ширины и высоты вьюпорта.

Xc = |-350| + 250 = 600;

Yc = |-50| + 250 = 300;

Получаем процент смещения относительно центра каждой координаты

Xk = 600/1000 = 0.6

Yk = 300/1000 = 0.3

После этого берем высоту и ширину карты в zoom9, и умножаем на наши коэффициенты. Пусть это были 1100 и 1100.

Xc = Wz9 * Xk = 1100 * 0.6 = 660px

Yc = Hz9 * Yk = 1100 * 0.3 = 330px

Теперь производим магические вычисления с отниманием половины ширины и высоты вьюпорта и получаем новые координаты большой картинки

X = 250 - Xc = 250 - 660 = -410px

Y = 250 - Yc = 250 - 330 = -80px

Смещаем координаты сюда и получаем нужный результат.

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

Хех, опыт не пропьешь...

[haZe]

В принципе все это я примерно так и представлял, но конечно столь чудесный расширенный ответ не равен моему представлению. Сразу видно, что Вы фанат своего дела! Одно мне не понятно.

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

[s0rr0w]

В принципе все это я примерно так и представлял, но конечно столь чудесный расширенный ответ не равен моему представлению. Сразу видно, что Вы фанат своего дела! Одно мне не понятно.

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

Я не фанат своего дела, я уже решал эту задачу на флеше.

На самом деле не нужно генерировать огромное количество квадратов. Нужно просто заменять фон для уже существующих нод, а двигать виртуальную карту с квадратами относительно реальной сетки.

[haZe]

Вот! Это я и сказал, только огромным количеством дурацких слов.

А как сделано при зуме "отодвигание" и "придвигание" изображения?

[s0rr0w]

Вот! Это я и сказал, только огромным количеством дурацких слов.

А как сделано при зуме "отодвигание" и "придвигание" изображения?

Банальное растягивание/сжатие картинок.

[haZe]

Вот это меня немного сконфузило. Можно поподробней?

Потому что например на ядекс картах, крутишь скролл, и карта сжимается относительно курсора и как в сетке сжимать картинки, да еще чтоб не было швов, я не понял.

[s0rr0w]

Вот это меня немного сконфузило. Можно поподробней?

Потому что например на ядекс картах, крутишь скролл, и карта сжимается относительно курсора и как в сетке сжимать картинки, да еще чтоб не было швов, я не понял.

<div style="width: 200px; height: 200px;"><img src="z10_h10_v13" width="200" height="200" alt=""></div>

Увеличивайте у div и img высоту и ширину на 1% до 10%, вот вам и эффект зумирования. Как только достигнет увеличение 10% - запускаете процесс перерендеривания картинок на следующий уровень увеличения.