Question

我已经接管了一个Angular项目，并且在Leaflet JS库中遇到了一些麻烦。具体来说，有些图标可以从工具栏单击，然后单击以将其放置在地图上。您可以在侧边栏菜单中单击所需的图标大小-小（20x20），中（41x41）或大（60x60）。问题在于，在大小之间进行更改时，不会保持所放置图标的中心点。这是单击“大”按钮时执行的代码（页面加载时默认为“中”）：

  $(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...行之后，将标记大小从任何大小更改为任何其他大小时，都可以正确地维护中心。

在传单中调整标记大小，但在角中保持相同的中心点

1 个答案: