37
Я.Субботник, Москва, 28 июля 2012 года Разработчик интерфейсов Марина Степанова Кластеризатор в JS API Яндекс.Карт

Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

  • Upload
    yandex

  • View
    1.822

  • Download
    0

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

Я.Субботник, Москва, 28 июля 2012 года

Разработчик интерфейсов Марина Степанова

Кластеризатор в JS API Яндекс.Карт

Page 2: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

API Яндекс.Карт 2.0 Новый модуль ─ кластеризатор

2

Новый дизайн

Оптимизация загрузки

Новые инструменты

Поддержка мобильных

Отказ от ключей

Page 3: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

─ Зачем и почему делали кластеризатор

─ Как его делали

─ Как пользоваться кластеризатором

─ О пользе обратной связи

О чем речь

3

Page 4: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

Зачем в API кластеризатор

4

Page 5: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

5

> 9000

Часто встает задача – отобразить на карте много объектов

Page 6: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

Проблема раз

6 Картинка, чтобы обозначить на карте Москву

Page 7: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

7

Проблема два

Page 8: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

8  

Решение – кластеризация

1. Объекты сгруппированы 2. Меньше объектов надо нарисовать на карте

Page 9: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

Почему мы долго не решались делать кластеризатор

9

Сервер  

Формирование  списка  объектов  

???  

Прореживание  объектов  

Клиент  

Отображение  объектов  

Page 10: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

10

Формирование списка объектов

Прореживание

Отображение

Отображение

Формирование списка объектов

Прореживание Отображение

Прореживание Отображение

… …

Серверная часть Клиентская часть Траффик

Page 11: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

Почему все-таки решились ─  

11

очень много просьб от пользователей

Page 12: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

Как мы делали

кластеризатор

12

Page 13: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

13

Чего хотелось

─ Постоянная картинка

─ Быстро

─ Эстетично

Page 14: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

14

Мы выбирали алгоритм

Page 15: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

15

Грид-кластеризация

Page 16: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

16

Куда уходит время Время распределения точек между кластерами и создание кластеров –

10% времени

Время отрисовки меток –

90% времени

Page 17: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

17

Упор на скорость

─ Самый быстрый алгоритм кластеризации

─ Обработка объектов только в видимой области карты

─ Специальные «легкие» метки с ограниченным функционалом

─ Асинхронное добавление объектов на карту

Page 18: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

18

Использование и настройка

Page 19: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

19

for var (i = 0; i < 9000; i++) { map.geoObjects.add(objects[i]); }

var clusterer = new ym.Clusterer(); clusterer.add(objects); map.geoObjects.add(clusterer);

Без кластеризатора ─ 3 строчки

С кластеризатором ─ 3 строчки

Page 20: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

20

Балун кластера

Page 21: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

21

Наводим красоту – для близко стоящих кластеров вводим отступ

margin = 20 margin = 5

Page 22: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

22

Легко создавать свои макеты

Page 23: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

23

Задание стиля меток кластера var clusterIcons = [{ href: 'heart.png', size: [40, 40], offset: [-20, -20] }, { href: ‘heart.png', size: [60, 60], offset: [-30, -30] }], clusterNumbers = [100], clusterer = new ym.Clusterer({ margin: [20], clusterIcons: clusterIcons, clusterNumbers: clusterNumbers }); clusterer.add(myPlacemarks); map.geoObjects.add(clusterer);

Page 24: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

24

var clusterer = new ymaps.Clusterer(); clusterer.createCluster = function(center, geoObjects) { var x = 0, y = 0, k = 0; for (var i = 0, l = geoObjects.length; i < l; i++) { var coordinates = geoObjects[i].geometry.getCoordinates(), properties = geoObjects[i].properties, weight = properties.get(‘weight’); x += coordinates[0] * weight; y += coordinates[1] * weight; k += weight; } var newCenter = [x / k, y / k], createCluster = clusterer.prototype.createCluster; return createCluster.call(this, newCenter, geoObjects); }

Переопределение центра кластеров – метки имеют разный вес

Page 25: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

25

Промежуточные итоги

Плюсы

•  «Из коробки» •  Много вариантов настройки

•  Подключается в несколько строк

•  Решает проблему множества объектов на карте

Минусы •  Ограничения на количество объектов на карте

•  Кластеры могут накладываться

•  Тяжело живет при динамическом изменении состава

Page 26: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

26

Жизнь среди людей

9

Page 27: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

27

Page 28: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

28

Page 29: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

29

Page 30: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

30

Опции, добавленные по просьбам пользователей

minClusterSize   минимальное  количество  объектов,  объединяющихся  в  кластер    

maxZoom     максимальный  коэффициент  масштабирования  карты,  на  котором  объекты  кластеризуются  

synchAdd     возможность  включать/выключать  асинхронное    

Page 31: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

31

Попросили больше возможностей для модификации балуна*

Ширина списка меток

Высота балуна

Ширина балуна целиком

Можно задать макет правой части

Можно задать макет списка меток

Можно задать макет элемента списка

*А можно вообще балун отключить ;)

Page 32: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

32

Из пожеланий образовался метод getObjectState isShown   признак,  указывающий,  находится  

ли  объект  в  видимой  области  карты  

cluster   ссылка  на  кластер,  в  который  добавлен  объект  

isClustered   признак,  указывающий,  попал  ли  объект  в  состав  кластера  

Page 33: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

33

Открываем балун произвольной метки с помощью метода getObjectState

Метка в видимой области карты?

Метка попала в кластер?

Показываем балун кластера

Метка не попала в кластер –

показываем просто балун метки

Ничего не делаем, либо изменяем центр карты, чтобы метка стала видна

Да

Да Нет

Нет

Page 34: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

34

Ждут своего часа

─ Стандартные метки разных цветов

─ Другие варианты балунов кластера

─ Возможность работы с коллекциями объектов и деревом коллекций

─ Всевозможные оптимизационные задачи

─ И многие, многие другие….

Page 35: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

Обратная связь – это хорошо

35

Page 36: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

36

На сайте: api.yandex.ru/maps В блоге: ymapsapi.ya.ru В клубе: clubs.ya.ru/mapsapi

Будут вопросы – пишите!

Page 37: Марина Степанова "Кластеризатор в JS API Яндекс.Карт"

Разработчик интерфейсов JS API Карт

[email protected]

@ya_mstepanova

 

Марина Степанова