Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/441.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript expndtw-1.js缩放到单击的功能,然后向右平移_Javascript_Maps_Leaflet - Fatal编程技术网

Javascript expndtw-1.js缩放到单击的功能,然后向右平移

Javascript expndtw-1.js缩放到单击的功能,然后向右平移,javascript,maps,leaflet,Javascript,Maps,Leaflet,我希望当你点击一个功能时,它能显示边界,但当它放大时,我希望它考虑到一个控制层,一旦放大,它就会显示出来,并放大到左侧大约150px。目前,我可以用下面的代码实现这一点,但不幸的是,这不是一个平滑的缩放,因为我当前的方法将使用fitBounds进行缩放,然后在缩放后使用panBy向左平移150px。如果平移是平稳的,这也不会太糟糕,也许在等待250毫秒之后。理想情况下,我希望能够对传递给fitBounds方法的边界进行一些数学计算,以简单地解释150px向左移动 这是我目前工作的一个例子 下面是

我希望当你点击一个功能时,它能显示边界,但当它放大时,我希望它考虑到一个控制层,一旦放大,它就会显示出来,并放大到左侧大约150px。目前,我可以用下面的代码实现这一点,但不幸的是,这不是一个平滑的缩放,因为我当前的方法将使用fitBounds进行缩放,然后在缩放后使用panBy向左平移150px。如果平移是平稳的,这也不会太糟糕,也许在等待250毫秒之后。理想情况下,我希望能够对传递给fitBounds方法的边界进行一些数学计算,以简单地解释150px向左移动

这是我目前工作的一个例子

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

当您单击时

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

  map.fitBounds(layer.getBounds());
}
zoomEnd上的地图:

map.on({
  zoomend: function() {
    map.panBy([150, 0]);
  }
});
因此,我已经实现了所需的功能,但它并不平滑


是否有一种方法可以只对单击功能得到的边界进行一些数学运算,以便在缩放时缩放到已修改的坐标,从而消除两步动画过程?

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

其次,可以使用转换函数计算所需的偏移量。这些都可以看到

例如,您可以对多边形边界上的贴图对象使用getBoundsZoom(从头顶开始)来计算未来的缩放,然后在项目函数中对多边形使用该缩放,并从稍微偏移的多边形边界创建一个新的LatLngBound


希望这有帮助

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

因此:


如果有人愿意在这里发表评论,我已经很久没用过传单了。如果有人建议其中哪一个是正确的,我会接受答案。我认为两者都是正确的。你可以自己计算我提到的新边界,也可以使用填充(在我链接的动画选项中)谢谢你的回复@hassassin,我选择你的答案是正确的。如果有人愿意在这里发表评论-我已经很久没有使用传单了。如果有人建议哪一个是正确的,我会接受答案。
map.fitBounds(layer.getBounds(),{paddingBottomRight:[150,0]});