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

Известно, что с ростом числа маркеров на карте, растет и нагрузка на браузер пользователя (особенно на 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, который затем передается в кластеризатор.

  • Гость: Зравствуйте. Пишу немного не в тему. Видел на вашем сайте способы прикрутки к различным компонентам, например SOBI2, yandex карты. Не могли бы вы сделать урок о замене google карт на yandex в компоненте YooZOO. По-моему этот каталог по всем моментам опережает конкурентов.
  • Гость: 3 день сижу и никак не получается. Гребаный формат json. может сделаете пример на XML?
  • Гость: Огромное Спасибо Сергею - за помощь. Всё получилось.
  • Гость: подскажите пожалуйста, есть ли возможность менять стиль YandexClusterer в зависимости от кол-ва объединенных маркеров?
  • Гость: не пойму где файл примеров скачать....
  • Гость: подскажите пожалуйста как сделать кластеризацию с XML желательно хоть с небольшим примером
  • Гость: Где можно посмотреть содержимое файла "/examples/clusterer/aztek-yaclusterer/vivmarkers.php" ? Или хотябы то что он выдает? А за статьи спасибо, подробно все... за исключеним конкретно этой:(
  • Гость: Вот код файла <a href="http://webmap-blog.ru//examples/clusterer/aztek-yaclusterer/vivmarkers.txt" title="vivmarkers.php" target="_blank" rel="nofollow">vivmarkers.php</a>
  • Гость: Спасибо! Уже разобрался, почти подошел от гугловской лишь слегка подрихтовав. Но все-равно код будет полезен данной статье. Спасибо;)