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，从而使动画工作起来：

首先，将以下方法添加到App类定义中：

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

然后，添加componentDidMount() {

this._animate();

add in componentWillMount() {//(在deck.gl示例中的应用程序构造函数中调用这一行)。

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

最后在componentWillUnmount() {

window.cancelAnimationFrame(this._animation);

(我猜)这里发生了什么：

• 调用this.setState({})；将更改应用程序的内部状态，从而触发新帧的呈现。
• 将动画调用传递给window.requestAnimationFrame(this._animate)；将导致一个没完没了的循环，浏览器每秒调用_animate() 60次。
• 当App (组件)被卸载时，无止境的循环将被中断。

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