Question

我正在尝试使用Mapbox GL JS创建一个随着文本在屏幕上和屏幕外移动而更新的地图（包括位置，样式和过滤器）。

就像在this tutorial中一样，我创建了一个数组，其中包含要飞往的位置，其中“第一”和“第二”是文本部分的ID。

var locations = {
'first': {
    center: [145.7, -17.8],
    zoom: 4.2,
    speed: 0.5
},
'second': {
    center: [148, -17.8],
    zoom: 5,
    speed: 0.5
},
'third': {
    center: [148, -18],
    zoom: 5.5,
    speed: 0.5
}}

我正在使用Waypoints.js库来触发滚动事件：

const $textSection = $('.text-section');

$(document).ready(function() {

    $textSection.each(function(){

        let _this = this;
        let sectionName = $(this).attr('id');

        var inViewBottom = new Waypoint({
            element: _this,
            handler: function (direction) {
                if (direction == 'down'){
                    map.flyTo(locations[sectionName]);
                    console.log(locations[sectionName]);
                    updateMap(sectionName);
                }
            },
            offset: '85%'
        });

});

除了#flyTo之外，航路点还调用了updateMap函数，该函数会触发对地图的其他更改：

function updateMap (sectionName) {

    if (sectionName == "first") {
        popup.addTo(map);
    } else {
        popup.remove();
    };

    if (sectionName == "first") {
        map.setPaintProperty('layer-1', 'line-opacity', 0.4);
    } else {
        map.setPaintProperty('layer-1', 'line-opacity', 0);
    };

    if (sectionName == "first") {
        map.setLayoutProperty('layer-2', 'visibility', 'none');
        $("#map-key").css("visibility", "hidden"); 
    } else {
        map.setLayoutProperty('layer-2', 'visibility', 'visible');
        $("#map-key").css("visibility", "visible"); 
    };

    if (sectionName == "second") {
        filterYear = ['==', ['number', ['get', 'Year']], 1998];
        map.setFilter("layer-2", filterYear);
    } else if (sectionName == "third") {
        filterYear = ['==', ['number', ['get', 'Year']], 2002];
        map.setFilter("layer-2", filterYear);
    }

}

大约60％的时间此代码都能正常工作。但是，在其余所有时间都执行updateMap（）的情况下，flyTo动画不起作用。我不知道为什么，因为Waypoint中的其他代码可以正常工作，而console.log（）仍然使用位置数据生成对象。

有趣的是，如果我将updateMap（）放在flyTo之前，flyTo动画根本不起作用，所以我想知道在updateMap（）中调用的其他Mapbox GL方法之一是否会干扰flyTo时间。我尝试使用setTimeout延迟调用updateMap（）的时间，但似乎没有帮助。

任何建议将不胜感激！

由滚动位置触发的Mapbox GL JS flyTo并非始终有效

0 个答案: