Клуб API Карт

Клуб API Карт

иконка точки при работе с кластерами

Пост в архиве.

Работаю в API 2.0

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

Надо слелать так, что бы при большом масштабе, небыло нагромождение иконок близких иконки.

Для этого вместо Placemark прменил работу с Clusterer, все работает, кластеры большие и маленькие есть, балуны с содержанием есть, а вот что делать с иконками?

Я так понял, что clusterIcons позволяет менять иконки кластеров в зависимости от количества  объектов (точек) в нем? - это ладно, хорошо.

Вопрос следующий: как мне прикрутить собственные иконки к точкам, так как было можно с Placemark ?

 

 

 

 Вот как это было с Placemark :

placemark_ciolkovskogo = new ymaps.Placemark([54.552553,40.868454], {

hintContent:"Музей К.Э. Циолковского",

balloonContentBody: "Музей К.Э. Циолковского",

balloonContentFooter: '<a href="/personal/regional/ciolkovskogo/about" target="_parent">перейти в музей</a>'

}, {

iconLayout:"default#imageWithContent",        // Указываем, что макет иконки будет с контентом

iconImageHref:"/fotos/1fa72931776268505a1398f95c9088ef.png",

iconImageSize:[60, 60],                                  // Размер изображения иконки

iconContentOffset:[0, 0]                                 // Пиксельный сдвиг содержимого иконки относительно родительского элемента

}) ;

 

а так сейчас с   Clusterer:

 

myGeoObjects[2] = new ymaps.GeoObject({

geometry: {type: "Point", coordinates: [54.552553, 40.868454]},

properties: {

hintContent:"Музей К.Э. Циолковского",

clusterCaption: 'Музей К.Э. Циолковского',

balloonContentBody: 'Музей К.Э. Циолковского<br><a href="/personal/regional/ciolkovskogo/about" target="_parent">перейти в музей</a>'

} } ) ;

 

 

  

12 комментариев
Авторизуйтесь, чтобы оставить комментарий
mari-na-bzzz
28 января 2016, 04:46

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

clusterer.options.set('clusterIconlayout': myLayout);

Обратите внимание, что при полной замене макета иконки опции clusterIcons и clusterNumbers не будут иметь смысла - они работают только для стандартной реализации макета.

Если нужно менять вид иконки в зависимости от количества объектов в кластере, придется самостоятельно запрограммировать эту логику либо в лейауте, либо при переопределении функции clusterer.createCluster.

sashulyak
28 января 2016, 04:46

А если у меня, скажем, вот такой макет иконки кластера с уровнями вложенности и собственными стилями, как задать место вывода цифры? И вообще возможно ли задание такого резинового макета для метки кластера?


 99999999

 
sashulyak
28 января 2016, 04:46

Попробовал сделать деревянно-дубово:

$('.ymaps-default-cluster').each(function () {
    var text = $(this).text();
    $(this).empty();
    var myLayout = $('' + text + '');
    $(this).append(myLayout);
    $(this).width($(this).find('.cluster-left').outerWidth() + $(this).find('.cluster-center').outerWidth() + $(this).find('.cluster-right').outerWidth() + 11);
});

Иконки заменились, но при масштабировании то их опять надо менять. И тут возникает проблема: вешаем обработчик на событие boundschange, начинаем заменять иконки, но они ещё не отрисовались и элементов управления с такими классами на странице ещё нет. Соответственно, ничего не меняется.

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

 

sashulyak
28 января 2016, 04:46

Ну в общем по-деревянному таки сделал: переопределил функцию createCluster у кластеризатора (оно было раньше уже переопределено), а там заменил иконки по событию addtomap у кластера.

mari-na-bzzz
28 января 2016, 04:46

А почему, кстати, не подошли стандартные макеты иконки?

yaadver
28 января 2016, 04:46
Не подкините ссылку на список стандартных иконок для кластеров.
mari-na-bzzz
28 января 2016, 04:46

Стандартная метка у нас пока только одна. Но вы же можете с помощью clusterIcons подставлять свои картинки для кластера. В документации как раз пример на эту тему.

mari-na-bzzz
28 января 2016, 04:46

Внутри лейаута можно получить доступ к данным и опциям кластера.

var myIconLayout = ymaps.templateLayoutFactory.createClass(">$[properties.geoObjects.length]");

cluster.options.set('clusterIconLayout', myIconLayout);

sashulyak
28 января 2016, 04:46

Не работает. Метки остаются стандартными. Вот код:

 

var myIconLayout = ymaps.templateLayoutFactory.createClass("$[properties.geoObjects.length]");
clusterer.options.set('clusterIconLayout', myIconLayout); 

Уже и для кластера пробовал и для кластеризатора. 

mari-na-bzzz
28 января 2016, 04:46

Да, действительно эта опция иконки не "просачивается" до кластеризатора. Это баг, поправим.

Пока могу предложить такое решение - 

clusterer.createCluster = function(center, geoObjects) {

      return new ym.Placemark(center, {geoObjects: geoObjects}, {iconLayout: myIconLayout});

}

В таком случае кластерами будут обычные иконки - для них опция работает как надо.

Правда для них не применятся стили кластерных балунов :(

sashulyak
28 января 2016, 04:46

А мне они и не нужны, у меня открываются вместо них оверлеи, не относящиеся к карте) Клёво! Спасибо!

fibildar
28 января 2016, 04:46

Точно так же создаете Placemark -и с нужными иконками и добавляете их в кластер. 

 

 

clusterer = new ymaps.Clusterer({ 

    ...

});

...

myGeoObjects[i] = new ymaps.Placemark(

    // Координаты метки

   [...], 

    {

        // Свойства метки: .

    }, 

    {

        // Опции метки: .

        //iconImageHref: "http://...",

        preset: 'twirl#blueStretchyIcon'

    }

); 

clusterer.add(myGeoObjects);

myMap.geoObjects.add(clusterer);