Как предотвратить с помощью mapbox gl js, что взаимодействие колесика мыши останавливает анимацию fitBounds ()? - PullRequest
Новая
       77

Как предотвратить с помощью mapbox gl js, что взаимодействие колесика мыши останавливает анимацию fitBounds ()?

1 голос
/ 24 января 2020

Я добавляю маркер на карту mapbox и позволяю методу fitBounds () из geo json -extent. js настраивать положение карты и масштабирование. 

map.fitBounds( geojsonExtent(geojson), {
    padding: {top: 200, bottom:30, left: 30, right: 30}
});

Длительность анимации установлена по умолчанию до пяти секунд. Когда пользователь в это время взаимодействует с колесом мыши над картой, анимация останавливается. Нет проблем: увеличение останавливает анимацию. Но как я могу предотвратить это?

Я пробовал много решений:

1. отключить увеличение 

map['scrollZoom'].disable();

Пользователь не может прокрутить карту с помощью колесика мыши, но анимация по-прежнему останавливается.

2. перехватить событие колеса 

map.on('wheel', function(e) {
    e.preventDefault();
});

Пользователь не может прокрутить карту с помощью колеса мыши, но анимация по-прежнему останавливается.

3. полностью отключить взаимодействие с пользователем 

var map = new mapboxgl.Map({
    interactive: false
});

Классно, анимация больше не прерывается, но теперь пользователь не может панорамировать карту. Я не нашел решения сбросить это свойство во время выполнения или добавить элементы навигации для панорамирования.

4. установите для анимации значение 

map.fitBounds( geojsonExtent(geojson), {
    essential: true,
    padding: {top: 200, bottom:30, left: 30, right: 30}
});

Без эффекта.

5. отключить анимацию 

map.fitBounds( geojsonExtent(geojson), {
    animate: false,
    padding: {top: 200, bottom:30, left: 30, right: 30}
});

Это работает, но это своего рода обходной путь. Мне нравится сохранять анимацию.

6. добавьте оверлей, чтобы заблокировать взаимодействие с пользователем 

map.on('movestart', function(e){
    $("#map-box").append('<div class="block-interactions"></div>');
});
map.on('moveend', function(e){
    $("#map-box .block-interactions").remove();
});

.block-interactions {
    position: absolute;
    width: 100%;
    height: 535px; /* map height */
}

Это мое текущее решение, и оно работает, но похоже на неудачный взлом и все еще обходной путь.

Итак, у вас есть другая идея, чтобы предотвратить прерывание анимации? В лучшем случае с методами mapbox.

Спасибо за вашу помощь!

...