Как Mapbox загрузил это изображение перед загрузкой карты? - PullRequest
Новая
       10

Как Mapbox загрузил это изображение перед загрузкой карты?

0 голосов
/ 14 февраля 2019

На сайте Mapbox https://www.mapbox.com/maps/ они появляются, чтобы загрузить изображение, пока карта не будет готова для отображения в баннере героя.Как они это сделали?Кроме того, движение карты при наведении мыши велико, как они это делают?

1 Ответ

0 голосов
/ 15 февраля 2019

Вы можете использовать событие load карты [1], чтобы узнать, когда карта будет загружена: 

map.on('load', function () {

});

Вы можете запросить статическую карту через API https://docs.mapbox.com/api/maps/#static.

* 1007.* Вы можете использовать HTML, JavaScript и CSS для отображения из Статического API Mapbox, пока карта GL JS загружается в фоновом режиме позади вашего img.Получив это событие load, вы можете скрыть свой img, чтобы открыть интерактивную карту.

Вы должны запросить это изображение PNG через API статической карты, так как его загрузка и кэширование противоречит Условиям предоставления услуг Mapbox.себя [2].

Чтобы упростить карту, вам просто нужно прослушать события перемещения мышью, а затем слегка изменить направление и / или высоту карты с помощью map.jumpTo или map.easeTo [3].

[1] https://docs.mapbox.com/mapbox-gl-js/api/#map.event:load

[2] https://www.mapbox.com/tos/#[YmtcYmns]

[3] https://docs.mapbox.com/mapbox-gl-js/api/#map#jumpto

...