请求在 kepler.gl 中渲染新帧

Question

如何在 kepler.gl 中请求渲染新帧？

我创建了一个动画 deck.gl 层，就像 vis.academy 教程中的那个：http://vis.academy/#/custom-layers/5-custom-uniform

而且我还成功将该层与 kepler.gl 集成。
但是，kepler.gl 仅当我移动鼠标或视口时才更新图层（呈现新帧）。

在deckl.gl中，请求新帧是在应用程序的初始化中配置的：

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        width: window.innerWidth,
        height: window.innerHeight,
        longitude: -74,
        latitude: 40.7,
        zoom: 11,
        pitch: 30,
        maxZoom: 16
      }
    };
    this._resize = this._resize.bind(this);
    this._animate = this._animate.bind(this);
    this._onViewportChange = this._onViewportChange.bind(this);
  }

......

  _animate() {
    this.setState({});
    this._animation = window.requestAnimationFrame(this._animate);
  }

然而，到目前为止我还没有弄清楚 kepler.gl 中的相应操作。

Answer 1

实际上，我通过以下方式将问题中的代码移植到 kepler.gl app.js 来设法让动画工作：

首先，在Appclass定义中添加如下方法：

class App extends Component {
  _animate() {
    this.setState({});
    this._animation = window.requestAnimationFrame(this._animate);
  }

然后，加入 componentDidMount() {

this._animate();

加入 componentWillMount() { //（此行在 deck.gl 示例中的 App 构造函数中调用。）

this._animate = this._animate.bind(this);

最后在 componentWillUnmount() {

window.cancelAnimationFrame(this._animation);

这里发生了什么（我假设）：

调用 this.setState({});将更改应用程序的内部状态，从而触发新帧的渲染。
将动画调用传递给 window.requestAnimationFrame(this._animate);将导致无限循环，浏览器每秒调用 _animate() 60 次。
卸载应用程序（组件）时会中断死循环。

任何有更深刻见解的人，请随时扩展我非常肤浅的解释。

请求在 kepler.gl 中渲染新帧

request rendering of new frames in kepler.gl

reactjs

redux

deck.gl

kepler.gl