Javascript deck.gl+tripslayer不带react.js

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

TripsLayer演示：

反应版本我的代码：

TripsLayer的文档：

我的代码：

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，它会使我的trips层更新：

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

是的，它起作用了

function animate(timestamp) {
  var timestamp = Date.now() / 1000;
  var loopTime = loopLength / animationSpeed;
  curtime= ((timestamp % loopTime) / loopTime) * loopLength;
  requestAnimationFrame(animate);
  tripLayer.setProps({ currentTime: curtime });
}

我在这里有点晚了，但是有一个例子是在没有React的情况下使用deck.gl TripsLayer和脚本API

<script src="https://unpkg.com/deck.gl@^8.4.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/carto@^8.4.0/dist.min.js"></script>

<script src="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.js"></script>
<link href="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.css" rel="stylesheet" />

<div id="map" style="width: 100vw; height: 100vh"></div>

const ambientLight = new deck.AmbientLight({
  color: [255, 255, 255],
  intensity: 1.0
});

const pointLight = new deck.PointLight({
  color: [255, 255, 255],
  intensity: 2.0,
  position: [-74.05, 40.7, 8000]
});

const lightingEffect = new deck.LightingEffect({ ambientLight, pointLight });

const material = {
  ambient: 0.1,
  diffuse: 0.6,
  shininess: 32,
  specularColor: [60, 64, 70]
};

const theme = {
  buildingColor: [74, 80, 87],
  trailColor0: [253, 128, 93],
  trailColor1: [23, 184, 190],
  material,
  effects: [lightingEffect]
};

const LOOP_LENGTH = 1800;
const ANIMATION_SPEED = 0.4;

async function initialize() {
  deck.carto.setDefaultCredentials({
    username: 'public',
    apiKey: 'default_public',
  });

  // Fetch Data from CARTO
  // Notice that you can use any Deck.gl layer with CARTO datasets getting GeoJSON data from CARTO's API. This method is recommended for complex layers with datasets below 50Mb
  const tripsUrl = 'https://public.carto.com/api/v2/sql?q=SELECT the_geom, vendor, timestamps FROM sf_trips_v7&format=geojson';
  const geojsonTripsData = await fetch(tripsUrl).then(response => response.json());
  // TripsLayer needs data in the following format
  const layerData = geojsonTripsData.features.map(f => ({
    vendor: f.properties.vendor,
    timestamps: f.properties.timestamps,
    path: f.geometry.coordinates[0]
  }));

  const staticLayers = [
    // This is only needed when using shadow effects
    new deck.PolygonLayer({
      id: 'ground-layer',
      data: [[[-74.0, 40.7], [-74.02, 40.7], [-74.02, 40.72], [-74.0, 40.72]]],
      getPolygon: f => f,
      stroked: false,
       getFillColor: [0, 0, 0, 0]
    }),
    new deck.carto.CartoSQLLayer({
      id: 'buildings-layer',
      data: 'SELECT the_geom_webmercator, height FROM sf_buildings',
      extruded: true,
      wireframe: true,
      opacity: 0.5,
      getElevation: f => f.properties.height,
      getFillColor: [74, 80, 87],
      material: theme.material
    })
  ];

  // Create Deck.GL map
  const deckgl = new deck.DeckGL({
    container: 'map',
    mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
    initialViewState: {
      longitude: -74,
      latitude: 40.73,
      zoom: 12,
      pitch: 45,
      bearing: 0
    },
    controller: true,
    layers: staticLayers,
    effects: theme.effects
  });

  let time = 0;

  function animate() {
    time = (time + ANIMATION_SPEED) % LOOP_LENGTH;
    window.requestAnimationFrame(animate);
  }

  setInterval(() => {
    deckgl.setProps({
      layers: [
        ...staticLayers,
        new deck.TripsLayer({
          id: 'trips-layer',
          data: layerData,
          getPath: d => d.path,
          getTimestamps: d => d.timestamps,
          getColor: d => (d.vendor === 0 ? theme.trailColor0 : theme.trailColor1),
          opacity: 0.3,
          widthMinPixels: 2,
          rounded: true,
          trailLength: 180,
          currentTime: time,
          shadowEnabled: false
        })
      ]
    });
  }, 50);

  window.requestAnimationFrame(animate);
 }

 initialize(); 

---

您好，请编辑您的问题以准确解释发生了什么“它不起作用”没有帮助。首先，我还要再看一看建议您添加javascript的标记。最后，请澄清您不想使用react的原因。谢谢。我还建议你创建一个例子，有人可以很容易地来学习。我认为你的问题是，你从来没有告诉过任何东西重新渲染。React中的this.setState会触发渲染，而您在这里没有执行此操作。您需要一些与deck.setProps类似的东西，但是您将mapbox自定义层与deck GL相结合，我不确定如何在那里实现。