2025mapbox零基础入门教程（6）跳转平移和旋转

jump to跳转动画


假设我们把前面的ease to改成jump to，会是什么样的效果？

btn4.onclick = function () {
    map.jumpTo({
        center: [116.46, 39.92],
        zoom: 10,
        duration: 2000,
    });
};

看下效果↓

如果需要有动画效果，就写fly to或ease to，如果不需要动画效果，就写jump to

pan to平移动画

panto是用来实现视图的平移效果。

这里有两个参数需要设置，一个是经纬度的坐标，另外一个是配置选项。

这里设置两个参数，坐标和速度：

btn4.onclick = function () {
    /* map.jumpTo({
        center: [116.46, 39.92],
        zoom: 10,
        duration: 2000,
    }); */
    map.panTo([124.27, 31.59], { duration: 2000 });
};

实现平移效果：

rotate to旋转动画

旋转动画需要引入rotate to并设置两个参数：

旋转角度：这里设置180°

持续时间：我们设置成2000（毫秒）

btn4.onclick = function () {
    /* map.jumpTo({
        center: [116.46, 39.92],
        zoom: 10,
        duration: 2000,
    }); */
    map.rotateTo(180, { duration: 2000 });
};

看下效果：

总结：

包括上一期教程，我们一共提到几个概念：

• fly to飞行动画
• ease to过渡动画

fly to和ease to的动画轨迹稍有区别，其中地球自转效果是使用ease to实现

• jump to跳转：直接跳转，无动画效果
• pan to平移动画
• rotate to旋转动画

几种效果的使用方法很相似，也是mapbox中最常用的几种视图切换效果。