javascript - leaflet.js 缩放到单击的功能，然后向右平移

Question

我希望能够在您单击某个功能时将其设置为适合边界，但是当它放大时，我希望它考虑到一个控制层，该控制层将在放大后出现，并且放大但差不多向左 150 像素。目前我可以用下面的代码完成这个，但不幸的是它不是一个平滑的缩放，因为我当前的方法将使用 fitBounds 缩放，然后一旦缩放它使用 panBy 向左平移 150 像素。如果平移很顺利，这可能不会那么糟糕，也许在等待 250 毫秒之后。理想情况下，我希望能够对传递给 fitBounds 方法的边界进行一些数学计算，以简单地说明向左移动 150 像素。

这是一个 example我目前的工作。

这是我使用的代码的简化版本:(您可以单击 here 以获得包含所有源代码的完整工作版本)

当您点击

function clickFeature(e) {
  var layer = e.target;

  map.fitBounds(layer.getBounds());
}

zoomEnd map :

map.on({
  zoomend: function() {
    map.panBy([150, 0]);
  }
});

这样，我实现了想要的功能，就是不顺利。

有没有一种方法可以对我们为点击功能获得的边界做一些数学运算，以便在我们缩放时放大到一个已经修改过的坐标，从而消除两步动画过程？

Answer 1

首先，您可以使用平移选项来控制动画。这可以帮助您更顺利地过渡。你可以看到那些 here .

其次，您可以使用转换函数计算所需的偏移量。这些可以看here .

例如，您可以做一些事情(在我的脑海中)对多边形边界上的 map 对象使用 getBoundsZoom 来计算您 future 的缩放比例，然后在带有多边形的项目函数中使用该缩放并创建一个来自稍微偏移的多边形边界的新 LatLngBound。

希望这对您有所帮助!