Блог

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

   $(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
  };
}
  

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

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

Заранее благодарю вас.

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

 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... линии центры были должным образом сохранены при изменении размера метки с любого размера на любой другой размер.