Mapbox GL JS flyTo срабатывает по позиции прокрутки не всегда работает - PullRequest
Новая
       23

Mapbox GL JS flyTo срабатывает по позиции прокрутки не всегда работает

0 голосов
/ 14 марта 2019

Я пытаюсь использовать Mapbox GL JS для создания карты, которая обновляется (включая местоположение, стиль и фильтры) при перемещении текста по экрану.

Как и в в этом руководстве Iсоздал массив, содержащий места для полета, где «first» и «second» - это идентификаторы разделов моего текста. 

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 вообще не работает, так что мне интересно, мешает ли один из других методов Mapbox GL, вызываемый в updateMap (), flyTo?Я пытался использовать setTimeout для задержки при вызове updateMap (), но, похоже, это не помогло.

Любой совет будет принят с благодарностью!

...