Клуб API Карт

как изменить иконку для отдельного (выбранного) кластера

Nick Dirov
27 сентября 2012, 14:55

Добрый день, Ув. участники клуба,

плейсмарк объединен в кластер, как кластер выделить?
вопрос -  как изменить иконку для конкретного кластера - тот пример что в документации позволяет изменить иконку только для всех кластеров кластеризатора,
а нужно только для конкретного. Марина (отдельная благодарность, от всей души) посоветовала использовать getObjectState(...).cluster для получения ссылки на кластер,
но все равно не получается поменять иконку для кластера.

код ниже, api 2.0.15

function selectPlacemarkById(z_id)
{
if (myClusterer)
myClusterer.each( function (i)
{
var ClusterNode = i.properties.get('geoObjects'); // узел кластера
if (ClusterNode) // если кластер
{
for (c = 0; c < ClusterNode.length; c++) // по всем меткам кластера
{if (ClusterNode[c].properties.get('z_id') == z_id)
{//alert('найдена точка внутри кластера');
var clu = myClusterer.getObjectState(ClusterNode[c]).cluster;
clu.options.set({clusterIconLayout : 'clusterIconLayout2'}); //!! не работат
}
}
}
}
)
};

 

кластеризатор и стиль объявлены так..

myClusterer = new ymaps.Clusterer({clusterDisableClickZoom: true});

myClusterIconLayout = ymaps.templateLayoutFactory.createClass(
'<div style="position: absolute; margin: -26px 0 0 -26px; width: 58px; height: 58px; overflow: hidden;z-index: 0; ">' +
'<div style="z-index:800;position: absolute; width: 58px; height: 58px; text-align: center; font-size: 13px; line-height: 58px;">$[properties.geoObjects.length]</div>' +
'<img src="small.png" style="position: absolute;"></div>');

 


ymaps.layout.storage.add('clusterIconLayout2', myClusterIconLayout);

вот такой код позволяет изменить иконки для всех кластеров коллекции 

myClusterer.options.set({clusterIconLayout: 'clusterIconLayout2'});


как изменить иконку только для указанного кластера?

 

13 комментариев
Подписаться на комментарии к посту
clu.options.set({clusterIconLayout : 'clusterIconLayout2'}); //!! не работат

самому кластеру надо передавать эту опцию без префикса

 

clu.options.set({iconLayout : 'clusterIconLayout2'});


спасибо за ответ но так не работает :(
т.е. присваивается но изменение внешнего вида не происходит

дайте ссылку, посмотрим

http://www.w3.org/1999/xhtml">















а что должно поменяться если вы устанавливаете кластеру тот же самый макет "clusterIconLayout2", который уже установили через кластеризатор?

1.там в методе YMapInit закоментирована та строка которая для кластера метку назначает
// myClusterer.options.set({clusterIconLayout: 'clusterIconLayout2'}); 
2.если вышеприведенную строку выполнить в методе selectPlacemarkById то на карте изменения (новые иконки кластеров) отобразятся только после масштабирования карты. похоже что проблема в том что кластер не перерисовывается после назначения шаблона. как бы его перерисовать - repaint и refresh не привели к желаемому результату - может конечно в синтаксисе там ошибся. 
3. еще момент - сама картинка кластера small.png 40х40 ее нужно рядом положить с html примером для воспроизведения ошибки

Чтобы заменить макет, сейчас нужно сделать так

clu.getOverlay().options.set('layout', 'clusterIconLayout2');

 

Кластера вообще не заточены под динамическое изменение своих свойств (чтобы работали быстрее), поэтому приходится вот так крутиться. Может быть после того, как мы ускорим работу геообъектов, кластера обретут полноценный набор функций геообъекта.

может немного не в тему, но вот как например изменить картинку кластера динамически при клике например, к какому свойству нужно обратиться и как.

Если нужно поменять картинку у стандартного макета кластера, то нужно обновить опции icons и numbers, на их изменение кластер реагирует сразу. Если нужно обновить макет целиком, подойдет решение, указанное выше.

Большое спасибо всем, совет Марины помог: оверлей-лейаут, получилось!!  Марина, Вам отдельное спасибо.

Марина, посмотрите пожалуйста на мой код

cluster.events.add('balloonopen', function (e) {
            eCluster = e.get('target');
            var clusterIcons = [{
                        href: 'icons/round_red.png',
                        size: [30, 30],
                        // Отступ, чтобы центр картинки совпадал с центром кластера.
                        offset: [-15, -15]
                    }];
            eCluster.options.unset('icons');
            eCluster.options.set('icons',clusterIcons);
            eCluster.balloon.close();
        });

вот сайт http://www.4lf.ru/projects.html

сделал так чтобы при максимальном зуме кластера, он менял картинку, но после изменения зума он снова стает синим. что я не так делаю?

для Evgeniy: 

myClusterer.events.add('dblclick', function (e) {
eCluster = e.get('target');
var ClusterNode = eCluster.properties.get('geoObjects');
if (ClusterNode)
{eCluster.getOverlay().options.set({layout: 'clusterIconLayout2'})};
});

спасибо, пригодится.