Cluster. Статьи

JavaScript API 2.0

Cluster

Расширяет IGeoObject.

Кластер геообъектов. Используется по умолчанию в Clusterer.

Конструктор

Cluster(geometry, properties[, options])

Параметры:


Параметр	Значение по умолчанию	Описание
geometry *	—	Тип: IPointGeometry Геометрия кластера.
properties *	—	Тип: IDataManager Данные кластера.
properties.geoObjects *	—	Тип: IGeoObject[] Массив геообъектов, которые находятся в данном кластере.
options	—	Тип: Object Опции кластера. Помимо частных опций, балун кластера поддерживает те же опции, что и {@link.Balloon}. Опции для балуна кластера указываются с префикcом 'balloon'.
options.balloonContentBodyLayout	'cluster#balloonContentBody'	Тип: Function\|String Макет балуна кластера. Можно передать конструктор объекта с интерфейсом ILayout или ключ одного из стандартных макетов. Каждый стандартный макет имеет некоторые собственные опции. 'cluster#balloonContentBody' - Макет с двумя колонками. В левой колонке (sidebar) находится список геообъектов. В правой колонке информация о геообъекте. Опции макета balloonMainContentLayout Макет отображения данных о геообъекте в балуне кластера. (Тип: конструктор объекта с интерфейсом ILayout или ключ макета) Значение по умолчанию: 'cluster#balloonMainContent' balloonSidebarWidth Ширина поля со списком объектов в балуне кластера в пикселях. Значение по умолчанию: 125 'cluster#balloonCarouselContent' - Макет с тремя колонками. В центральной колонке представлена информация о геобъекте. В боковых колонках располагаются стрелки перехода на следующий и предыдущий геообъект. В нижней части балуна находится меню навигации (pager). Опции макета balloonContentItemLayout Макет отображения данных геообъекта в балуне кластера. (Тип: конструктор объекта с интерфейсом ILayout или ключ макета) Значение по умолчанию: 'cluster#balloonCarouselContentItem' balloonCycling Цикличность списка при навигации боковыми стрелками. Значение по умолчанию: true balloonPagerSize Количество элементов навигации в нижней панели. Значение по умолчанию: 9 balloonPagerType Тип нижней панели навигации. Может принимать значения 'numeric' и 'marker'. numeric - отображение номера геообъекта в списке; marker - отображение маркеров без номеров. Рекомендуется использовать при количестве элементов в кластере меньшем или равном значению options.balloonPagerSize. Значение по умолчанию: numeric balloonPagerVisible Отображать ли панель навигации. Значение по умолчанию: true 'cluster#balloonAccordionContent' - Информация о геообъектах в виде списка. После клика по элементу под ним разворачивается информация о геообъекте. Опции макета balloonAccordionItemTitleLayout Макет заголовка элемента списка. По клику разворачивается детальная информация о геообъекте. (Тип: конструктор объекта с интерфейсом ILayout или ключ макета) Значение по умолчанию: 'cluster#balloonAccordionItemTitle' balloonAccordionItemContentLayout Макет информации о геообъекте. Отображается после клика по элементу списка. (Тип: конструктор объекта с интерфейсом ILayout или ключ макета) Значение по умолчанию: 'cluster#balloonAccordionItemContent' balloonAccordionShowIcons Опция, которая определяет отображается ли иконка геообъекта в макете 'cluster#balloonAccordionItemTitle'. Значение по умолчанию: true
options.balloonHeight	—	Тип: Number Высота балуна кластера. Стандартное значение зависит от макета. 'cluster#balloonContentBody' - 210 пикселей 'cluster#balloonCarouselContent' - 177 пикселей 'cluster#balloonAccordionContent' - 283 пикселей
options.balloonWidth	—	Тип: Number Ширина балуна кластера. Стандартное значение зависит от макета. 'cluster#balloonContentBody' - 475 пикселей 'cluster#balloonCarouselContent' - 308 пикселей 'cluster#balloonAccordionContent' - 305 пикселей Обратите внимание, что если ширина балуна кластера будет больше максимально допустимой ширины балуна (опция maxWidth Balloon), то макет будет обрезан.
options.cursor	'pointer'	Тип: String Курсор над меткой кластера.
options.disableClickZoom	false	Тип: Boolean Флаг, запрещающий увеличение коэффициента масштабирования карты при клике на кластер.
options.hideIconOnBalloonOpen	true	Тип: Boolean Скрывать иконку при открытии балуна.
options.iconContentLayout	'cluster#iconContent'	Тип: Function\|String Макет содержимого метки кластера. (Тип: конструктор объекта с интерфейсом ILayout или ключ макета).
options.iconLayout	'cluster#icon'	Тип: Function\|String Макет метки кластера (Тип: конструктор объекта с интерфейсом ILayout или ключ макета).
options.icons	—	Тип: Object[] Массив, описывающий иконки для стандартной реализации кластера.
options.interactivityModel	'default#geoObject'	Тип: String Модель интерактивности кластера. Доступные ключи и их значения перечислены в описании interactivityModel.storage.
options.numbers	[10, 100]	Тип: Number[] Массив, описывающий граничные значения для размеров кластеров.
options.openBalloonOnClick	true	Тип: Boolean Опция, позволяющая запретить открытие балуна при клике на кластере. По умолчанию открытие балуна разрешено. Количество иконок, описанных в опции "icons", должно быть на 1 больше, чем чисел в данном массиве.


