Марина Степанова,разработчик интерфейсов API Яндекс.Карт

APIшник Яндекс.Карт, Москва, 26 апреля 2012

Много объектов на карте

Техническое задание:

1

показать на карте очень много объектов

Решение:

2

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

Что получим:

3

1. Показать на карте очень много объектов

—

2. И чтобы еще все работало

Техническое задание 2:

4

5

Хотспоты

6

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

1. Пользователь двигает мышкой

2. Смотрим на позицию курсора

3. Подгружаем данные (если нужно)

4. Проверяем, куда попадает курсор

5. Если в объект, кидаем на нем событие

6. Ловим событие на слое и показываем хинт

Как это работает?

7

— Узкое место — загрузка данных

— Активный объект ищется быстро

— Грузится только 1 нужный тайл

— Пока новые данные не пришли, старые

— не удаляются

— Нужна серверная часть

—

Особенности

8

9

Все работает, но...

10

!"#$%&'", ($)*+ )*),&"(%$- &" '"#$. /)0'12

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

11

12

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

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

— Быстро

— Эстетично

—

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

13

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

14

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

15

— Постояно

— Не всегда красиво

— Зато быстрее некуда

—

16

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

17

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

18

Наводим красоту —

19

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

margin = 5 margin = 20

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

20

Задание стиля меток кластера

21

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);

22

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

Каждому свое

23

Хотспоты Кластеры

Нужно отобразить все данные + −

Нужно, чтобы клиентская часть была максимально быстрой

+ −

Нужно разгрузить карту визуально − +

Нужно сделать быстро и просто

− +

Вопросы?

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

mstepanova@yandex-team.ru