使用 Leaflet 计算分数缩放

Question

我正在努力让 deck.gl 与 Leaflet (https://github.com/visgl/deck.gl/issues/5588) 一起工作。

基本上，当 Leaflet 地图平移或缩放时，deck.gl 视图需要同步，以便在正确的位置呈现。这似乎在这里工作正常：https://codepen.io/clebal/pen/rNjdzzr

它使用地图边界来更新deck.gl。正如在 codepen 中显而易见的那样，这在缩放期间效果不佳（deck.gl 不会与 Leaflet 一起制作动画）。

我的理解是 Leaflet 使用 CSS 进行动画处理，因此实际上没有任何中间状态可以利用。

我见过的一种解决方法是覆盖内部 _animateMove 方法，并在 Leaflet 完成缩放动画所需的 250 毫秒内定期调用和使用计时器来更新 deck.gl。

这部分都比较简单，我面临的挑战是如何实际计算小数缩放时的边界框。例如进入动画 25 毫秒（简化假设 CSS 动画是线性的，但实际上并非如此），我需要能够计算缩放 11.10 时地图的边界框是什么（地图本身没有不需要更新）。然后我希望可以使用这个边界框在deck.gl 端执行计算。

Leaflet 是否支持这种计算？我可以参考 Leaflet 代码库中的任何代码来帮助实现这一目标（甚至使用 turf 等外部工具）？

Answer 1

我的理解是 Leaflet 使用 CSS 进行动画处理，因此实际上没有任何中间状态可以利用。

没错。 Leaflet 期望在 CSS 缩放动画结束后，其图层将全部重绘。

因此，解决此问题的 Leaflet-y 方法是不在 CSS 缩放动画期间更新您的 deck.gl 画布；做到这一点的方法是有两种更新画布中心和边界的路径：一种在zoom 事件期间，另一种在animzoom 事件期间。

了解其工作原理的关键在于this fragment of code from L.Renderer：

_onAnimZoom: function (ev) {
    this._updateTransform(ev.center, ev.zoom);
},

_onZoom: function () {
    this._updateTransform(this._map.getCenter(), this._map.getZoom());
},

因此，在一种情况下，您信任地图的中心和缩放，在另一种情况下，您信任缓存的中心+缩放，并让 CSS 转换调整您的 deck.gl 画布的大小。

Leaflet 是否支持这种计算？我可以参考 Leaflet 代码库中的任何代码来帮助实现这一目标吗？

没有；但请查看https://github.com/mapbox/unitbezier。

您可能想要实例化一个像 unitBezier(0, 0, 0.25, 1) 这样的 unitbezier 曲线（注意与 transition: cubic-bezier(0,0,0.25,1); CSS 代码的相似性），然后根据您在动画中的距离来求解 0 和 1 之间的值的曲线。

请注意，这种技术可能会使您的图形在 Leaflet CSS 动画之后/之后滞后一帧。