Параметр	Значение по умолчанию	Описание
geometry *	—	Тип: IPointGeometry Геометрия кластера.
properties *	—	Тип: IDataManager Данные кластера.
properties.geoObjects *	—	Тип: IGeoObject[] Массив геообъектов, которые находятся в данном кластере.
options	—	Тип: Object Опции кластера. Помимо частных опций, балун кластера поддерживает те же опции, что и {@link.Balloon}. Опции для балуна кластера указываются с префикcом 'balloon'.
options.balloonContentBodyLayout	'cluster#balloonContentBody'	Тип: Function\|String Макет балуна кластера. Можно передать конструктор объекта с интерфейсом ILayout или ключ одного из стандартных макетов. Каждый стандартный макет имеет некоторые собственные опции. 'cluster#balloonContentBody' - Макет с двумя колонками. В левой колонке (sidebar) находится список геообъектов. В правой колонке информация о геообъекте. Опции макета balloonMainContentLayout Макет отображения данных о геообъекте в балуне кластера. (Тип: конструктор объекта с интерфейсом ILayout или ключ макета) Значение по умолчанию: 'cluster#balloonMainContent' balloonSidebarWidth Ширина поля со списком объектов в балуне кластера в пикселях. Значение по умолчанию: 125 'cluster#balloonCarouselContent' - Макет с тремя колонками. В центральной колонке представлена информация о геобъекте. В боковых колонках располагаются стрелки перехода на следующий и предыдущий геообъект. В нижней части балуна находится меню навигации (pager). Опции макета balloonContentItemLayout Макет отображения данных геообъекта в балуне кластера. (Тип: конструктор объекта с интерфейсом ILayout или ключ макета) Значение по умолчанию: 'cluster#balloonCarouselContentItem' balloonCycling Цикличность списка при навигации боковыми стрелками. Значение по умолчанию: true balloonPagerSize Количество элементов навигации в нижней панели. Значение по умолчанию: 9 balloonPagerType Тип нижней панели навигации. Может принимать значения 'numeric' и 'marker'. numeric - отображение номера геообъекта в списке; marker - отображение маркеров без номеров. Рекомендуется использовать при количестве элементов в кластере меньшем или равном значению options.balloonPagerSize. Значение по умолчанию: numeric balloonPagerVisible Отображать ли панель навигации. Значение по умолчанию: true 'cluster#balloonAccordionContent' - Информация о геообъектах в виде списка. После клика по элементу под ним разворачивается информация о геообъекте. Опции макета balloonAccordionItemTitleLayout Макет заголовка элемента списка. По клику разворачивается детальная информация о геообъекте. (Тип: конструктор объекта с интерфейсом ILayout или ключ макета) Значение по умолчанию: 'cluster#balloonAccordionItemTitle' balloonAccordionItemContentLayout Макет информации о геообъекте. Отображается после клика по элементу списка. (Тип: конструктор объекта с интерфейсом ILayout или ключ макета) Значение по умолчанию: 'cluster#balloonAccordionItemContent' balloonAccordionShowIcons Опция, которая определяет отображается ли иконка геообъекта в макете 'cluster#balloonAccordionItemTitle'. Значение по умолчанию: true
options.balloonHeight	—	Тип: Number Высота балуна кластера. Стандартное значение зависит от макета. 'cluster#balloonContentBody' - 210 пикселей 'cluster#balloonCarouselContent' - 177 пикселей 'cluster#balloonAccordionContent' - 283 пикселей
options.balloonWidth	—	Тип: Number Ширина балуна кластера. Стандартное значение зависит от макета. 'cluster#balloonContentBody' - 475 пикселей 'cluster#balloonCarouselContent' - 308 пикселей 'cluster#balloonAccordionContent' - 305 пикселей Обратите внимание, что если ширина балуна кластера будет больше максимально допустимой ширины балуна (опция maxWidth Balloon), то макет будет обрезан.
options.cursor	'pointer'	Тип: String Курсор над меткой кластера.
options.disableClickZoom	false	Тип: Boolean Флаг, запрещающий увеличение коэффициента масштабирования карты при клике на кластер.
options.hideIconOnBalloonOpen	true	Тип: Boolean Скрывать иконку при открытии балуна.
options.iconContentLayout	'cluster#iconContent'	Тип: Function\|String Макет содержимого метки кластера. (Тип: конструктор объекта с интерфейсом ILayout или ключ макета).
options.iconLayout	'cluster#icon'	Тип: Function\|String Макет метки кластера (Тип: конструктор объекта с интерфейсом ILayout или ключ макета).
options.icons	—	Тип: Object[] Массив, описывающий иконки для стандартной реализации кластера.
options.interactivityModel	'default#geoObject'	Тип: String Модель интерактивности кластера. Доступные ключи и их значения перечислены в описании interactivityModel.storage.
options.numbers	[10, 100]	Тип: Number[] Массив, описывающий граничные значения для размеров кластеров.
options.openBalloonOnClick	true	Тип: Boolean Опция, позволяющая запретить открытие балуна при клике на кластере. По умолчанию открытие балуна разрешено. Количество иконок, описанных в опции "icons", должно быть на 1 больше, чем чисел в данном массиве.

