Блог API Яндекс.Карт

Блог API Яндекс.Карт

Пример: метки кластера в виде круговой диаграммы

Меткам кластеров в API 2.0 можно задавать различные иконки, а можно пойти еще дальше и сделать так, чтобы иконки кластеров зависели от типов меток, входящих в кластер. Мы сделали пример, уверены он будет вам полезен. 

Кластеры

Посмотреть пример в новом окне.

Пользуйтесь и присылайте свои примеры в комментариях, в клубе или на нашей страничке в Фейсбуке

60 комментариев
Авторизуйтесь, чтобы оставить комментарий
Константин
28 января 2016, 06:19

Хорошое решение, я даже знаю где это применить у себя в проекте.

А иконки можно будет другие применять, не стандартные ?

mousesport007
28 января 2016, 06:19

конечно можно

 Вот моё творение 

Андрей Грэй
28 января 2016, 06:19

Оффтоп: Круто. Всмысле информация по глубине скважин. Скажите, а по Раменскому району у вас такой нет? )

mousesport007
28 января 2016, 06:19

Не, нету! где бурили, там и ставим метки.

as.i.am.89
28 января 2016, 06:19

очень круто!... вот бы мне так.. :Р

dimik
28 января 2016, 06:19

 

А иконки можно будет другие применять, не стандартные?

если вы про иконки кластеров, то они нестандартные, и создаются с помощью Google Chart API

Для меток можно использовать любые цветные иконки кроме пиктограмм

Goodeeny
28 января 2016, 06:19

Здравствуйте!
Я не силен в js
прошу привести пример использования метки кластера в виде круговой диаграммы при загрузке объектов через geoXml.load, если не трудно...

попробовал, но что-то не так

Вот код: 

 

   

    Примеры. Размещение карты на странице.

   

   

   

    

 

 

 

   

    http://xn--c1ackqidakfdl.xn--p1ai/test/map.xml');">

   

 

dimik
28 января 2016, 06:19

если вы добавляете метки в кластеризатор

не надо их добавлять отдельно на карту

myMap.geoObjects.add(res.geoObjects);


Дайте лучше ссылку на эту страницу. Так по коду сложно сказать что не так

Goodeeny
28 января 2016, 06:19

http://xn--c1ackqidakfdl.xn--p1ai/test/testmap

Goodeeny
28 января 2016, 06:19

что-то начало получаться...

для того, чтобы были разные цвета в диаграмме необходимо разным меткам установить стили разные?

 

Кажется у меня получилось!!!!

Спасибо!!!! огромное....

а в целом скрипт правильный? или можно как-то улучшить?

Может надо было отдельную тему завести?

dimik
28 января 2016, 06:19

В целом всё хор.

только лишняя точка с запятой тут

var clusterer = new PieChartClusterer(), result = [];;

Goodeeny
28 января 2016, 06:19

спасибо!!!

AlexsisIT
28 января 2016, 06:19

Под IE совсем не работает! Сделайте плиз, очень надо

dimik
28 января 2016, 06:19

сейчас должно работать в ИЕ

cheremushki4
28 января 2016, 06:19

Карта сайта map пример

AlexsisIT
28 января 2016, 06:19

http://строимгород.рф/test/testmap этот пример под ИЕ не работает

dimik
28 января 2016, 06:19

этот возможно нет

а тот что я исправил точно работает )

обновите код

akon1982
28 января 2016, 06:19

Спасибо. Использовал пример на сайте http://globus.aquaviva.ru/places/. Кстати, там тоже используются свои иконки меток.

Но у меня в  IE8 Ваш пример показывается следующим образом:

http://globus.aquaviva.ru/ymaps.png

 

tekunova
28 января 2016, 06:19

Рады, что он вам пригодился. Насчет IE8 надо смотреть.

dimik
28 января 2016, 06:19

Я временно поправил в примере.

Сейчас всё должно быть хорошо.

Исправление в АПИ выйдет в следующем релизе.

anton.bogoradov
28 января 2016, 06:19

А не кинете ссылочку как выводить список объектов из базы данных, чуть выше реализована загрузка из xml документа но чую что не в ту степь движусь

