Изменение размера маркеров в листовке, но с сохранением центральной точки в углу

Question

Я взял на себя проект Angular и у меня возникли проблемы с библиотекой Leaflet JS.В частности, есть значки, которые можно щелкнуть на панели инструментов, а затем щелкнуть, чтобы разместить их на карте.Есть боковое меню, где вы можете щелкнуть по значку нужного размера - Маленький (20x20), Средний (41x41) или Большой (60x60).Проблема заключается в том, что при изменении размеров центральная точка размещенных значков не сохраняется.Вот код, который выполняется при нажатии кнопки Large (средний размер по умолчанию при загрузке страницы):

  $(document).on("click", ".largeicon", function () {
    console.log("Large clicked!");
    drawnItems.eachLayer(function (layer) {
      if (layer instanceof L.Marker) {
        if (layer.dragging) {
          type_marker = layer._icon.classList[1];

          L.Icon.Large = L.Icon.Default.extend({
            options: {
              iconSize: new L.Point(60, 60),
              iconUrl: layer.dragging._marker._icon.currentSrc,
              iconRetinaUrl: layer.dragging._marker._icon.currentSrc,
            }
          });

          var large = new L.Icon.Large();
          //console.log("new L.Icon.Large", large);
          if (map.getBounds().contains(layer.getLatLng())) {
            layer.setIcon(large);
            layer._icon.style[L.DomUtil.TRANSFORM + 'Origin'] = '30px 30px 0px';
          }
        }
      }
    });
    L.Icon.Default.prototype.options.iconSize = [60, 60];
    pinsize = 60;
  });
}

И у меня есть функция, которая (должна) правильно рассчитать новую позициюмаркер, чтобы поддерживать одну и ту же центральную точку:

function getNewLatLng(style, originalLat, originalLng, newWidth, newHeight) {
  var originalWidth = style["width"].slice(0, -2);
  var originalHeight = style["height"].slice(0, -2);

  var newLat = originalLat - ((newWidth - originalWidth) / 2);
  var newLng = originalLng - ((newHeight - originalHeight) / 2);

  return {
    newLat: newLat,
    newLng: newLng
  };
}

Используя консольное ведение журнала, кажется, что этот метод правильно рассчитывает новые смещения, но всякий раз, когда я нажимаю между большими и средними размерами, маркер медленно перемещается покарта с каждым переключателем.

Может ли кто-нибудь предоставить некоторую помощь / руководство о том, как мне установить обновленную позицию маркера, чтобы одна и та же центральная точка поддерживалась между изменениями размера?

Заранее спасибо.

Answer 1

Итак, после долгих проб и ошибок я наконец понял, как сохранить одинаковую центральную точку маркеров. Мне нужно обновить код до этого:

if (map.getBounds().contains(layer.getLatLng())) {
            layer.setIcon(large);
            layer._icon.style[L.DomUtil.TRANSFORM] = "translate3d(" + nc.newX + "px," + nc.newY + "px,0px) rotateZ(0deg)";
            layer._icon.style[L.DomUtil.TRANSFORM + 'Origin'] = '30px 30px 0px';
          }

После добавления строки [L.DomUtil.TRANSFORM] = "translate3d... центры были правильно сохранены при изменении размера метки с любого размера на любой другой размер.