Question

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

以下是我目前工作的example。

以下是我正在使用的代码的简化版本:(您可以点击here获取包含所有源代码的完整版本）

点击

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

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

在zoomEnd上映射：

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

所以，我已经实现了所需的功能，但它并不顺畅。

有没有办法在我们为点击的特征获得的边界上做一些数学运算，这样当我们缩放时我们会缩放到已经修改过的坐标，从而消除了两步动画过程？

Answer 1

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

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

例如，您可以执行类似（在我的头顶之外）使用getBoundsZoom作为多边形边界上的地图对象以确定您将来的缩放，然后使用多边形在项目函数中使用该缩放并创建一个来自多边形边界的新LatLngBound略微偏移。

希望这有帮助！

Answer 2

我有同样的问题，如果比我想象的更容易！您可以在fitBounds方法上设置填充（以及所有平移/缩放方法）

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

这样：

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

leaflet.js缩放到Clicked Feature然后Pan to the Right

2 个答案: