使用Leaflet计算分数缩放
我正在努力让deck.gl 与传单（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方法并调用和使用计时器在整个 250ms Leaflet 中定期更新deck.gl 以完成缩放动画。
这部分都相对简单，我面临的挑战是如何实际计算在分数缩放下的边界框。例如进入动画 25 毫秒（简化假设 CSS 动画是线性的，但实际上并非如此），我需要能够计算缩放 11.10 时地图的边界框是什么（地图本身不需要更新）。我希望然后可以使用这个边界框在deck.gl 端执行计算。
Leaflet 是否支持这种开箱即用的计算？我可以参考 Leaflet 代码库中的任何代码来帮助实现这一目标（甚至使用 turf 等外部工具）？
回答
我的理解是 Leaflet 使用 CSS 制作动画，因此确实没有任何中间状态可供利用。
这是正确的。一旦 CSS 缩放动画结束，Leaflet 期望其图层能够完全重绘。
因此，Leaflet-y 解决此问题的方法是在 CSS 缩放动画期间不更新您的 Deck.gl 画布；这样做的方法是有两种更新画布中心和边界的路径：一种是在zoom事件期间，一种是在animzoom事件期间。
理解其工作原理的关键在于以下代码片段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 曲线unitBezier(0, 0, 0.25, 1)（注意与transition: cubic-bezier(0,0,0.25,1);CSS 代码的相似性），然后根据您进入动画的程度来求解 0 和 1 之间的值的曲线。
请注意，此技术可能会使您的图形在 Leaflet CSS 动画之后/之后延迟一帧。