(Deck.GL - Trips Layer ) 如何为各种路线长度设置正确的环路编号？

问题描述

我正在尝试在甲板 gl 地图上渲染特定路径，但每次都无法正确设置循环。

要么循环短，行程停在路中间，要么循环太长，行程从最后一个坐标到第一个坐标形成一条丑陋的直线，重新开始绘图。

我需要行程停在最后一个坐标处，然后顺利重新开始。

  const [animation] = useState({});
  const [time,setTime] = useState(0);
  const [loopLength,setLoopLength] = useState(0);
  const [startTime,setStartTime] = useState(Date.Now());

  // update loop length and render layers when routes change (when api returns a response)
  useEffect(() => {
    reset();
    if (routes.length) {
      const maxRoute = max(routes,({ timestamps }) => max(timestamps));
      setLoopLength(maxRoute);
      // setLoopLength(10000);
      setTime(0);
      setStartTime(Date.Now());
    }
  },[routes]);

  //
  useEffect(() => {
    if (routes.length) {
      animate();
    }
  },[startTime]);

  // start animation
  const animate = () => {
    window.cancelAnimationFrame(animation.id);
    const timestamp = (Date.Now() - startTime) / 1000;
    const loopTime = loopLength / SPEED; // how many units is whole loop
    const time = ((timestamp % loopTime) / loopTime) * loopLength;
    setTime(time);
    animation.id = window.requestAnimationFrame(animate);
  };
  // method for rendering layers
  const renderLayers = () => {
    return [
      new TripsLayer({
        id: "trips",data: routes,getPath: (d) => d.routes,getTimestamps: (d) => d.timestamps,getColor: () => DEFAULT_THEME.trailColor0,opacity: 1,widthMinPixels: 1,widthScale: 0.5,rounded: true,trailLength: 1000,currentTime: time,}),];
  };

文档：https://deck.gl/docs/api-reference/geo-layers/trips-layer

示例：https://deck.gl/examples/trips-layer/

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）