Download to read offline
![for var (i = 0; i < 9000; i++) { var clusterer = new ym.Clusterer();
map.geoObjects.add(objects[i]); clusterer.add(objects);
} map.geoObjects.add(clusterer);
Без кластеризатора С кластеризатором
─ 3 строчки ─ 3 строчки
19](https://image.slidesharecdn.com/mskstepanova-120731082023-phpapp01/85/JS-API-19-320.jpg)
![Задание стиля меток кластера
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);
23](https://image.slidesharecdn.com/mskstepanova-120731082023-phpapp01/85/JS-API-23-320.jpg)
![Переопределение центра кластеров
– метки имеют разный вес
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);
}
24](https://image.slidesharecdn.com/mskstepanova-120731082023-phpapp01/85/JS-API-24-320.jpg)
Uploaded byYandex
Марина Степанова "Кластеризатор в JS API Яндекс.Карт"
Документ описывает кластеризатор в JavaScript API Яндекс.Карт, разработанный Мариной Степановой. Основное внимание уделяется необходимости кластеризации для отображения большого количества объектов на карте, а также особенностям реализации и использования кластеризатора. В документе также рассматриваются преимущества и недостатки, предоставляемые пользователем настройки и ожидаемые улучшения.
Марина Степанова "Кластеризатор в JS API Яндекс.Карт"
- 1. Кластеризатор в JSAPI Яндекс.Карт Марина Степанова Разработчик интерфейсов Я.Субботник, Москва, 28 июля 2012 года
- 2. API Яндекс.Карт 2.0 Новый модуль ─ кластеризатор Новый Оптимизация Новые Поддержка Отказ от дизайн загрузки инструменты мобильных ключей 2
- 3. О чем речь ─ Зачем и почему делали кластеризатор ─ Как его делали ─ Как пользоваться кластеризатором ─ О пользе обратной связи 3
- 4. Зачем в APIкластеризатор 4
- 5. Часто встает задача– отобразить на карте много объектов > 9000 5
- 6. Проблема раз Картинка, чтобы обозначить на карте Москву 6
- 7.
- 8. Решение – кластеризация 1. Объекты сгруппированы 2. Меньше объектов надо нарисовать на карте 8
- 9. Почему мы долгоне решались делать кластеризатор Сервер ??? Клиент Формирование Прореживание Отображение списка объектов объектов объектов 9
- 10. Отображение Формирование Прореживани Отображение списка объектов е … Траффи Клиентская часть Серверная часть к Прореживание Отображение Формирование Прореживание Отображение списка объектов … … 10
- 11. Почему все-таки решились─ очень много просьб от 11 пользователей
- 12. Как мы делали кластеризатор 12
- 13. Чего хотелось ─Постоянная картинка ─ Быстро ─ Эстетично 13
- 14.
- 15.
- 16. Куда уходит время Время распределения точек между кластерами и создание кластеров – 10% времени Время отрисовки меток – 90% времени 16
- 17. Упор на скорость ─Самый быстрый алгоритм кластеризации ─ Обработка объектов только в видимой области карты ─ Специальные «легкие» метки с ограниченным функционалом ─ Асинхронное добавление объектов на карту 17
- 18. Использование и настройка 18
- 19. for var (i= 0; i < 9000; i++) { var clusterer = new ym.Clusterer(); map.geoObjects.add(objects[i]); clusterer.add(objects); } map.geoObjects.add(clusterer); Без кластеризатора С кластеризатором ─ 3 строчки ─ 3 строчки 19
- 20.
- 21. Наводим красоту – для близко стоящих кластеров вводим отступ margin = 5 margin = 20 21
- 22. Легко создавать своимакеты 22
- 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); 23
- 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); } 24
- 25. Промежуточные итоги Плюсы Минусы • «Из коробки» • Ограничения на • Много вариантов количество объектов на настройки карте • Подключается в • Кластеры могут несколько строк накладываться • Решает проблему • Тяжело живет при множества объектов на динамическом карте изменении состава 25
- 26. Жизнь среди людей 9 26
- 27.
- 28.
- 29.
- 30. Опции, добавленные по просьбампользователей minClusterSize минимальное количество объектов, объединяющихся в кластер maxZoom максимальный коэффициент масштабирования карты, на котором объекты кластеризуются synchAdd возможность включать/выключать асинхронное 30
- 31. Попросили больше возможностей длямодификации балуна* Можно задать Можно задать макет Ширина макет элемента правой части списка меток списка Высота балуна Можно задать макет списка меток Ширина балуна целиком *А можно вообще балун отключить ;) 31
- 32. Из пожеланий образовался метод getObjectState isShown признак, указывающий, находится ли объект в видимой области карты cluster ссылка на кластер, в который добавлен объект isClustered признак, указывающий, попал ли объект в состав кластера 32
- 33. Открываем балун произвольнойметки с помощью метода getObjectState Метка в видимой области карты? Да Нет Метка попала в кластер? Ничего не делаем, либо изменяем центр карты, Да Нет чтобы метка стала видна Метка не попала в Показываем кластер – балун показываем просто кластера балун метки 33
- 34. Ждут своего часа ─Стандартные метки разных цветов ─ Другие варианты балунов кластера ─ Возможность работы с коллекциями объектов и деревом коллекций ─ Всевозможные оптимизационные задачи ─ И многие, многие другие…. 34
- 35. Обратная связь –это хорошо 35
- 36. Будут вопросы –пишите! На сайте: api.yandex.ru/maps В блоге: ymapsapi.ya.ru В клубе: clubs.ya.ru/mapsapi 36
- 37. Марина Степанова Разработчик интерфейсовJS API Карт mstepanova@yandex-team.ru @ya_mstepanova