Как передать контент кастомным иконкам и балуну через ObjectManager Yandex.Maps?

Question

[sinneren]

Иконки должны быть полностью кастомные и image не подходит, т.к. внутри должен быть управляемый стилями контент, а именно: в кластере количество объектов с моим шрифтом, в объекте цена. В балуне объекта своя инфа, в балуне кластера можно обойтись без особой кастомизации.

Я делал так: собирал кластер, через фабрику сделал шаблоны, и ок, кластеры есть, иконки их нужные, балун кластера открывается. Но иконки плейсмарков обычные, как бы я не задавал их.
Переделал так: удалил кластеризатор и поставил ObjectManager. Теперь с кластерами всё норм, иконки обычных объектов нужные, но как туда передать контент ? Контент балуна?

ymaps.ready(function () {
  // Создаем собственный макет с информацией о выбранном геообъекте.
  var customClusterIconLayout = ymaps.templateLayoutFactory.createClass(
     '<div class="balloon__icon">$[properties.geoObjects.length]</div>'),
      clusterIcons = [
      {
         href: 'map_bubble.svg',
         size: [46, 55],
         // Отступ, чтобы центр картинки совпадал с центром кластера.
         offset: [-23, -55]
      }],
      customItemContentLayout = ymaps.templateLayoutFactory.createClass(
        // Флаг "raw" означает, что данные вставляют "как есть" без экранирования html.
        '<h2 class=ballon_header>{{ properties.balloonContentHeader|raw }}</h2>' +
        '<div class=ballon_body>{{ properties.balloonContentBody|raw }}</div>' +
        '<div class=ballon_footer>{{ properties.balloonContentFooter|raw }}</div>'
      );
  var customPlacemarkLayout = ymaps.templateLayoutFactory.createClass('<div class="placemark_layout_container">{{cost}}</div>');
  
  var mapCenter = [54.738363, 55.965014],
      map = new ymaps.Map('YMapsID', {
          center: mapCenter,
          zoom: 14,
          controls: []
      });
      objectManager = new ymaps.ObjectManager({
        // Чтобы метки начали кластеризоваться, выставляем опцию.
        clusterize: true,
        // ObjectManager принимает те же опции, что и кластеризатор.
      });
      
  objectManager.objects.options.set({
    // Опции.
    // Необходимо указать данный тип макета.
    iconLayout: customPlacemarkLayout,
    iconShape: {type: 'Circle', coordinates: [0, 0], radius: 20},
    //balloonContentHeader: 'Метка №' + i,
    //balloonContentBody: Objects[i].address,
  });
  objectManager.clusters.options.set({
    clusterDisableClickZoom: true,
    clusterOpenBalloonOnClick: true,
    groupByCoordinates: true,
    clusterIcons: clusterIcons,
    clusterIconContentLayout: customClusterIconLayout,
    // В данном примере балун никогда не будет открываться в режиме панели.
    clusterBalloonPanelMaxMapArea: 0,
    // Устанавливаем размер макета контента балуна (в пикселях).
    clusterBalloonContentLayoutWidth: 350,
    // Устанавливаем собственный макет.
    clusterBalloonItemContentLayout: customItemContentLayout,
    // Устанавливаем ширину левой колонки, в которой располагается список всех геообъектов кластера.
    clusterBalloonLeftColumnWidth: 120
  });
  map.geoObjects.add(objectManager);
  // Заполняем кластер геообъектами со случайными позициями.
  
  objectManager.add(data);
  
});

Answer 1

[sinneren]

ymaps.ready(function () {
  var mapCenter = [54.738363, 55.965014],
      map = new ymaps.Map('map', {
          center: mapCenter,
          zoom: 12,
          controls: []
      }),
      placemarks = [];
  var customClusterIconLayout = ymaps.templateLayoutFactory.createClass(
     '<div class="balloon__icon">$[properties.geoObjects.length]</div>'),
      clusterIcons = [
      {
         href: 'map_bubble.svg',
         size: [46, 55],
         // Отступ, чтобы центр картинки совпадал с центром кластера.
         offset: [-23, -55]
      }],
      customItemContentLayout = ymaps.templateLayoutFactory.createClass(
        // Флаг "raw" означает, что данные вставляют "как есть" без экранирования html.
        '<h2 class=ballon_header>{{ properties.balloonContentHeader|raw }}</h2>' +
        '<div class=ballon_body>{{ properties.balloonContentBody|raw }}</div>' +
        '<div class=ballon_footer>{{ properties.balloonContentFooter|raw }}</div>'
      );
  var customPlacemarkLayout = ymaps.templateLayoutFactory.createClass(
        '<div class=placemark_layout_container>{{ properties.cost }}</div>'
      );
  // Создаем собственный макет с информацией о выбранном геообъекте.
  var customBalloonContentLayout = ymaps.templateLayoutFactory.createClass([
          '<h2 class=ballon_header>{{ properties.rooms }}</h2>'
      ].join(''));
  
  
  var objectManager = new ymaps.ObjectManager({
      clusterize: true,
      clusterDisableClickZoom: true,
      clusterOpenBalloonOnClick: true,
      clusterBalloonPanelMaxMapArea: 0,
      clusterBalloonMaxHeight: 200,
  });
  objectManager.objects.options.set({
    iconLayout: customPlacemarkLayout,
    iconShape: {
      type: 'Rectangle', 
      coordinates: [
        [-70, -60], [70, 0]
      ]
    },
    balloonContentLayout: customBalloonContentLayout,
  });
  objectManager.clusters.options.set({
    clusterIcons: clusterIcons,
    clusterIconContentLayout: customClusterIconLayout,
  });
  // Заполняем кластер геообъектами со случайными позициями.
  for (var i = 0, l = data.features.length; i < l; i++) {
    var placemark = {
        type: 'Feature',
        id: i,
        geometry: {
          type: 'Point',
          coordinates: data.features[i].geometry.coordinates,
        },
        properties: {
          // Устаналиваем данные, которые будут отображаться в балуне.
          balloonContentHeader: 'Заголовок метки №' + (i + 1),
          balloonContentBody: 'Информация о метке №' + (i + 1),
          placemarkId: i,
          cost: data.features[i].properties.cost,
          rooms: data.features[i].properties.rooms,
        }
    };
    placemarks.push(placemark);
  }
  
  objectManager.add(placemarks);
  map.geoObjects.add(objectManager);
});

Comments

[SerSH93]

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