^* Обязательный параметр/опция.

Примеры:

// Переменная с описанием двух видов иконок кластеров.
var clusterIcons = [
 {
     href: 'small.png',
     size: [40, 40],
     // Отступ, чтобы центр картинки совпадал с центром кластера.
     offset: [-20, -20]
 },
 {
     href: 'big.png',
     size: [60, 60],
     offset: [-30, -30]
 }],
 // При размере кластера до 100 будет использована картинка 'small.jpg'.
 // При размере кластера больше 100 будет использована 'big.png'.
 clusterNumbers = [100],
 // Сделаем макет содержимого иконки кластера,
 // в котором цифры будут раскрашены в белый цвет.
 MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
 '<div style="color: #FFFFFF; font-weight: bold;">$[properties.geoObjects.length]</div>'),
 var clusterer = new ym.Clusterer({
    // Если опции для кластеров задаются через кластеризатор,
    // необходимо указывать их с префиксами "cluster".
    clusterIcons: clusterIcons,
    clusterNumbers: clusterNumbers,
    clusterIconContentLayout: MyIconContentLayout
});

// Создание кластеризатора с макетом-каруселью
 var clusterer = new ymaps.Clusterer({
    clusterDisableClickZoom: true,
    // Используем макет "карусель"
    clusterBalloonContentBodyLayout: "cluster#balloonCarouselContent",
    // Запрещаем зацикливание списка при постраничной навигации
    clusterBalloonCycling: false,
    // Настройка внешнего вида панели навигации. Элементами панели навигации будут маркеры.
    clusterBalloonPagerType: "marker",
    // Количество элементов в панели навигации
    clusterBalloonPagerSize: 6
});

// Создание кластеризатора с макетом-аккордеоном
 var clusterer = new ymaps.Clusterer({
    clusterDisableClickZoom: true,
    // Используем макет "аккордеон"
    clusterBalloonContentBodyLayout: "cluster#balloonAccordionContent"
});

Поля


Имя	Тип	Описание
balloon	cluster.Balloon	Балун кластера.
events	IEventManager	Менеджер событий. Унаследовано от IDomEventEmitter.
geometry	IGeometry	Геометрия геообъекта. Унаследовано от IGeoObject.
options	IOptionManager	Менеджер опций. Унаследовано от ICustomizable.
properties	IDataManager	Менеджер данных геообъекта. Унаследовано от IGeoObject.
state	data.Manager	Состояние кластера. Определяется следующими полями: activeObject - Cсылка на активный объект кластера. Активным объектом является тот, который в данный момент выбран в балуне кластера.


