javascript - react-map-gl中的动画geojson位置

Question

我一直在尝试在 ReactJS 应用程序上制作类似动画的 uber，一旦用户开始骑行，出租车的位置就会根据后端每 5 秒发送的坐标更新。但是标记的位置永远不会更新，即使它只是在一个非常小的区域内移动，但不会沿着路径前进。

接受乘车后，我使用 Hasura 订阅出租车位置坐标。

useEffect(() => {
if (rideFound) {
  console.log('found ride');
  subscribeRideLocation(props.details.vehicle.id, (res) => {
    const loc = res.data.yt_vehicle[0].location.replace('(', '').replace(')', '').split(',');
    setRideData({ coordinates: loc, type: 'Point' });
  });
}
}, [rideFound]);

安装组件后，我已经调用 requestAnimationFrame 并使用 refs 取消动画以进行清理。

const animationRef = React.useRef();

const animatePoint = () => {
animationRef.current = requestAnimationFrame(animatePoint);
};

useEffect(() => {
animatePoint();
return () => {
  cancelAnimationFrame(animationRef.current);
};
}, []);

这是渲染功能

{rideData !== null && (
        <Source type="geojson" data={rideData}>
          <Layer {...pointLayer} />
        </Source>
      )}