带有react-leaflet的平滑滚动

Question

我正在尝试在我的反应传单项目中创建平滑的缩放。

我知道这可以用 this post 中所说的 vanilla leaflet 和 smoothWheelZoom 实现，但是知道 vanilla leaflet 与 React 不兼容，我想知道如何使用这个库（或任何等效库） .

我尝试将

zoomSnap

属性设置为 0，但缩放仍然会以很大的增量进行，而我希望它需要更多时间并且更平滑。

我的地图从 2.5

minZoom

变为 5

maxZoom

- 也许增加地图大小会增加从最小到最大所需的鼠标滚动次数？ （现在需要 5 个卷轴）。尽管如此，按增量缩放并不是我正在寻找的。

我该如何进行？

Answer 1

哟老兄，

所以您希望为您的 React-Leaflet 项目添加一些平滑的缩放操作，是吗？完全明白你从哪里来。 Leaflet 的 smoothWheelZoom 功能听起来很不错，但将普通的 Leaflet 与 React 集成有时可能会有点麻烦。

您可以尝试的一件事是调整 ZoomSnap 道具，但似乎您已经尝试过。如果它仍然没有给你带来你想要的那种流畅的感觉，还有一些技巧。

首先，增加地图大小可能确实有帮助。如果您将地图放大，可能需要更多的滚动才能放大或缩小，从而为您提供更流畅的整体体验。另外，它可能看起来更酷，有更多的空间可以玩。

但是如果您仍然没有感觉到，您可能想查看一些与 Leaflet 配合良好的 React 特定库。有一些提供平滑的缩放功能，甚至可以自定义动画，可以让您的地图大放异彩