Имя	Тип	Описание
balloon	cluster.Balloon	Балун кластера.
events	IEventManager	Менеджер событий. Унаследовано от IDomEventEmitter.
geometry	IGeometry	Геометрия геообъекта. Унаследовано от IGeoObject.
options	IOptionManager	Менеджер опций. Унаследовано от ICustomizable.
properties	IDataManager	Менеджер данных геообъекта. Унаследовано от IGeoObject.
state	data.Manager	Состояние кластера. Определяется следующими полями: activeObject - Cсылка на активный объект кластера. Активным объектом является тот, который в данный момент выбран в балуне кластера.

События


Имя	Описание
addtomap	Добавление кластера на карту. Экземпляр класса Event.
click	Однократное нажатие левой кнопки мыши на объекте. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.
contextmenu	Вызов контекстного меню на элементе. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.
dblclick	Двойное нажатие левой кнопки мыши на объекте. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.
geometrychange	Изменение геометрии геообъекта. Экземпляр класса Event. Имена полей, доступных через метод Event.get: originalEvent - оригинальное событие геометрии. Унаследовано от IGeoObject.
mapchange	Сменилась карта. Поля данных: oldMap - старая карта; newMap - новая карта. Унаследовано от IParentOnMap.
mousedown	Нажатие кнопки мыши над объектом. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.
mouseenter	Наведение курсора на объект. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.
mouseleave	Вывод курсора за пределы объекта. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.
mousemove	Перемещение курсора над объектом. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.
mouseup	Отпускание кнопки мыши над объектом. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.
multitouchend	Окончание мультисенсорного управления. Данное событие доступно только на устройствах, которые поддерживают множественные сенсорные прикосновения. Возвращает реализацию интерфейса IMultiTouchEvent c информацией о прикосновениях. Унаследовано от IDomEventEmitter.
multitouchmove	Повторящееся событие при мультисенсорном управлении. Данное событие доступно только на устройствах, которые поддерживают множественные сенсорные прикосновения. Возвращает реализацию интерфейса IMultiTouchEvent c информацией о прикосновениях. Унаследовано от IDomEventEmitter.
multitouchstart	Начало мультисенсорного управления. Данное событие доступно только на устройствах, которые поддерживают множественные сенсорные прикосновения. Возвращает реализацию интерфейса IMultiTouchEvent c информацией о прикосновениях. Унаследовано от IDomEventEmitter.
optionschange	Изменение в опциях объекта. Унаследовано от ICustomizable.
overlaychange	Изменение оверлея геообъекта. Экземпляр класса Event. Имена полей, доступных через метод Event.get: newOverlay - новый оверлей, либо null, если оверлея нет; oldOverlay - старый оверлей, либо null, если оверлея нет. Унаследовано от IGeoObject.
parentchange	Сменился родительский объект. Поля данных: oldParent - старый родитель; newParent - новый родитель. Унаследовано от IChild.
pixelgeometrychange	Изменение пиксельной геометрии геообъекта. Экземпляр класса Event. Имена полей, доступных через метод Event.get: newPixelGeometry - новая пиксельная геометрия; oldPixelGeometry - старая пиксельная геометрия. Унаследовано от IGeoObject.
propertieschange	Изменение данных геообъекта. Экземпляр класса Event. Имена полей, доступных через метод Event.get: originalEvent - оригинальное событие менеджера данных. Унаследовано от IGeoObject.
removefrommap	Удаление кластера с карты. Экземпляр класса Event.
wheel	Скролл мышкой. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.


