0

Я новичок в JS и апи я.карт, поэтому знаний не хватает, чтобы сделать одну простую штуку. Сейчас постараюсь рассказать. У меня есть список адресов города (а именно - координат), в каждом из которых живут мои клиенты. И я пытаюсь отобразить это на карте с использованием круговых диаграмм. Логика проста: если клиент оплатил услугу - метка зеленая, если "ещё думает" - желтая, если отказался - красная. Вывожу эту всю красоту через кластеризацию и макет круговой диаграммы (полный ctrl+c/v - https://yandex.ru/dev/maps/jsbox/2.1/clusterer_pie_chart). В каждой метке помимо цвета - сумма денег. И вот первая проблема: в центре кластера отображается количество меток внутри кластера (в документации так и сказано - по умолчанию), а мне нужна сумма денег. И пытаюсь ещё безуспешно реализовать, чтобы при наведении на кластер он подсвечивался и рядом всплывал хинт с тремя строками: К примеру: Оплатили 2 чел 1000р, думают 5 чел на 6000р, отказ 1 чел 500р.

Данные для метки: points - координаты, colors - цвета по типу клиента(оплатил или нет), summ_points - деньги в метке, count_points - кол-во абонентов по типу в адресе (ситуация: типа в доме три абонента и все три оплатили).

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [55.751574, 37.573856],
            zoom: 9
        }, {
            searchControlProvider: 'yandex#search'
        }),
       
        clusterer = new ymaps.Clusterer({
            // Макет метки кластера pieChart.
            clusterIconLayout: 'default#pieChart',
            // Радиус диаграммы в пикселях.
            clusterIconPieChartRadius: 25,
            // Радиус центральной части макета.
            clusterIconPieChartCoreRadius: 10,
            // Ширина линий-разделителей секторов и внешней обводки диаграммы.
            clusterIconPieChartStrokeWidth: 3,
            // Определяет наличие поля balloon.
            hasBalloon: false,
            clusterDisableClickZoom: true,
            hasHint: true,
            //clustericonContent = 
            
        }),
        points = [
            [45.0839236,38.9873438],
            [45.008142,39.0342551],
            [45.0050537,39.0296175],
            [45.011498,39.0315749],
            [45.0046905,39.0324531],
            [45.012319,39.200997],
            [45.0813732,38.98423],
            [45.0791522,38.9863894],
            [45.0765949,38.9831891],
            
        ],
        colors = [
            ['#CD5C5C'],
            ['#CD5C5C'],
            ['#CD5C5C'],
            ['#F0E68C'],
            ['#F0E68C'],
            ['#F0E68C'],
            ['#228B22'],
            ['#228B22'],
            ['#228B22'],
            
            ],
        summ_points = [
            [2968,82],
            [555,4],
            [1677,56],
            [3846,73],
            [2926,23],
            [4416,93],
            [3259,85],
            [3178,4],
            [2968,82],
            
            ],
        count_points = [
            [1],
            [1],
            [4],
            [2],
            [1],
            [1],
            [1],
            [1],
            [1],

            ], 
                    
        geoObjects = [];

    for (var i = 0, len = points.length; i < len; i++) {
        geoObjects[i] = new ymaps.Placemark(points[i], {weight: summ_points[i],
            balloonContentHeader: `Количество ЛС: ${count_points[i]}`,
            balloonContentBody: `Сумма: ${summ_points[i]} руб.`,
        }, {
            iconColor: colors[i]
            });
    }

    clusterer.add(geoObjects);
    myMap.geoObjects.add(clusterer);

    myMap.setBounds(clusterer.getBounds(), {
        checkZoomRange: true
    });
});

2 ответа 2

0

Вот две статьи про yandex maps api:

  1. Тут написано, как сделать свой собственный макет для флага с картинкой и текстом, в том числе это подойдет и для кластера https://yandex.ru/dev/maps/jsbox/2.1/icon_customImage

  2. Тут написано, как создать кластер, при этом получив список всех созданных кластеров https://yandex.ru/dev/maps/jsapi/doc/2.1/ref/reference/Clusterer.html#method_detail__createCluster У полученных кластеров, можно получить список объектов, у которых можно просуммировать общую стоимость и вывести ее на карту, используя первый пункт

Объединив в себе эти две статьи можно решить ваш вопрос

2
  • Не. всё равно не понимаю, где в коде нужно ковырять. yandex.ru/dev/maps/jsapi/doc/2.1/ref/reference/… вот здесь написано про значение, которое пишется в центре диаграммы. Если не задано — выводится сумма весов секторов. Но как его задать? data.properties.iconContent.. где это искать?
    – Dionysioz
    15 сен 2022 в 11:47
  • Ребята, помогите разобраться, как в коде изменить или задать data.properties.iconContent. Чтобы там не было "The sum of all the sectors". Это нужно редактировать в Clusterer или в другом месте? Я в js вообще ноль. Помогите
    – Dionysioz
    23 сен 2022 в 8:53
0

Итак, мне никто не помог. Пришлось грызть гранит вот решение:

    clusterer.createCluster = function (center, geoObjects) {
var clusterPlacemark = ymaps.Clusterer.prototype.createCluster.call(this, center, geoObjects);
    
    sumValuesTO = clusterPlacemark.getGeoObjects().reduce(function (iconContent, geoObject, index) {
                    return Number(iconContent) + Number(geoObject.properties.get('iconContent'))  
                }, 0);
    
    clusterPlacemark.properties.set({iconContent: sumValuesTO});
    return clusterPlacemark;
};

Этот код (функция createCluster) переопределяет способ построения метки кластера. В ней я задал что она должна суммировать, и куда выводить итог: clusterPlacemark.properties.set({iconContent: sumValuesTO}).

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.