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

D
На сайте с 28.06.2008
Offline
1101
851

Вывожу объекты на карту. У объектов есть характеристика, в зависимости от нее я меняю цвет метки от красного до зеленого (типа плохие, хорошие).

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

Возможно ли это сделать и не подскажите ли как?

Вот мой код

var map = (function() {
  var _private = {
    'geoMap': null,
    'moscow': [55.755381, 37.619044],
    'init': function(el) {
        _private.geoMap = new ymaps.Map(el, {
          center: _private.moscow,
          zoom: 9,
          controls: [],
        },
        {
          suppressMapOpenBlock: true,
          suppressObsoleteBrowserNotifier: true,
        }
        );
                _private.geoMap.controls.add('zoomControl');
        _private.geoMap.controls.add(
                new ymaps.control.SearchControl({useMapBounds: true}), {top: 6, left: 250});
    },
    'setCenter': function(res, zoom) {
        _private.geoMap.setCenter(res, zoom);
    },
    'setClusterer': function(res) {
  if(res.length){
        var clusterer = new ymaps.Clusterer();
        if(window.section && section == 9){
        clusterer.options.set({
    gridSize: 512
  });
  }
        var placemarks = [];
        for(var i = 0; i < res.length; i++) {
                var placemark = new ymaps.Placemark([res[i].geo_lat, res[i].geo_long], {
                        iconContent: '<a href="' + res[i].url + '" style="text-decoration: none;">' + res[i].text + '</a>'
                }, {
                        preset: res[i].color
                });
                placemarks.push(placemark);
        }
        clusterer.add(placemarks);
        _private.geoMap.geoObjects.add(clusterer);
        res=null;
        if(window.clustereradded){clustereradded=2}
  }else{
                        if(window.clustereradded){clustereradded=3}
  }
    }
  };
  return {
    init: function(el) {
        _private.init(el);
    },
    setCenter: function(res, zoom) {
        _private.setCenter(res, zoom);
    },
    setClusterer: function(res) {
        _private.setClusterer(res);
    }
  }
}());


D
На сайте с 28.06.2008
Offline
1101
#1
D
На сайте с 28.06.2008
Offline
1101
#2
var clusterer = new ymaps.Clusterer();

Заменил на

    var clusterer = new ymaps.Clusterer({
        // Макет метки кластера pieChart.
        clusterIconLayout: 'default#pieChart',
        // Радиус диаграммы в пикселях.
        clusterIconPieChartRadius: 15,
        // Радиус центральной части макета.
        clusterIconPieChartCoreRadius: 10,
        // Ширина линий-разделителей секторов и внешней обводки диаграммы.
        clusterIconPieChartStrokeWidth: 1,
        // Определяет наличие поля balloon.
        hasBalloon: false
    });

Как видно на фото - синий и зеленый цвета (на иконках группировки) не совпадают с цветами одиночных иконок, почему так?

WebAlt
На сайте с 02.12.2007
Offline
250
#3
Dram #:

Заменил на

Как видно на фото - синий и зеленый цвета (на иконках группировки) не совпадают с цветами одиночных иконок, почему так?

В том же примере что по ссылке есть цвета, добавьте их в  свой код:

// Значения цветов иконок.
        placemarkColors = [
            '#DB425A', '#4C4DA2', '#00DEAD', '#D73AD2',
            '#F8CC4D', '#F88D00', '#AC646C', '#548FB7'
        ],
D
На сайте с 28.06.2008
Offline
1101
#4
WebAlt #:

В том же примере что по ссылке есть цвета, добавьте их в  свой код:

Там же эти цвета тупо для генерации рандомных точек. У меня же цвета меток задаются через стандартные цвета https://yandex.ru/dev/maps/jsapi/doc/2.1/ref/reference/option.presetStorage.html

В моем коде это - 

 preset: res[i].color
D
На сайте с 28.06.2008
Offline
1101
#5

Как оказалось недостаточно просто выбрать дефолтный маркер, нужно еще и жестко прописать его цвет, тогда цвета на группировке будут нормальные

   preset: 'islands#dotIcon',
            iconColor: '#735184'

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий