mapbox-gl 切换俯仰角球连续动态
时间: 2023-08-07 15:07:48 浏览: 39
要实现连续变化的俯仰角动画,你可以使用 Mapbox GL JS 的动画函数 requestAnimationFrame()。这个函数将在每个浏览器刷新帧之前调用一个回调函数。你可以在回调函数中更新地图的俯仰角,并使用 requestAnimationFrame() 来实现动画效果。
以下是一个示例代码,展示如何使用 requestAnimationFrame() 来实现连续变化的俯仰角动画:
```
var startPitch = 0;
var targetPitch = 45;
var duration = 1000; // 1 秒钟的动画时间
var startTime = null;
function animate(now) {
if (!startTime) {
startTime = now;
}
var elapsedTime = now - startTime; // 经过的时间
var t = elapsedTime / duration; // 完成时间的百分比
if (t > 1) {
t = 1;
}
var pitch = startPitch + (targetPitch - startPitch) * t; // 计算当前俯仰角
map.setPitch(pitch); // 更新地图的俯仰角
if (t < 1) {
requestAnimationFrame(animate); // 继续动画
}
}
document.getElementById("toggle-3d").addEventListener("click", function() {
if (map.getPitch() === 0) {
startPitch = 0;
targetPitch = 45;
} else {
startPitch = 45;
targetPitch = 0;
}
startTime = null; // 重置动画开始时间
requestAnimationFrame(animate); // 启动动画
});
```
这个代码将在一个具有 ID "toggle-3d" 的按钮上监听点击事件。当按钮被点击时,它将计算起始俯仰角和目标俯仰角,并启动一个动画函数 animate()。animate()函数将在每个浏览器刷新帧之前调用,并计算当前的俯仰角。当完成时间的百分比达到 1 时,动画函数将停止。在动画期间,用户可以与地图交互,例如缩放或移动地图,动画仍然会按照预期进行。