APIшник Яндекс.Карт, Москва, 26.04.2012 Рассказ Марины Степановой (разработчика интерфейсов API Яндекс.Карт) о способах отображения большого количества объектов на карте, а также о новом кластеризаторе, который теперь есть в API 2.0.

1. Много объектов на карте
Марина Степанова,
разработчик интерфейсов API Яндекс.Карт
APIшник Яндекс.Карт, Москва, 26 апреля 2012

2. Техническое задание:
показать на карте очень много объектов
1

3. Решение:
for (var i = 0; i < 9000; i++) {
map.geoObjects.add(myObjects[i]);
}
2

4. Что получим:
3

5. Техническое задание 2:
1. Показать на карте очень много объектов
—
2. И чтобы еще все работало
4

6. Хотспоты
5

7. RenderedGeometry:
{
type: "Polygon",
coordinates: [ [
[-315, 280],
[32, 442],
[141, 208]
]]
}
6

8. Как это работает?
1. Пользователь двигает мышкой
2. Смотрим на позицию курсора
3. Подгружаем данные (если нужно)
4. Проверяем, куда попадает курсор
5. Если в объект, кидаем на нем событие
6. Ловим событие на слое и показываем хинт
7

9. Особенности
— Узкое место — загрузка данных
— Активный объект ищется быстро
— Грузится только 1 нужный тайл
— Пока новые данные не пришли, старые
— не удаляются
— Нужна серверная часть
—
8

10. 9

11. Все работает, но...
Картинка, чтобы обозначить на карте Москву
10

12. Сделайте мне красиво!
11

13. Кластеризатор
12

14. Чего хотелось
— Постоянная картинка
— Быстро
— Эстетично
—
13

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

16. Грид-кластеризация
— Постояно
— Не всегда красиво
— Зато быстрее некуда
— 15

17. 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 строчки
16

18. 17

19. Балун кластера
18

20. Наводим красоту —
для близко стоящих кластеров вводим отступ
margin = 5 margin = 20
19

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

22. Задание стиля меток кластера
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);
21

23. Переопределение центра кластеров —
метки имеют разный вес
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);
}
22

24. Каждому свое
Хотспоты Кластеры
Нужно отобразить все
+ −
данные
Нужно, чтобы клиентская
часть была максимально + −
быстрой
Нужно разгрузить карту
− +
визуально
Нужно сделать быстро и
− +
просто
23

25. Вопросы?
Марина Степанова
mstepanova@yandex-team.ru