Кластеризация меток на Яндекс.Картах – два решения

Известно, что с ростом числа маркеров на карте, растет и нагрузка на браузер пользователя (особенно на Internet Explorer), а это в свою очередь ведет увеличению времени загрузки карты и «затормаживанию» при различных манипуляциях, прочим неудобствам для рядовых пользователей.

Для решения этой проблемы в API Яндекс.Карт можно использовать различные способы: диспетчер объектов или активные области.

Также можно выводить маркеры по категориям.

В этой заметке я хочу рассказать Вам еще об одном методе — кластеризации.

Кратко опишу, что такое кластиризация и как она работает.

Вся область карты разбивается на прямоугольники фиксированного размера, все метки, попадающие в заданный прямоугольник при данном масштабе заменяются одной меткой с указанием количества исходных.

Можно производить кластеризацию как на стороне сервера, так и на стороне клиента.

Я покажу Вам два способа реализации кластеризации на стороне клиента.

Первый способ, с помощью скрипта по адресу https://github.com/aztek/yaclusterer.

Кластеризация выполняется в файле yaclusterer.js

Первый пример использования данного скрипта идет в месте с ним в архиве загрузки.

На странице с картой мы должны указать какое число меток с генерировать и нажать кнопку Go.

На карту случайным образом наносятся метки и происходит их кластеризация.

Посмотреть пример в действии и исходный код

В начале мы подключаем файл со скриптом

<script src="yaclusterer.js" type="text/javascript"></script>

В этом примере как всегда задаются параметры карты и добавляются необходимые элементы управления.

В строке

clusterer = new PlacemarkClusterer(map, null, null);

определяется объект кластерера

И в строке

clusterer.addOverlays(placemarks);

мы добавляем в него массив меток placemarks.

Мы можем задавать настройки параметров при определении объекта кластерера:

var cluster = new PlacemarkClusterer(map, null, {
	gridSize: 60, // размер ячейки кластера
	maxZoom: 16, // уровень зума, после которого показываются все маркеры
	style: {
		url:    'cluster.png', // адрес иконки группы маркеров кластера
		height: 50, // высота
		width:  50  // ширина
	}):

Я приведу практический пример использования кластиризатора для вывода на карту Нижнего Новгорода меток с указанием расположения терминалов QIWI (555 – штук).

Посмотреть пример в действии и исходный код

В этом примере из таблицы qiwiterminal базы данных, с помощью файла vivmarkers.php, мы извлекаем информацию об адресах терминалов и их координатах, а затем формируем файл в формате JSON, который передается в наш основной файл ymap_pr_66_2.html.

Там из полученных данных формируется массив меток placemarks, который потом обрабатывается кластеризатором.

Второй способ, с помощью скрипта по адресу http://bitbucket.org/beholder/yandex.clusterer/.

Для использования необходимо создать объект YandexClusterer.

Можно это сделать двумя способами:

— создание объекта YandexClusterer при каждом добавлении маркеров:

• Создать массив точек YMaps.Placemark
• Создать объект YandexClusterer с необходимыми параметрами и передать в него массив маркеров: new YandexClusterer(map, markers, opts)

— создание объекта YandexClusterer только один раз (эффективнее):

• Создать массив точек YMaps.Placemark
• Создать объект YandexClusterer, не передавая в него маркеров: new YandexClusterer(map, [], opts)
• Использовать методы setMarkers(markers) и repaint() для обновления информации
• Для очистки маркеров можно использовать clearMarkers()

Основные параметры при создании объекта YandexClusterer:

• max_zoom — максимальный масштаб, на котором маркеры объединяются в кластеры [0]
• grid — размер сетки для кластеризации (чем меньше размер, тем больше будет кластеров) [60]
• min_size — минимальный размер кластера [2]
• centered — вычислять ли центр кластеров по точкам (медленнее, но точнее) [false]
• batch — размер шага при вычислении кластеров (можно уменьшить при тормозах или для IE) [400]
• style — объект для задания стиля метки кластера
• style.icon — картинка иконки для кластера
• style.height — высота иконки [52]
• style.width — ширина иконки [53]style.offset — массив с отступами для привязки иконки [[0, 0]]
• style.textColor — цвет текста подписи [#000000]
• style.textSize — размер шрифта [11]
• style.printable — делать ли иконки печатаемыми при отключенной печати фона [false]

Для кластеризации можно использовать файлы yandex.clusterer.js или yandex.clusterer.min.js (сжатая версия).

Примеры использования.

Первый пример, генерация произвольного количества меток.

На странице с картой Вы указываете необходимое количество меток для добавления на карту и отмечаете или нет возможность использования кластеризатора.

Это Вам позволяет сравнить скорость работы с большим количеством меток на карте без кластеризации и с её использованием.

Посмотреть пример в действии и исходный код

Второй пример, использования кластиризатора для вывода на карту Нижнего Новгорода меток с указанием расположения терминалов QIWI (555 – штук).

Посмотреть пример в действии и исходный код

Здесь также данные из формата JSON преобразуются в массив меток markers, который затем передается в кластеризатор.