Leaflet.js 缩放到单击的特征，然后向右平移答案

【问题标题】：leaflet.js Zoom to Clicked Feature and then Pan to the RightLeaflet.js 缩放到单击的特征，然后向右平移
【发布时间】：2013-02-09 10:04:18
【问题描述】：

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

这是我目前正在工作的example。

这是我正在使用的代码的简化版本：（您可以单击here 以获得包含所有源代码的完整版本）

点击时

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

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

zoomEnd 上的地图：

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

所以，我已经实现了想要的功能，但是并不顺利。

有没有办法对我们获得的点击特征的边界进行一些数学运算，以便在我们缩放时放大到已经修改的坐标，从而消除两步动画过程？

【问题讨论】：

标签： javascript maps leaflet

【解决方案1】：

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

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

例如，您可以执行类似（不由自主地）对多边形边界上的地图对象使用 getBoundsZoom 来计算您未来的缩放，然后在项目函数中使用该缩放与多边形并创建一个新的 LatLngBound 从稍微偏移的多边形边界。

希望这会有所帮助！

【讨论】：

如果有人愿意在这里发表评论 - 我已经很久没有使用传单了。如果有人建议其中哪一个是正确的，我会接受答案。
我认为两者都是正确的。您可以按照我提到的那样自己计算新的边界，也可以使用填充（在我链接的动画选项中）
感谢@hassassin 的回复，我选择了您的正确答案。

【解决方案2】：

我也遇到了同样的问题，而且比我想象的要容易！您可以在 fitBounds 方法（以及所有平移/缩放方法）上设置填充

http://leafletjs.com/reference.html#map-fitboundsoptions

所以：

map.fitBounds(layer.getBounds(),{paddingBottomRight:[150,0]});

【讨论】：

如果有人愿意在这里发表评论 - 我已经很久没有使用传单了。如果有人建议其中哪一个是正确的，我会接受答案。