Mapbox在加载地图之前如何加载此图像？

Question

在Mapbox的站点上，https://www.mapbox.com/maps/似乎正在加载图像，直到地图准备显示在英雄横幅中为止。他们是如何做到的？鼠标悬停时的地图运动也很棒，他们也如何做到这一点？

Answer 1

您可以使用地图的load事件[1]来了解地图何时完成加载：

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

});

您可以通过API https://docs.mapbox.com/api/maps/#static请求静态地图。

当GL JS地图在img背后的背景中加载时，您可以使用一些HTML，JavaScript和CSS从Mapbox Static API中显示。发生load事件后，您可以隐藏img以显示交互式地图。

您必须通过Static Map API请求该PNG图片，因为这违反了Mapbox服务条款，您必须自己下载并缓存它[2]。

要简化地图，您只需听一下mousemove事件，然后使用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