javascript - 没有react.js的deck.gl + tripslayer

如何在不反应的情况下启用TripsLayer动画？ TripsLayer示例使用React，我真的不知道如何将其转换为纯js。请在下面的代码中查看“动画”功能。我试图更新图层的状态，但是它不起作用(没有TripsLayer的动画)。我不知道该在哪里分配“时间”变量。

Trips的演示层:https://deck.gl/#/examples/custom-layers/trip-routes

React版本我的代码:https://github.com/uber/deck.gl/blob/master/examples/website/trips/app.js

Trips的文档层:https://github.com/uber/deck.gl/tree/master/modules/experimental-layers/src/trips-layer

我的代码:

import {MapboxLayer} from '@deck.gl/mapbox';
import {TripsLayer} from '@deck.gl/experimental-layers';
import mapboxgl from 'mapbox-gl';

class App
{
  constructor()
  {
    this.stateInfo = { time: 600 };
  }

  get state()
  {
    return this.stateInfo;
  }

  animate() {
    var loopLength = 18000; // unit corresponds to the timestamp in source data
    var animationSpeed = 30; // unit time per second

    const timestamp = Date.now() / 1000;
    const loopTime = loopLength / animationSpeed;

    var time = Math.round(((timestamp % loopTime) / loopTime) * loopLength);

    // HOW SHOULD I USE time VARIABLE???

    window.requestAnimationFrame(this.animate.bind(this));
  }
}

var obido = new App();

var tripsLayerObido = new TripsLayer({
  id: 'trips',
  data: 'trips/tripsKR.json',
  getPath: d => d.segments,
  getColor: d => (d.vendor === 0 ? [253, 128, 93] : [23, 184, 190]),
  opacity: 0.6,
  strokeWidth: 30,
  trailLength: 180,
  currentTime: obido.state.time
});

const LIGHT_SETTINGS = {
  lightsPosition: [-74.05, 40.7, 8000, -73.5, 41, 5000],
  ambientRatio: 0.05,
  diffuseRatio: 0.6,
  specularRatio: 0.8,
  lightsStrength: [2.0, 0.0, 0.0, 0.0],
  numberOfLights: 2
};

export const INITIAL_VIEW_STATE = {
  longitude: 19.93,
  latitude: 50.03,
  zoom: 12.8,
  maxZoom: 19,
  pitch: 60,
  bearing: 0
};


mapboxgl.accessToken = "XXX";
const map = new mapboxgl.Map({
  container: 'app',
  style: 'mapbox://styles/elninopl/cjnlge6rl094w2so70l1cf8y5',
  center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
  zoom: INITIAL_VIEW_STATE.zoom,
  pitch: INITIAL_VIEW_STATE.pitch,
  layers: [tripsLayerObido]
});

map.on('load', () => {
  obido.animate(0);
});

最佳答案

请尝试setProps，它会使我的旅程图层更新:

this.tripsLayer.setProps({ currentTime: this.currentTime });