Могу ли я изменить CSS иконки маркера на событии (сделать его больше) с помощью листовки

Question

Я на самом деле использую листовку в сервисе Angular, я создаю значки маркеров следующим образом:

  private getIcon(geoJsonPoint) {
if (geoJsonPoint.properties.actif_id) {
  const category = geoJsonPoint.properties.category.toUpperCase();
  const prioritie = geoJsonPoint.properties.priority.toUpperCase();
  const id = geoJsonPoint.properties.id;
  console.log(geoJsonPoint);
  const url = 'assets/images/' + category + '/' + prioritie + '.svg';
  return L.icon({
    iconUrl: url,
    className: id,
    iconSize: [58, 68],
    iconAnchor: [29, 68],
    popupAnchor: [0, -60]
  });

так что на листовке (popupen) я хочу увеличить свои иконки без установки новой иконки, но только с модификациями CSS. Листовка разрешает подобные вещи или кто-то уже сделал это?

Спасибо за помощь!

Answer 1

Мне удалось решить это с помощью L.DomUtil и setTransform, я выложу код ниже, если он может кому-нибудь помочь. Я уточнил, что хочу преобразовать значок в всплывающем событии.

  private zoomIconOnPopupOpen(scale): void {
this.map.on('popupopen', (event1: any) => {
  let marker = event1.popup._source;
  if (marker._icon) {
    const pos = L.DomUtil.getPosition(marker._icon);
    L.DomUtil.setTransform(marker._icon, pos, scale);
  }
});
this.map.on('popupclose', (event1: any) => {
  let marker = event1.popup._source;
  if (marker._icon) {
    const pos = L.DomUtil.getPosition(marker._icon);
    L.DomUtil.setTransform(marker._icon, pos, 1);
  }
});

}