vjatka-43
28 января 2016, 06:19

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

tekunova
28 января 2016, 06:19

Напишите, пожалуйста, ваш вопрос в клубе http://clubs.ya.ru/mapsapi/. Только более подробно.

vjatka-43
28 января 2016, 06:19

Как в таком примере http://dimik.github.io/ymaps/examples/piechart-clusterer/index.html открыть нужный болун,

обычно массив меток добавляется так
map.geoObjects.add(myCollection);

myCollection - массив болунов



function go_to(lat,lon,address){

map.setCenter([lat, lon], 16);

myCollection.each(function (item) {

if (item.properties.get('balloonContentHeader') == ''+address+'') {

item.balloon.open();
}
});
return false;

}


и теперь такая ссылку ссобытием onClick="return go_to('+oItem.COORDS[0]+', '+oItem.COORDS[1]+",'"+oItem.ID+"');"

я могу открыть нужный болун!

В данном примере http://dimik.github.io/ymaps/examples/piechart-clusterer/index.html
есть код:

// Добавляем метки в кластеризатор.
clusterer.add(myCollection);
// Добавляем кластеризатор на карту.
map.geoObjects.add(clusterer);

здесь возникае такая проблема что myCollection - записывается только те метки которые находятся в одном кластере а не все, то есть НЕ МОГУ открыть нужный болун!

vjatka-43
28 января 2016, 06:19

создал тему http://clubs.ya.ru/mapsapi/replies.xml?item_no=37998

tekunova
28 января 2016, 06:19

спасибо!

inkubu
28 января 2016, 06:19

Подскажите пожалуйста, как это можно реализовать в моем примере? http://dojust.ru/m/cluster.html

И где, в документации, можно почитать о PieChartClusterer?

dimik
28 января 2016, 06:19

его нет в документации т.к. это не часть АПИ, а пример использования, комментарии есть в коде

inkubu
28 января 2016, 06:19

ага, это я уже выяснил, а можно как-то иконки свои привязать к цветам?

У меня используются иконки twirl#workshopIcon, twirl#hospitalIcon, twirl#buildingsIcon, как сделать чтобы они отображались в чарте зеленым, красным, синим?

Здесь?

/**
 * Соответствие цветов иконок АПИ с RRGGBB[AA] форматом.
 * @static
 * @constant
 */
PieChartClusterer.COLOURS = {
    "blue"       : "0A6CC8",
    "darkblue"   : "3D4AE9",
    "darkgreen"  : "158B02",
    "darkorange" : "CD6D2D",
    "green"      : "1AB500",
    "grey"       : "94948E",
    "lightblue"  : "4391E7",
    "night"      : "143A6B",
    "orange"     : "CCA42B",
    "pink"       : "E666DD",
    "red"        : "E03632",
    "violet"     : "A41DE2",
    "white"      : "FFFFFF",
    "yellow"     : "D4C62C",
    "brown"      : "946134",
    "black"      : "000000"
} ;

