如何在不使用React的情况下启用TripsLayer的动画?TripsLayer示例使用了React,我真的不知道如何将其转换为纯js。请查看下面代码中的“animate”函数。我尝试更新图层状态,但它不起作用(TripsLayer没有动画效果)。我不知道应该在哪里分配“time”变量。
TripsLayer演示:https://deck.gl/#/examples/custom-layers/trip-routes 我的React版本代码:https://github.com/uber/deck.gl/blob/master/examples/website/trips/app.js TripsLayer文档:https://github.com/uber/deck.gl/tree/master/modules/experimental-layers/src/trips-layer 我的代码:
TripsLayer演示:https://deck.gl/#/examples/custom-layers/trip-routes 我的React版本代码:https://github.com/uber/deck.gl/blob/master/examples/website/trips/app.js TripsLayer文档: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);
});
this.setState
会触发渲染,但您在这里没有这样做。您想要类似于deck.setProps
的东西,但是您正在将mapbox自定义图层与Deck GL结合使用,我不确定如何在那里实现它。 - Digital Deception