Задать вопрос
Sergei_Erjemin
@Sergei_Erjemin
Улыбайся, будь самураем...
api

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

Странные вещи происходят с 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...
  • Вопрос задан
  • 1339 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 1
@healqq
Как вы правильно отметили в ссылке на форуме яндекса - не работает потому что берется цвет из 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];
    };
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 2
OAPrilepa
@OAPrilepa
Frontend developer
Может быть надо в формате HEX задавать, а не rgb() ?
В примерах то именно HEX.
Ответ написан
1 комментарий
1 комментарий
@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"
...


Понятно, решение не универсальное, но рабочее.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик на интеграцию API деловых линий с AMO CRM удаленно
Sky Cargo Service
от 25 000 ₽
QA engineer (настройка автоматизации на PyTest), тесты API, UI.
HR BIG G
До 250 000 ₽
Intern System Analyst
Media Code
До 30 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать HLTV HUD для стрима CS 1.6
25 апр. 2024, в 08:02
2500 руб./за проект
Вычислить размер объекта по карте глубин
25 апр. 2024, в 07:37
5000 руб./за проект
Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL
25 апр. 2024, в 05:57
3000 руб./за проект
Ещё заказы