запросить рендеринг новых кадров в kepler.gl - PullRequest
Новая
       46

запросить рендеринг новых кадров в kepler.gl

0 голосов
/ 20 марта 2019

как я могу запросить рендеринг нового кадра в 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.

1 Ответ

0 голосов
/ 20 марта 2019

На самом деле мне удалось заставить анимацию работать, портировав код в вопросе в kepler.gl app.js следующим образом:

сначала добавьте следующий метод в определение класса App: 

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

затем добавьте componentDidMount () {

this._animate();

добавить в componentWillMount () { // (эта строка вызывается в конструкторе приложения в примерах deck.gl.) 

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

и, наконец, в componentWillUnmount () {

window.cancelAnimationFrame(this._animation);

что (я предполагаю) происходит здесь:

  • вызов this.setState ({}); изменит внутреннее состояние приложения и, таким образом, вызовет рендеринг нового кадра.
  • передача вызова анимации в window.requestAnimationFrame (this._animate); приведет к бесконечному циклу, когда браузер вызывает _animate () 60 раз в секунду.
  • бесконечный цикл будет прерван, когда приложение (компонент) будет отключено.

кто-нибудь с более глубоким пониманием, пожалуйста, не стесняйтесь расширять мое очень поверхностное объяснение

...