在react-map-gl中动画geojson位置

如何解决在react-map-gl中动画geojson位置

我一直在尝试像ReactJS应用上的动画那样制作超级动画，一旦用户开始乘车，出租车就会根据后端每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调用，并使用引用来取消动画以进行清理。

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>
      )}