Имя	Описание
addtomap	Добавление кластера на карту. Экземпляр класса Event.
click	Однократное нажатие левой кнопки мыши на объекте. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.
contextmenu	Вызов контекстного меню на элементе. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.
dblclick	Двойное нажатие левой кнопки мыши на объекте. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.
geometrychange	Изменение геометрии геообъекта. Экземпляр класса Event. Имена полей, доступных через метод Event.get: originalEvent - оригинальное событие геометрии. Унаследовано от IGeoObject.
mapchange	Сменилась карта. Поля данных: oldMap - старая карта; newMap - новая карта. Унаследовано от IParentOnMap.
mousedown	Нажатие кнопки мыши над объектом. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.
mouseenter	Наведение курсора на объект. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.
mouseleave	Вывод курсора за пределы объекта. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.
mousemove	Перемещение курсора над объектом. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.
mouseup	Отпускание кнопки мыши над объектом. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.
multitouchend	Окончание мультисенсорного управления. Данное событие доступно только на устройствах, которые поддерживают множественные сенсорные прикосновения. Возвращает реализацию интерфейса IMultiTouchEvent c информацией о прикосновениях. Унаследовано от IDomEventEmitter.
multitouchmove	Повторящееся событие при мультисенсорном управлении. Данное событие доступно только на устройствах, которые поддерживают множественные сенсорные прикосновения. Возвращает реализацию интерфейса IMultiTouchEvent c информацией о прикосновениях. Унаследовано от IDomEventEmitter.
multitouchstart	Начало мультисенсорного управления. Данное событие доступно только на устройствах, которые поддерживают множественные сенсорные прикосновения. Возвращает реализацию интерфейса IMultiTouchEvent c информацией о прикосновениях. Унаследовано от IDomEventEmitter.
optionschange	Изменение в опциях объекта. Унаследовано от ICustomizable.
overlaychange	Изменение оверлея геообъекта. Экземпляр класса Event. Имена полей, доступных через метод Event.get: newOverlay - новый оверлей, либо null, если оверлея нет; oldOverlay - старый оверлей, либо null, если оверлея нет. Унаследовано от IGeoObject.
parentchange	Сменился родительский объект. Поля данных: oldParent - старый родитель; newParent - новый родитель. Унаследовано от IChild.
pixelgeometrychange	Изменение пиксельной геометрии геообъекта. Экземпляр класса Event. Имена полей, доступных через метод Event.get: newPixelGeometry - новая пиксельная геометрия; oldPixelGeometry - старая пиксельная геометрия. Унаследовано от IGeoObject.
propertieschange	Изменение данных геообъекта. Экземпляр класса Event. Имена полей, доступных через метод Event.get: originalEvent - оригинальное событие менеджера данных. Унаследовано от IGeoObject.
removefrommap	Удаление кластера с карты. Экземпляр класса Event.
wheel	Скролл мышкой. При использовании следует иметь в виду, что при сенсорном вводе события мыши будут эмулироваться. Более детально описание в domEvent.manager. Унаследовано от IDomEventEmitter.

Методы


Имя	Возвращает	Описание
getBounds()	Number[][]\|null	Returns географические координаты прямоугольной области, охватывающей все элементы кластера.
getGeoObjects()	IGeoObject[]	Returns массив геообъектов, образующих кластер.
getMap()	Map	Returns ссылку на карту. Унаследован от IParentOnMap.
getOverlay()	IOverlay\|null	Returns оверлей геообъекта, либо null. Унаследован от IGeoObject.
getParent()	IParentOnMap	Returns ссылку на родительский объект. Унаследован от IChildOnMap.
setParent(parent)	IChildOnMap	Устанавливает родительский объект. Унаследован от IChildOnMap.


Имя	Возвращает	Описание
getBounds()	Number[][]\|null	Returns географические координаты прямоугольной области, охватывающей все элементы кластера.
getGeoObjects()	IGeoObject[]	Returns массив геообъектов, образующих кластер.
getMap()	Map	Returns ссылку на карту. Унаследован от IParentOnMap.
getOverlay()	IOverlay\|null	Returns оверлей геообъекта, либо null. Унаследован от IGeoObject.
getParent()	IParentOnMap	Returns ссылку на родительский объект. Унаследован от IChildOnMap.
setParent(parent)	IChildOnMap	Устанавливает родительский объект. Унаследован от IChildOnMap.

Описание полей

balloon

{cluster.Balloon} balloon

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

state

{data.Manager} state

Состояние кластера. Определяется следующими полями:

activeObject - Cсылка на активный объект кластера. Активным объектом является тот, который в данный момент выбран в балуне кластера.

Пример:

var geoObjects = cluster.properties.get('geoObjects');
// При открытии балуна кластера будет выбран третий объект в списке.
cluster.state.set('activeObject', geoObjects[2]);

Описание событий

addtomap

Добавление кластера на карту. Экземпляр класса Event.

removefrommap

Удаление кластера с карты. Экземпляр класса Event.

Описание методов

getBounds

{Number[][]|null} getBounds()

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

getGeoObjects

{IGeoObject[]} getGeoObjects()

Returns массив геообъектов, образующих кластер.

Была ли статья полезна?

Расскажите, что вам не понравилось в статье: