Mapbox flyTo函数不能足够快地加载图块;边缘瓷砖片刻黑色

Question

我的目标是在flyTo函数运行时进行无缝转换。目前，当flyTo函数运行时，边缘处的切片通常是黑色的。如果以较慢的速度运行它，它仍然在边缘显示黑色瓷砖。有没有办法预先加载所有的图块，以便在使用flyTo时防止这种情况发生，或者做一些可以解决这个问题的其他事情？

可以在此处看到包含代码的演示：http://codepen.io/maudulus/pen/qbpRKL

JavaScript的：

var allStalls = [{
  "latLng": [-70.84437, 42.654244]
}, {
  "latLng": [-70.641498, 42.600342]
}, {
  "latLng": [-71.050221, 42.35115]
}, {
  "latLng": [-71.409602, 42.207843]
}, {
  "latLng": [-71.03975, 42.349496]
}, {
  "latLng": [-72.26939, 44.586722]
}, {
  "latLng": [-72.215742, 42.327417]
}, {
  "latLng": [-71.036483, 42.382589]
}, {
  "latLng": [-71.148819, 42.128521]
}, {
  "latLng": [-71.65943, 41.95065]
}, {
  "latLng": [-71.417896, 42.466534]
}, {
  "latLng": [-72.467236, 43.108684]
}, {
  "latLng": [-71.184624, 42.358333]
}, {
  "latLng": [-71.195322, 42.331318]
}, {
  "latLng": [-72.549074, 42.410154]
}, {
  "latLng": [-71.975699, 42.371775]
}, {
  "latLng": [-71.132057, 42.459776]
}, {
  "latLng": [-71.098946, 42.382773]
}, {
  "latLng": [-71.073548, 41.570018]
}, {
  "latLng": [-71.082461, 42.363585]
}, {
  "latLng": [-71.032387, 42.228292]
}, {
  "latLng": [-71.074378, 42.313215]
}, {
  "latLng": [-72.541717, 42.610012]
}, {
  "latLng": [-71.116857, 42.394275]
}, {
  "latLng": [-72.14673, 42.581829]
}, {
  "latLng": [-71.038217, 42.350311]
}, {
  "latLng": [-71.411329, 42.412483]
}, {
  "latLng": [-71.014118, 41.646584]
}, {
  "latLng": [-71.137854, 42.453579]
}, {
  "latLng": [-72.188024, 42.397413]
}, {
  "latLng": [-72.103194, 42.32721]
}, {
  "latLng": [-71.54809, 42.412077]
}, {
  "latLng": [-71.310427, 42.645642]
}, {
  "latLng": [-71.093237, 42.375619]
}, {
  "latLng": [-71.097225, 42.380825]
}, {
  "latLng": [-70.937824, 42.858973]
}, {
  "latLng": [-71.128488, 42.362905]
}];
var diffBearings = [{
  bearing: 27,
  center: [],
  zoom: 15.5,
  pitch: 20,
  speed: 0.4
}, {
  duration: 6000,
  center: [],
  bearing: 150,
  zoom: 15,
  pitch: 0,
  speed: 0.4
}, {
  bearing: 90,
  center: [],
  zoom: 13,
  speed: 0.4,
  pitch: 40
}, {
  bearing: 90,
  center: [],
  zoom: 12.3
}, {
  bearing: 45,
  center: [],
  zoom: 15.3,
  pitch: 20,
  speed: 0.4
}, {
  bearing: 180,
  center: [],
  zoom: 12.3,
  speed: 0.4
}, {
  bearing: 90,
  center: [],
  zoom: 17.3,
  pitch: 40,
  speed: 0.4
}, {
  bearing: 90,
  center: [],
  zoom: 14.3,
  pitch: 20,
  speed: 0.4
}, {
  bearing: 90,
  center: [],
  zoom: 18,
  pitch: 50,
  speed: 0.4
}, {
  bearing: 90,
  center: [],
  zoom: 18.5,
  pitch: 45,
  speed: 0.4
}];

var flyCount = 0;

var start = [-70.84437, 42.654244];

var end = [];
var map;
$(document).ready(function() {
  map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/satellite-v8',
    center: start,
    zoom: 14
  });

  $('button').on('mouseup', function() {
    fly();
  });
})

function fly() {
  var targettedLocation = diffBearings[Math.floor(Math.random() * diffBearings.length)];
  targettedLocation.center = allStalls[Math.floor(Math.random() * allStalls.length)].latLng;

  map.flyTo(targettedLocation);

  setTimeout(function() {
    fly()
  }, 7500);
}