Блог

Я работаю над тем, чтобы получить deck.gl для работы вместе с листовкой (https://github.com/visgl/deck.gl/issues/5588).

В принципе, когда карта листовки перемещается или масштабируется, deck.gl представление должно быть синхронизировано, чтобы все отображалось в нужных местах. Похоже, здесь это работает нормально: https://codepen.io/clebal/pen/rNjdzzr

Он использует границы карты для обновления deck.gl. Как видно из кода, это плохо работает во время масштабирования (deck.gl не анимируется рядом с листовкой).

Насколько я понимаю, листовка анимируется с помощью CSS, поэтому на самом деле нет никаких промежуточных состояний, к которым можно подключиться.

Обходной путь, который я видел, заключается в переопределении внутреннего _animateMove метода, вызове и использовании таймеров для обновления deck.gl периодически в течение 250 мс Листовка занимает время, необходимое для завершения анимации масштабирования.

Эта часть все относительно проста, проблема, с которой я сталкиваюсь, заключается в том, как на самом деле рассчитать, какой будет ограничивающая рамка при дробном увеличении. например, 25 мс в анимации (упрощающее предположение, что анимация CSS линейна, что на самом деле не так), мне нужно будет рассчитать, какой будет ограничивающая рамка для карты при увеличении 11.10 (сама карта не нуждается в обновлении). Я надеюсь, что затем смогу использовать эту ограничивающую рамку для выполнения вычислений на deck.gl сбоку.

Поддерживает ли листовка этот расчет из коробки? Есть ли какой-либо код в базе кода Листовки, на который я могу сослаться, чтобы помочь достичь этого (или даже с помощью внешних инструментов, таких как turf и т. Д.)?

Насколько я понимаю, листовка анимируется с помощью CSS, поэтому на самом деле нет никаких промежуточных состояний, к которым можно подключиться.

Верно. Листовка ожидает, что ее слои будут полностью перерисованы, как только анимация масштабирования CSS закончится.

Таким образом, способ решения этой проблемы, основанный на брошюре, состоит в том, чтобы не обновлять свой deck.gl холст во время анимации масштабирования CSS; и способ сделать это-иметь два пути обновления центра и границ вашего холста: один во 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 холст.

Поддерживает ли листовка этот расчет из коробки? Есть ли какой — либо код в базе кода Листовки, на который я могу сослаться, чтобы помочь в этом ?

Нет; но посмотрите на https://github.com/mapbox/unitbezier вместо этого.

Вероятно, вы хотите создать экземпляр кривой unitbezier, например unitBezier(0, 0, 0.25, 1) (обратите внимание на сходство с кодом transition: cubic-bezier(0,0,0.25,1); CSS), а затем решить эту кривую для значений в пределах 0 и 1, в зависимости от того, насколько вы продвинулись в анимации.

Имейте в виду, что этот метод может задержать вашу графику на один кадр после/после CSS-анимации листовки.