【问题标题】:Control pan and zoom animation duration in mapbox.js在 mapbox.js 中控制平移和缩放动画持续时间
【发布时间】:2015-06-08 03:52:05
【问题描述】:

我正在使用 Mapbox.js 制作显示一系列点的动画地图。理想情况下,我想通过像在 d3.js 中创建的 example 这样组合缩放和平移来平滑地切换点之间的焦点。我想知道是否有任何方法可以控制平移和缩放动画速度(主要是减慢速度)。在下面的代码中,我尝试了 setView() 和 panTo() 函数,但转换太快了。任何建议将不胜感激,谢谢!

L.mapbox.accessToken = "#Token Here";
var map = L.mapbox.map('map', 'mapbox.streets')
        .setView([34.01, -118.48], 5, { 
            pan: { animate: true }, 
            zoom: { animate: true } 
        });

map.setView([33.98, -118.42], 5);

【问题讨论】:

    标签: mapping gis mapbox mapbox-gl-js


    【解决方案1】:

    看看this fiddle

    您可以使用如下函数:

    function jumpTo(index){
        map.setView(positions[index], 4, {
            pan: {
                animate: true,
                duration: 2
            },
            zoom: {
                animate: true
            }
        });
    }
    

    并在moveend 事件上控制它。

    【讨论】:

    • 谢谢!这完美无缺。对不起,我有点晚了。顺便说一句,请问您是如何在不暴露 Mapbox 访问令牌的情况下创建小提琴示例的?只是想知道我怎么能做到这一点。
    • 不客气。不知何故,我找到了这张地图 id examples.map-i86nkdio,不知何故它不需要令牌。
    • 这对我不起作用。 API有变化吗?我收到错误,说 lat/long 为空,或者它只是跳到新位置并且没有动画。
    猜你喜欢
    • 2011-11-29
    • 1970-01-01
    • 2015-03-30
    • 2013-12-17
    • 1970-01-01
    • 1970-01-01
    • 2011-03-31
    • 2012-07-08
    • 1970-01-01
    相关资源
    最近更新 更多