如何解决(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 举报,一经查实,本站将立刻删除。