Переход между слоями базовой карты Mapbox - PullRequest
Новая
       106

Переход между слоями базовой карты Mapbox

1 голос
/ 09 мая 2020

В настоящее время создается веб-приложение с помощью Mapbox. Я хотел бы воспроизвести переход между базовыми картами, как вы можете видеть при использовании Карт Google:

API Mapbox, кажется, предлагает только setStyle для объектов карты, но это приводит к повторному рендерингу фрагментов (не так эстетично). Моя текущая реализация состоит в том, чтобы визуализировать два полотна mapbox, синхронизировать их c и использовать переход css для перехода между ними. По сути: 

function changeStyle(input) {
    var id = input.target.id;
    var map = document.getElementById('map');
    var map2 = document.getElementById('map2');

    if(id == 'dark'){
        map.style.opacity = 1;
        map2.style.opacity = 0;
    }
    else if(id == 'satellite'){
        map.style.opacity = 0;
        map2.style.opacity = 1;
    }

}

См. CodePen для полной реализации.

Это имеет очевидное ограничение на рендеринг двух карт (стоимость производительности и вдвое больше затрат на рендеринг карт) и добавляет сложность повторного рендеринга дополнительных слоев. Либо я манипулирую картами синхронно c, либо повторно визуализирую дополнительные слои при переходе. В любом случае, этот метод не является устойчивым.

Mapbox имеет функции для загрузки сторонних векторных листов и добавления свойства перехода к слоям . Можно ли загружать листы Mapbox как независимые слои и использовать свойство перехода между ними? В качестве альтернативы, есть ли обратный вызов для загрузки слоев Mapbox, который я мог бы использовать для невидимой визуализации слоев и исчезновения, когда загрузка завершена?

Или можно реализовать это гораздо более эффективным способом, чем я сделал это далеко.

Совет и обсуждение очень признательны.

...