1

В песочнице яндекса лежит такой пример https://tech.yandex.ru/maps/jsbox/2.1/scalable_placemarks Разница в том, что у меня не отдельно создаваемая метка, а коллекция меток. Соответственно, в примере создан layout, который применяется к метке(задает ее ширину, хинт и т.д.), а у моих иконок имеется свой пресет, задающий параметры. Как переработать пример для коллекции?

1 ответ 1

1

Привет, если вы используете ObjectManager тогда вы можете переопределить опцию geoObjectIconLayout и в ней задать шаблон для меток. Вот пример:

var createChipsLayout = function (calculateSize, map) {
// Создадим макет метки.
    var Chips = ymaps.templateLayoutFactory.createClass(
        '<div class="placemark"></div>',
        {
            build: function () {
                Chips.superclass.build.call(this);
                if (!this.inited) {
                    this.inited = true;
                    // Получим текущий уровень зума.
                    var zoom = map.getZoom();
                    // Подпишемся на событие изменения области просмотра карты.
                    map.events.add('boundschange', function () {
                        // Запустим перестраивание макета при изменении уровня зума.
                        var currentZoom = map.getZoom();
                        if (currentZoom != zoom) {
                            zoom = currentZoom;
                            this.rebuild();
                        }
                    }, this);
                }
                var options = this.getData().options,
                    // Получим размер метки в зависимости от уровня зума.
                    size = calculateSize(map.getZoom()),
                    element = this.getParentElement().getElementsByClassName('placemark')[0],
                    // По умолчанию при задании своего HTML макета фигура активной области не задается,
                    // и её нужно задать самостоятельно.
                    // Создадим фигуру активной области "Круг".
                    circleShape = {type: 'Circle', coordinates: [0, 0], radius: size / 2};
                // Зададим высоту и ширину метки.
                element.style.width = element.style.height = size + 'px';
                // Зададим смещение.
                element.style.marginLeft = element.style.marginTop = -size / 2 + 'px';
                // Зададим фигуру активной области.
                options.set('shape', circleShape);
            }
        }
    );

    return Chips;
};

ymaps.ready(function () {
    var map = new ymaps.Map('map', {
        center: [55.755249, 37.617437],
        zoom: 4
    });

    var placemarks = {
        type: 'FeatureCollection',
      features: [
        {
            type: 'Feature',
          id: 0,
          geometry: {
            type: 'Point',
            coordinates: [55.755249, 36.317437]
          },
          properties: {
            hintContent: 'Метка 1'
          }
        },
        {
            type: 'Feature',
          id: 1,
          geometry: {
            type: 'Point',
            coordinates: [55.755249, 37.617437]
          },
                    properties: {
            hintContent: 'Метка 2'
          }
        }
      ]
    };

    var om = new ymaps.ObjectManager();
    om.add(placemarks.features);
    map.geoObjects.add(om);
    om.options.set("geoObjectIconLayout", createChipsLayout(function (zoom) {
            // Минимальный размер метки будет 8px, а максимальный 200px.
            // Размер метки будет расти с квадратичной зависимостью от уровня зума.
            return Math.min(Math.pow(zoom, 2) + 8, 200);
        }, map)
    );

});

https://jsfiddle.net/he3fhndf/6/

1
  • Как в созданный layout добавить стандартный default#imageWithContent ? 13 фев 2018 в 20:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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