Как заставить в Яндекс.Картах кластеризатор Pie Charts работать с произвольными цветами?

Question

[Сергей Еремин]

Странные вещи происходят с ymaps-pie-chart-clusterer. Если делать все по рекомендации, работает:

ymaps.ready(function () {
  var myMap = new ymaps.Map('SeriaMap', {
    center: [55.75, 37.57],
    zoom: 10,
  });
  ymaps.modules.require(['PieChartClusterer'], function (PieChartClusterer) {
		var clusterer = new PieChartClusterer( );
		var points = [
			new ymaps.Placemark([55.7501, 37.5702],
				{ balloonContent: 'метка типа А'},
				{ preset: 'islands#blueIcon' } 
				),
			new ymaps.Placemark([55.7502, 37.5702],
				{ balloonContent: 'метка типа А'},
				{ preset: 'islands#blueIcon' } 
				),
			new ymaps.Placemark([55.7501, 37.5701],
				{ balloonContent: 'метка типа B'},
				{ preset: 'islands#redIcon' } 
				),
			new ymaps.Placemark([55.7502, 37.5701],
				{ balloonContent: 'метка типа А'},
				{ preset: 'islands#blueIcon' } 
				)
		];
    clusterer.add(points);
    myMap.geoObjects.add(clusterer);
   });
});

Если определяешь свои цвета для меток -- не работает:

ymaps.ready(function () {
  var myMap = new ymaps.Map('SeriaMap', {
    center: [55.75, 37.57],
    zoom: 10,
  });

  ymaps.modules.require(['PieChartClusterer'], function (PieChartClusterer) {
		var clusterer = new PieChartClusterer( );
		var points = [
			new ymaps.Placemark([55.7501, 37.5702],
				{ balloonContent: 'метка типа А'},
				{ preset: 'islands#circleIcon', iconColor: 'rgb(0,0,128)' } 
				),
			new ymaps.Placemark([55.7502, 37.5702],
				{ balloonContent: 'метка типа А'},
				{ preset: 'islands#circleIcon', iconColor: 'rgb(0,0,128)' } 
				),
			new ymaps.Placemark([55.7501, 37.5701],
				{ balloonContent: 'метка типа B'},
				{ preset: 'islands#circleIcon', iconColor: 'rgb(255,0,0)' } 
				),
			new ymaps.Placemark([55.7502, 37.5701],
				{ balloonContent: 'метка типа А'},
				{ preset: 'islands#circleIcon', iconColor: 'rgb(0,0,128)' } 
				)
		];
    clusterer.add(points);
    myMap.geoObjects.add(clusterer);
   });
});

Точнее метки работают, а вот клястеризация с паями не работает. Вместо разноцветного клястера -- белый кружок. Может я что-то не так делаю? В блоге разработчика уверяют что должно работать: ymapsapi.ya.ru/replies.xml?parent_id=2325&with_par...

Answer 1

[Николай]

Как вы правильно отметили в ссылке на форуме яндекса - не работает потому что берется цвет из preset'a. Можете сделать pull-request и подправить код. Там нужно добавить примерно такое:
( файл pieChartClusterer.js)

createCluster: function (center, geoObjects) {
 // Создаем метку-кластер с помощью стандартной реализации метода.
 var clusterPlacemark = PieChartClusterer.superclass.createCluster.call(this, center,   geoObjects);
  var styleGroups = geoObjects.reduce(function (groups, geoObject) {
  var style = geoObject.options.get('iconColor', null);
  // eсли iconColor параметр не указан - берем значение из preset'а
  if (style === null) {
    style = getIconStyle(geoObject.options.get('preset', 'islands#blueIcon'));
  }
  ...
            
};

И пробросить значение в функции ( файл component/Canvas.js)

Canvas.prototype._getStyleColor = function (style) {
        return (iconColors[style] === undefined)? style: iconColors[style];
    };

Comments

[Сергей Еремин]

Николай Николай, все получилось! СПАСИБО ВАМ ОГРОМНОЕ!!! Я даже на 62.5% понял, что происходит...

По-моему, чтобы придумать то что вы сделали надо очень глубоко понимать структуру API Я.Карты... В поиске ошибки 99.9% ваша заслуга, и все 100% в поиске решения. Вам вся слава и пул-реквест должен быт, однозначно, от вашего имени!

[Сергей Еремин]

Николай: Кстати, не могу не похвастаться. Получилось офигительное мега-глюкало. Статистика типового московского строительства: oknardia.ru/stat_all (осторожно трафик... даже после упаковки все гео-данные тянут на 1.2 Mb)

[Николай]

Выглядит очень даже! Закину пулл реквест, как доберусь до компьютера.

Answer 2

[Олег Прилепа]

Может быть надо в формате HEX задавать, а не rgb() ?
В примерах то именно HEX.

Comments

[Сергей Еремин]

С HEX кодировкой тоже не работает...

Answer 3

[iff]

Тоже столкнулся с такой проблемой. Цвета кластера берутся из имен пресетов меток, входящих в кластер. Т.к. я хочу использовать свои цвета, то поступил следующим образом.

Меткам задаю в свойствах нужный мне цвет и выдуманный пресет. Здесь идет поиск по свойству.

var gq = ymaps.geoQuery(placemarks);
gq.search('properties.ts == "inprogress"').setOptions({
        iconColor: '#0c99c6', 
        preset: 'islands#inprogressIcon'
});
gq.search('properties.ts == "closed"').setOptions({ 
        iconColor: '#7eb222',
        preset: 'islands#closedIcon' 
});

А в файле pie-chart-clusterer.min.js дополняю массив моими новыми "цветами":

...
var e={
blue:"#1E98FF",red:"#ED4543",darkOrange:"#E6761B"
,night:"#0E4779",darkBlue:"#177BC9",pink:"#F371D1",
gray:"#B3B3B3",brown:"#793D0E",darkGreen:"#1BAD03",
violet:"#B51EFF",black:"#595959",yellow:"#FFD21E",
green:"#56DB40",orange:"#FF931E",lightBlue:"#82CDFF",
olive:"#97A100",inprogress:"#0c99c6",closed:"#7eb222"
...

Понятно, решение не универсальное, но рабочее.