Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ObjectManager или как 
работать с действительно 
большим количеством 
объектов на карте 
Марина Степанова, 
Яндекс
О чем поговорим 
• Почему сложно показать много точек на 
карте, обзор решений 
• Как отрисовать большое количество меток ...
Почему сложно хорошо показать 
много меток на карте?
Решаем задачу «в лоб» 
Сервер 
page.html
page.html 
<!DOCTYPE html> 
<html> 
<head> 
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" 
type="text/javascript"></s...
А теперь добавим метки!
X 50 000 
page.html
Очевидные недостатки 
• page.html весит несколько Мб и страница 
долго загружается 
• Мы передаем на клиент слишком много ...
Что предлагалось 
пользователям многие годы?* 
*Не только в API Яндекс.Карт
Решение №1 – активные области
Решение №1 – активные области
Решение №1 – активные области 
Плюсы Минусы 
Очень быстрый 
рендеринг на клиенте 
Оооочень сложная 
серверная часть 
Перед...
Решение №2 - кластеризатор
Решение №2 – кластеризатор 
Плюсы Минусы 
Просто использовать Клиент тратит время на 
кластеризацию 
Дизайн определяется и...
Решение №2 – кластеризатор 
X 50 000 
new ymaps.Placemark([45.3, 25.45]) 
new ymaps.Placemark([45.3, 25.45]) 
new ymaps.Pl...
Решение №2 – кластеризатор 
X 50 000 
new ymaps.Placemark([45.3, 25.45]) 
new ymaps.Placemark([45.3, 25.45]) 
new ymaps.Pl...
Что нужно в идеале? 
• Никаких лишних инициализаций на 
клиенте 
• Запрашиваем данные пачками асинхронно 
• Передаем на кл...
Что мы сделали для клиентской 
оптимизации
Храним только данные 
• Все данные хранятся как их JSON- 
описания в специальном менеджере 
• Программные сущности создают...
X 50 000 
new ymaps.Placemark([45.3, 25.45]) 
new ymaps.Placemark([45.3, 25.45]) 
new ymaps.Placemark([45.3, 25.45]) 
new ...
Как ускорить геообъекты?
Balloon 
Hint 
Editor 
Options 
Events 
Overlay 
…
Balloon 
Hint 
Editor 
Options 
Events 
Overlay 
…
Balloon 
Hint 
Editor 
Options 
Events 
Overlay 
…
Balloon 
Hint 
Editor 
Options 
Events 
Overlay 
… 
Компонент, отвечающий 
непосредственно за 
отрисовку на карте
ObjectCollection 
Balloon 
Hint 
Editor 
Options 
Events 
… 
Overlay Overlay Overlay
Получился ObjectManager 
• Хранит данные и не создает программные 
сущности без надобности 
• Мы вынесли всю инфраструктур...
Время добавления на карту меток с 
кластеризацией 
6000 
5000 
4000 
3000 
2000 
1000 
0 
1000 10000 50000 
ObjectManager ...
Поговорим про загрузку данных 
с сервера на клиент
Классическое решение
Классическое решение
Минусы подхода 
• На малейший сдвиг нужно генерировать 
новый запрос 
• Многократная загрузка одних и тех же 
данных 
• За...
Грузим данные потайлово
Видимая область карты 
Тайлы в видимой области
Загружаем данные потайлово 
• Данные загружаются всегда по одним и тем же 
областям – легче организовать кеширование 
• За...
RemoteObjectManager, 
LoadingObjectManager 
• Следят за видимой областью карты 
• Следят, какие данные загружены, а какие ...
LoadingObjectManager 
Загружает метки и кластеризует на 
клиенте 
RemoteObjectManager 
Отвечает за загрузку и отображение ...
Режимы запросов за данными
Как организовать серверную 
часть?
Генерация статических файлов
Генерация статических файлов 
• Не требует сервера, отвечающего на запросы клиента 
• Файлы могут занять очень много диско...
Пространственные базы данных 
• MySQL – SPATIAL 
• PostgreSQL – PostGIS 
• Oracle 
• MongoDB 
• …
Поговорим про серверную 
кластеризацию точек
Кластеризация на клиенте 
Сервер Клиент 
Формирование 
списка точек 
Передача на 
клиент 
Кластеризация 
Отображение 
резу...
Кластеризация на клиенте 
Сервер Клиент 
Формирование 
списка точек 
Передача на 
клиент 
Кластеризация 
Отображение 
резу...
Кластеризация на сервере 
Сервер Клиент 
Формирование 
списка точек 
Кластеризация 
Передача на 
клиент 
Отображение 
резу...
Серверная кластеризация. v1 
БД Кластеризация 
Отправка на 
клиент
Серверная кластеризация. v1 
SELECT Id, long, lat, 
FROM bigTable 
WHERE latLon in bounds 
1. Получаем данные для тайла из...
Серверная кластеризация. v1 
Плюсы Минусы 
Можно выбрать любой 
алгоритм кластеризации 
Чем красивее алгоритм, 
тем дольше...
Grid-кластеризация
Серверная кластеризация. v2 
БД 
Отправка на 
клиент 
Данные, сгруппированные 
по grid-кластерам
Серверная кластеризация. v2 
SELECT MIN(id) AS minId, COUNT(id) AS count, AVG(long) 
AS long, AVG(lat) AS lat, 
FLOOR( lon...
Серверная кластеризация. v2 
Плюсы Минусы 
Не надо писать 
дополнительной логики 
по кластеризации 
Grid-кластеризация не ...
Quadkey для 
grid-кластеризации
«Quadkey» 
clck.ru/4Xg6s
«Quadkey» 
tileX = 3 = 0112 
tileY = 5 = 1012 
quadkey = 1001112 = 2134 = “213” 
Используем битовые маски для выборки объе...
Серверная кластеризация. v3 
БД 
Отправка на 
клиент 
Данные, сгруппированные 
по grid-кластерам 
+ quadkey для каждой 
то...
Серверная кластеризация. v3 
SELECT MIN(id) AS minId, COUNT(id) AS count, AVG(long) AS long, AVG(lat) AS lat 
FROM wiki 
W...
Серверная кластеризация. v3 
Плюсы Минусы 
Очень быстро Grid-кластеризация не 
самая красивая 
Нужно заранее 
насчитать Qu...
Поговорим про кеширование и 
версионирование данных
С кешированием все просто 
• Поскольку запросы всегда потайловые, кешируем 
ответ сервера для тайла на определенном зуме 
...
Опасный момент – обновление 
данных
Опасный момент – обновление 
данных
Опасный момент – обновление 
данных 
Загружены данные 
старой версии 
Сюда могут 
подгрузиться данные 
уже новой версии
Закладываем версионирование в 
архитектуру 
• Передаем на клиент версию данных 
• Клиент всегда отправляет запросы с указа...
Полезные ссылки 
• Работа с большим количеством объектов – 
clck.ru/9Lp2e 
• Если есть вопросы, пишите в клуб – 
clubs.ya....
Спасибо за внимание! 
Марина Степанова, 
руководитель группы разработки API 
Яндекс.Карт 
mstepanova@yandex-team.ru
ObjectManager, или как работать с большим количеством объектов на карте, Марина Степанова (Яндекс)
ObjectManager, или как работать с большим количеством объектов на карте, Марина Степанова (Яндекс)
Upcoming SlideShare
Loading in …5
×

ObjectManager, или как работать с большим количеством объектов на карте, Марина Степанова (Яндекс)

2,037 views

Published on

Доклад Марины Степановой на HighLoad++ 2014.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

ObjectManager, или как работать с большим количеством объектов на карте, Марина Степанова (Яндекс)

  1. 1. ObjectManager или как работать с действительно большим количеством объектов на карте Марина Степанова, Яндекс
  2. 2. О чем поговорим • Почему сложно показать много точек на карте, обзор решений • Как отрисовать большое количество меток на клиенте • Загрузка меток по требованию • Организация хранения и обработки данных на сервере
  3. 3. Почему сложно хорошо показать много меток на карте?
  4. 4. Решаем задачу «в лоб» Сервер page.html
  5. 5. page.html <!DOCTYPE html> <html> <head> <script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> <script type="text/javascript"> ymaps.ready(function () { var myMap = new ymaps.Map('map', { center: [55.76, 37.64], zoom: 10 }); }); </script> </head> <body><div id="map"></div></body> </html>
  6. 6. А теперь добавим метки!
  7. 7. X 50 000 page.html
  8. 8. Очевидные недостатки • page.html весит несколько Мб и страница долго загружается • Мы передаем на клиент слишком много данных • Мы рисуем на клиенте данные, которые пользователь может не видеть
  9. 9. Что предлагалось пользователям многие годы?* *Не только в API Яндекс.Карт
  10. 10. Решение №1 – активные области
  11. 11. Решение №1 – активные области
  12. 12. Решение №1 – активные области Плюсы Минусы Очень быстрый рендеринг на клиенте Оооочень сложная серверная часть Передаются только данные для видимой области Клиентская картинка абсолютно статична
  13. 13. Решение №2 - кластеризатор
  14. 14. Решение №2 – кластеризатор Плюсы Минусы Просто использовать Клиент тратит время на кластеризацию Дизайн определяется и настраивается на клиенте Не решена проблема оптимальной загрузки данных
  15. 15. Решение №2 – кластеризатор X 50 000 new ymaps.Placemark([45.3, 25.45]) new ymaps.Placemark([45.3, 25.45]) new ymaps.Placemark([45.3, 25.45]) new ymaps.Placemark([45.3, 25.45]) new ymaps.Placemark([45.3, 25.45]) new ymaps.Placemark([45.3, 25.45]) 50 000
  16. 16. Решение №2 – кластеризатор X 50 000 new ymaps.Placemark([45.3, 25.45]) new ymaps.Placemark([45.3, 25.45]) new ymaps.Placemark([45.3, 25.45]) new ymaps.Placemark([45.3, 25.45]) new ymaps.Placemark([45.3, 25.45]) new ymaps.Placemark([45.3, 25.45]) 50 000 Лишние программные инициализации
  17. 17. Что нужно в идеале? • Никаких лишних инициализаций на клиенте • Запрашиваем данные пачками асинхронно • Передаем на клиент только данные, которые видит пользователь • Рисуем на клиенте только данные, которые видит пользователь
  18. 18. Что мы сделали для клиентской оптимизации
  19. 19. Храним только данные • Все данные хранятся как их JSON- описания в специальном менеджере • Программные сущности создаются только при необходимости нарисовать объект
  20. 20. X 50 000 new ymaps.Placemark([45.3, 25.45]) new ymaps.Placemark([45.3, 25.45]) new ymaps.Placemark([45.3, 25.45]) new ymaps.Placemark([45.3, 25.45]) new ymaps.Placemark([45.3, 25.45]) new ymaps.Placemark([45.3, 25.45]) 50 000 Храним только данные
  21. 21. Как ускорить геообъекты?
  22. 22. Balloon Hint Editor Options Events Overlay …
  23. 23. Balloon Hint Editor Options Events Overlay …
  24. 24. Balloon Hint Editor Options Events Overlay …
  25. 25. Balloon Hint Editor Options Events Overlay … Компонент, отвечающий непосредственно за отрисовку на карте
  26. 26. ObjectCollection Balloon Hint Editor Options Events … Overlay Overlay Overlay
  27. 27. Получился ObjectManager • Хранит данные и не создает программные сущности без надобности • Мы вынесли всю инфраструктуру в общую коллекцию, в метках оставили только самое нужное https://clck.ru/9LqPp
  28. 28. Время добавления на карту меток с кластеризацией 6000 5000 4000 3000 2000 1000 0 1000 10000 50000 ObjectManager Placemarks
  29. 29. Поговорим про загрузку данных с сервера на клиент
  30. 30. Классическое решение
  31. 31. Классическое решение
  32. 32. Минусы подхода • На малейший сдвиг нужно генерировать новый запрос • Многократная загрузка одних и тех же данных • Запросы всегда разные, непонятно, как кешировать
  33. 33. Грузим данные потайлово
  34. 34. Видимая область карты Тайлы в видимой области
  35. 35. Загружаем данные потайлово • Данные загружаются всегда по одним и тем же областям – легче организовать кеширование • Запоминаем, какие тайлы подгружены, а какие нет • Небольшой сдвиг карты не вызывает дозагрузку
  36. 36. RemoteObjectManager, LoadingObjectManager • Следят за видимой областью карты • Следят, какие данные загружены, а какие еще нет • Отправляют потайловые запросы за данными на сервер clck.ru/9Lp2J clck.ru/9Lp2S
  37. 37. LoadingObjectManager Загружает метки и кластеризует на клиенте RemoteObjectManager Отвечает за загрузку и отображение результатов серверной кластеризации
  38. 38. Режимы запросов за данными
  39. 39. Как организовать серверную часть?
  40. 40. Генерация статических файлов
  41. 41. Генерация статических файлов • Не требует сервера, отвечающего на запросы клиента • Файлы могут занять очень много дискового пространства • Нужен скрипт, генерирующий эти файлы с некоторой периодичностью • Очень примитивное решение, подойдет для небольших демо-проектов
  42. 42. Пространственные базы данных • MySQL – SPATIAL • PostgreSQL – PostGIS • Oracle • MongoDB • …
  43. 43. Поговорим про серверную кластеризацию точек
  44. 44. Кластеризация на клиенте Сервер Клиент Формирование списка точек Передача на клиент Кластеризация Отображение результата Кластеризация Отображение результата Кластеризация Отображение результата
  45. 45. Кластеризация на клиенте Сервер Клиент Формирование списка точек Передача на клиент Кластеризация Отображение результата Кластеризация Отображение результата Кластеризация Отображение результата
  46. 46. Кластеризация на сервере Сервер Клиент Формирование списка точек Кластеризация Передача на клиент Отображение результата Отображение результата Отображение результата
  47. 47. Серверная кластеризация. v1 БД Кластеризация Отправка на клиент
  48. 48. Серверная кластеризация. v1 SELECT Id, long, lat, FROM bigTable WHERE latLon in bounds 1. Получаем данные для тайла из базы 2. Кластеризуем любым алгоритмом 3. Отправляем ответ на клиент
  49. 49. Серверная кластеризация. v1 Плюсы Минусы Можно выбрать любой алгоритм кластеризации Чем красивее алгоритм, тем дольше он работает Нужно хорошо организовать кеширование ответа
  50. 50. Grid-кластеризация
  51. 51. Серверная кластеризация. v2 БД Отправка на клиент Данные, сгруппированные по grid-кластерам
  52. 52. Серверная кластеризация. v2 SELECT MIN(id) AS minId, COUNT(id) AS count, AVG(long) AS long, AVG(lat) AS lat, FLOOR( long/gridFactor) * gridFactor as gridX, FLOOR( lat/gridFactor) * gridFactor AS gridY FROM bigTable WHERE latLon in bounds GROUP BY gridX,gridY Вместе с выборкой объектов сразу объединяем объекты в grid-кластеры
  53. 53. Серверная кластеризация. v2 Плюсы Минусы Не надо писать дополнительной логики по кластеризации Grid-кластеризация не самая красивая Быстро работает Ваша база данных вечно считает, вы не используете индексы
  54. 54. Quadkey для grid-кластеризации
  55. 55. «Quadkey» clck.ru/4Xg6s
  56. 56. «Quadkey» tileX = 3 = 0112 tileY = 5 = 1012 quadkey = 1001112 = 2134 = “213” Используем битовые маски для выборки объектов в тайле zoom = 1, mask = 110000 zoom = 2, mask = 111100 …
  57. 57. Серверная кластеризация. v3 БД Отправка на клиент Данные, сгруппированные по grid-кластерам + quadkey для каждой точки
  58. 58. Серверная кластеризация. v3 SELECT MIN(id) AS minId, COUNT(id) AS count, AVG(long) AS long, AVG(lat) AS lat FROM wiki WHERE QuadCode between $Q1 and $Q2. GROUP BY (QuadCode & $free) Где: free - маска «вариативности» хвоста. free = 0xFFFFFFFF ^ (($Q2^$Q1)>>(2*gridFactor)); Q1,Q2 - диапазоны поиска QuadKey Пример: QuadCode: 320132321(base4), 9 знаков из 16(uint32) Q1 : 320132321|0000000 Q2 : 320132321|3333333 free:333333333|3330000 (+3 зума, кластер 32х32)
  59. 59. Серверная кластеризация. v3 Плюсы Минусы Очень быстро Grid-кластеризация не самая красивая Нужно заранее насчитать Quad-коды
  60. 60. Поговорим про кеширование и версионирование данных
  61. 61. С кешированием все просто • Поскольку запросы всегда потайловые, кешируем ответ сервера для тайла на определенном зуме • Пишите данные в файлы, используйте Memcached, Redis и тд • Если запрос поступает для большой тайловой области, разбиваем его на отдельные тайлы и собираем ответ из кеша потайлово
  62. 62. Опасный момент – обновление данных
  63. 63. Опасный момент – обновление данных
  64. 64. Опасный момент – обновление данных Загружены данные старой версии Сюда могут подгрузиться данные уже новой версии
  65. 65. Закладываем версионирование в архитектуру • Передаем на клиент версию данных • Клиент всегда отправляет запросы с указанием версии данных • Храним несколько последних версий на сервере • Системы кеширования тоже завязываем на версию • Если нужно, продумываем автообновление версии на клиенте
  66. 66. Полезные ссылки • Работа с большим количеством объектов – clck.ru/9Lp2e • Если есть вопросы, пишите в клуб – clubs.ya.ru/mapsapi/
  67. 67. Спасибо за внимание! Марина Степанова, руководитель группы разработки API Яндекс.Карт mstepanova@yandex-team.ru

×