В песочнице яндекса лежит такой пример https://tech.yandex.ru/maps/jsbox/2.1/scalable_placemarks Разница в том, что у меня не отдельно создаваемая метка, а коллекция меток. Соответственно, в примере создан layout, который применяется к метке(задает ее ширину, хинт и т.д.), а у моих иконок имеется свой пресет, задающий параметры. Как переработать пример для коллекции?
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)
);
});
-
Как в созданный layout добавить стандартный default#imageWithContent ? 13 фев 2018 в 20:42