Estoy tratando de usar un conjunto de datos personalizado para la capa de viajes. Cuando uso el conjunto de datos de demostración, funciona como se esperaba. Si uso el mío propio, el mapa muestra pero no hay viajes animados, ni siquiera se muestran. Estoy pensando que son mis datos de entrada; aquí hay un fragmento:

{"path": [[41.03251538262551, -88.75811070649046], [41.5572090829644, -88.59968467178443]], "timestamps": [20, 1900]}

Todas las rutas usan las mismas marcas de tiempo, ya que la velocidad a la que se mueven debe ser constante. Mi opinión es que es mi formato de datos de entrada o el mero tamaño, ya que hay alrededor de 40k rutas. A continuación se muestra mi código.

 const DEFAULT_THEME = { buildingColor: [74, 80, 87], trailColor0: [253, 128, 93], trailColor1: [23, 184, 190], }; const INITIAL_VIEW_STATE = { longitude: -74, latitude: 40.72, zoom: 13, pitch: 45, bearing: 0 }; const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json'; export default function App({ trips = FLOW, trailLength = 180, initialViewState = INITIAL_VIEW_STATE, mapStyle = MAP_STYLE, theme = DEFAULT_THEME, loopLength = 1800, // unit corresponds to the timestamp in source data animationSpeed = 1 }) { const [time, setTime] = useState(0); const [animation] = useState({}); const animate = () => { setTime(t => (t + animationSpeed) % loopLength); animation.id = window.requestAnimationFrame(animate); }; useEffect(() => { animation.id = window.requestAnimationFrame(animate); return () => window.cancelAnimationFrame(animation.id); }, [animation]); const layers = [ new TripsLayer({ id: 'trips', data: trips, getPath: d => d.path, getTimestamps: d => d.timestamps, getColor: theme.trailColor1, opacity: 0.3, widthMinPixels: 10, rounded: true, trailLength, currentTime: time, shadowEnabled: false }), ]; return ( <DeckGL layers={layers} effects={theme.effects} initialViewState={initialViewState} controller={true} > <StaticMap reuseMaps mapStyle={mapStyle} preventStyleDiffing={true} /> </DeckGL> ); } export function renderToDOM(container) { render(<App />, container); }