Клуб API Карт

Клуб API Карт

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

Пост в архиве.

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

плейсмарк объединен в кластер, как кластер выделить?
вопрос -  как изменить иконку для конкретного кластера - тот пример что в документации позволяет изменить иконку только для всех кластеров кластеризатора,
а нужно только для конкретного. Марина (отдельная благодарность, от всей души) посоветовала использовать 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'});


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

 

15 комментариев
Авторизуйтесь, чтобы оставить комментарий
dimik
28 января 2016, 03:35
clu.options.set({clusterIconLayout : 'clusterIconLayout2'}); //!! не работат

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

 

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


Nick Dirov
28 января 2016, 03:35

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

dimik
28 января 2016, 03:35
дайте ссылку, посмотрим
Nick Dirov
28 января 2016, 03:35

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















dimik
28 января 2016, 03:35

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

Nick Dirov
28 января 2016, 03:35

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

mari-na-bzzz
28 января 2016, 03:35

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

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

 

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

iytin-ne
28 января 2016, 03:35

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

mari-na-bzzz
28 января 2016, 03:35

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

Nick Dirov
28 января 2016, 03:35

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

iytin-ne
28 января 2016, 03:35

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

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

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

Nick Dirov
28 января 2016, 03:35

для 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'})};
});

iytin-ne
28 января 2016, 03:35

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

Виктор
14 декабря 2017, 18:16
iytin-ne,
 как вы решили проблему с тем, что значок кластера сбрасывается при зуме?
Михаил
16 мая 2018, 18:58
mari-na-bzzz,
 Марина, а как сделать тоже самое clu.getOverlay().options.set('layout', 'clusterIconLayout2') в objectManager.clusters?