问题描述
我一直在尝试像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>
)}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)