dimik
28 января 2016, 06:19
да, может еще придется чуть подправить метод который их сопоставляет.
inkubu
28 января 2016, 06:19

 getPresetColour: function (geoObject) {
            return geoObject.options.get('preset', 'twirl#blueIcon').match(/#([a-z]+)[A-Z]/)[1];
        }

Здесь?

dimik
28 января 2016, 06:19
да, эта функция должна вернуть тебе ключ цвета. кажется она должна итак правильно работать. нет?
inkubu
28 января 2016, 06:19

ну смотри, я пробовал так:

PieChartClusterer.COLOURS = {
    "buildings"       : "0A6CC8",
    "darkblue"   : "3D4AE9",

...

} ;

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

dimik
28 января 2016, 06:19

console.log('twirl#buildingsIcon'.match(/#([a-z]+)[A-Z]/)[1]);
// "buildings"

вроде правильный ключ выбирает.

 

inkubu
28 января 2016, 06:19

может я чего не догоняю, но...

http://dojust.ru/m/cluster2.html

 

dimik
28 января 2016, 06:19

а где у тебя им preset выставляется?

inkubu
28 января 2016, 06:19

Точно! Спасибо! Теперь все получилось!

khazipov
28 января 2016, 06:19

Добрый день, возникли некоторые сложности с изменением gridSize для PieChartClusterer при создании.
В скрипте piechart-clusterer.js в перекрытии метода createCluster можно задать нужные опции в блоке cluster.options.set({})
Но указание там gridSize не дает эффекта, помогает только задание этой опции уже в основном скрипте после создания PieChartClusterer.
С чем может быть связана проблема?

ilya.podolko
28 января 2016, 06:19

Здравствуйте. Меняю версию с 2.0 на 2.1 и кластеры становятся стандартными. Ошибок не возникает, не могу понять что отвалилось :(

erjemin
28 января 2016, 06:19

Спасибо. Сделал вот такую простую клястерную карту размещения зданий определеных типовых серий (типовых проектов) зданий:  http://oknardia.ru/seria_1-510/all39/#s_map  ... И хочется сделать такиеже клястеры с круговыми диаграммами. Но не хватает цветов. У API только 15 "встроеных" цветов. А нужно больше. Как поступать?

На Github в исходниках нашел функцию: https://github.com/yandex/ymaps-pie-chart-clusterer/blob/master/src/pieChartClusterer/icon/colors.js 


ym.modules.define('PieChartClusterer.icon.colors', [], function (provide) {
    var colors = {
        blue: '#1E98FF',
red: '#ED4543',
darkOrange: '#E6761B',
night: '#0E4779',
darkBlue: '#177BC9',
pink: '#F371D1',
gray: '#ff0000',
brown: '#793D0E',
darkGreen: '#1BAD03',
violet: '#B51EFF',
black: '#595959',
yellow: '#FFD21E',
green: '#56DB40',
orange: '#FF931E',
lightBlue: '#82CDFF',
olive: '#97A100'
};

provide(colors);
});

Просто переопределить ее в своем коде (предварительно вызывая, при этом общее API) эффекта не дает. Тащить всю библиоткеу к себе -- не правильно (к тому же я не уверен, что ссмогу с этим справиться и ). Есть какое-нибудь решение для делающих рисовать диаграммы с больших количествои срезов клястера?

Всеволод Шмыров
28 января 2016, 06:19

Доброе утро. В 2.1 ymaps-pie-chart-clusterer не ограничений на цвета, так как иконки кластеров рисуются в завимости от iconColor иконок, которые попали в эти кластеры.

erjemin
28 января 2016, 06:19
Спасибо. По ключевому слову "iconColor" все нашел. На Placemark сработало:
{ preset:'islands#circleIcon', iconColor: '#905665'}
И этот цвет унаследует круговая диаграмма клястера?
Всеволод Шмыров
28 января 2016, 06:19

Да. https://tech.yandex.ru/hubs/mapsmodules/?from=mapsjsapi

erjemin
28 января 2016, 06:19
Что-то не работают круговые диаграммы так. Сами Placemark  рисуются разными цветами, а вот круговые диаграммы отображаются белым кругом... 
erjemin
28 января 2016, 06:19

Если внутри Placemark делать устанавливать свойство метки так:

{ preset: 'islands#redIcon'  }


все работает и собираются диаграмки. Но вот если указать:

{ preset: 'islands#circleIcon' ,
  iconColor: 'rgb(20,40,200)'
  }


то сами маркеры отображаются, а диграмки не работают.

Заглянул в код pie-chart-clusterer.js ... ничего не понял, но судя вот по этому кусочку:

var s = /#(.+?)(?=Icon|DotIcon|StretchyIcon|CircleIcon|CircleDotIcon)/,


Идет извлечение слова обозначающего цвет из описателя маркера (типа 'islands#redIcon') и дальше используют его. Если же 'islands#redIcon' не обнаружено, то ничего не работает.

r.yakimkin
28 января 2016, 06:19

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

Я использую Drupal-модуль, который формирует и выводит карту.

И, допустим, в моем js-файле объект-карта хранится как переменная map.

Всеволод Шмыров
28 января 2016, 06:19

Добрый день. В представленном модуле есть пример вставки. По сути, это просто макет для иконок кластеров

r.yakimkin
28 января 2016, 06:19

Ну вот, есть объект map - это карта.

Есть map.getObjects.get(0) - это ссылка на текущий кластер.

Есть var pcClusterer = new PieChartClusterer() ;

Вот каким образом сделать так, чтобы текущим кластеризатором был pcClusterer, либо на текущий кластеризатор навесить свойства pcClusterer ?

Поделитесь, пожалуйста, кодом или дайте ссылку на пример. 

Всеволод Шмыров
28 января 2016, 06:19

Ничего не понял. У вас где-то в коде вызывается new Clusterer - это нужно замениь на PieChartClusterer.

Ссылка на пример в самом первом сообщении.

r.yakimkin
28 января 2016, 06:19

В том-то и дело, что у меня new Clusterer явно не вызывается.

Сайт на CMS Drupal, там есть модуль, который позволяет отображать карты Yandex Maps.

И уже после того, как карта сформировалась и отобразилась, я в своем js-файле могу что-то делать с объектами карты.

Вот я и хочу таким образом заменить текущий кластеризатор своим. Либо текущему кластеризатору назначить новые свойства, которые определены в PieChartClusterer.

Всеволод Шмыров
28 января 2016, 06:19

Без модификации оригинального модуля нормально сделать не получится :( 

r.yakimkin
28 января 2016, 06:19

Ну а хотя бы удовлетворительно - получится ?

Разве невозможно программно стандартный кластеризатор заменить на свой ?

 

Всеволод Шмыров
28 января 2016, 06:19

Можно вытащить из существующего кластера вытянуть все объекты и добавить их в новый кластер. 

r.yakimkin
28 января 2016, 06:19

Да я вот пробовал и это, вылетают непонятные ошибки.

Ниже привожу код

var pcClusterer = new PieChartClusterer();
pcClusterer.COLOURS = {
    "blue" : "0A6CC8",
    "darkblue" : "3D4AE9",
    "darkgreen" : "158B02",
    "darkorange" : "CD6D2D",
    "green" : "1AB500",
    "grey" : "94948E",
    "lightblue" : "4391E7",
    "night" : "143A6B",
    "orange" : "CCA42B",
    "pink" : "E666DD",
    "red" : "E03632",
    "violet" : "A41DE2",
    "white" : "FFFFFF",
    "yellow" : "D4C62C",
    "brown" : "946134",
    "black" : "000000",

    "preset-tid" : "0A6CC8",
    "preset-type-infrastructure" : "0A6CC8",
    "preset-type-areas" : "E03632",
    "preset-type-project" : "000000",
};


var currentClusterer = map.geoObjects.get(0);
var myCollection = [];

for (var i = 1,l = map.geoObjects.getLength(); i<l; i++){
    var obj = map.geoObjects.get(i);
    myCollection[i] = obj;
};

pcClusterer.add(myCollection);
currentClusterer.removeAll();

map.geoObjects.remove(currentClusterer);

map.geoObjects.add(pcClusterer) ; 

Всеволод Шмыров
28 января 2016, 06:19

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

r.yakimkin
28 января 2016, 06:19

Даже при замене 

myCollection[i] = obj; 

на 

myCollection[i-1] = obj;
всё равно не будет работать.

Можете дать ссылку на пример программной замены одного кластеризатора на другой ?
Всеволод Шмыров
28 января 2016, 06:19

Этот пример без модуля drupal мало, чем поможет. Надо отлаживать - сколько элементов в кластере и так далее. Нет возможности скинуть ссылку с вашей попыткой? 

r.yakimkin
28 января 2016, 06:19

Так а для чего в отладке нужен модуль Drupal ?

Есть переменная map - уже работающий объект карты с кластерами. 

Мне просто нужен программной пример замены своего кластеризатора на другой кластеризатор. Если у Вас есть пример - пожалуйста, опубликуйте его.

Иван
13 февраля 2016, 12:11
Добрый день. А можно как-то создавать кластеры для remoteObjectManager с круговой диаграммой? При этом, кластеры не содержат внутри себя объектов, используется серверная кластеризация. В идеале я хочу передавать кластеру только количество и цвета, а он должен просто выводить метку. Как такое можно сделать?
Иван
14 февраля 2016, 03:43
Иван,
Сам справился.