Mapbox GL JS: стиль не загружен

1. Прослушайте styledata событие, чтобы решить вашу проблему.

Возможно, вам потребуется прослушать событие styledata в вашем проекте, поскольку это единственное стандартное событие, упомянутое в документах mapbox-gl-js, см. https://docs.mapbox.com/mapbox-gl-js/api/#map.event:styledata.

Вы можете использовать это так:

map.on('styledata', function() {
    addLayer();
});

2. Причины, по которым вам не следует использовать другие методы, упомянутые выше.

1. setTimeout может работать, но это не рекомендуемый способ решения проблемы, и вы получите неожиданный результат, если ваша работа по рендерингу будет тяжелой;
2. style.load - это частное событие в mapbox, как описано в проблеме https://github.com/mapbox/mapbox-gl-js/issues/7579, поэтому нам явно не следует его слушать;
3. .isStyleLoaded() работает, но не может вызываться все время, пока стиль не будет полностью загружен, вам нужен слушатель, а не метод оценки;

Хорошо, эта проблема с mapbox - отстой, но у меня есть решение

myMap.on('styledata', () => {
  const waiting = () => {
    if (!myMap.isStyleLoaded()) {
      setTimeout(waiting, 200);
    } else {
      loadMyLayers();
    }
  };
  waiting();
});

Смешиваю оба раствора.

Я столкнулся с аналогичной проблемой и пришел к следующему решению:

Я создал небольшую функцию, которая проверяет, загрузился ли стиль:

// Check if the Mapbox-GL style is loaded.
function checkIfMapboxStyleIsLoaded() {
  if (map.isStyleLoaded()) {
    return true; // When it is safe to manipulate layers
  } else {
    return false; // When it is not safe to manipulate layers
  }
}

Затем всякий раз, когда я меняю местами или иным образом изменяю слои в приложении, я использую такую ​​функцию:

function swapLayer() {
  var check = checkIfMapboxStyleIsLoaded();
  if (!check) {
    // It's not safe to manipulate layers yet, so wait 200ms and then check again
    setTimeout(function() {
      swapLayer();
    }, 200);
    return;
  }

  // Whew, now it's safe to manipulate layers!
  the rest of the swapLayer logic goes here...

}

Используйте событие style.load. Он срабатывает один раз при каждой загрузке нового стиля.

map.on('style.load', function() {
    addLayer();
});

Мой рабочий пример:

когда я меняю стиль map.setStyle()

Я получаю ошибку Uncaught Error: Style is not done loading

Это решило мою проблему

Не используйте map.on("load", loadTiles);

вместо этого используйте

map.on('styledata', function() { addLayer(); });

когда вы меняете стиль, map.setStyle(), вы должны дождаться завершения setStyle (), а затем добавить другие слои. пока map.setStyle('xxx', callback) Не разрешено. Чтобы дождаться обратного вызова, используйте map.on("styledata" map.on("load". Не работает, если вы измените map.setStyle(). вы получите ошибку: Uncaught Error: Style is not done loading

Текущая структура событий стиля нарушена (по крайней мере, в Mapbox GL v1.3.0). Если вы отметите map.isStyleLoaded() в обработчике событий styledata , он всегда принимает значение false:

map.on('styledata', function (e) {
  if (map.isStyleLoaded()){
    // This never happens...
  }
}

Мое решение - создать новое событие с именем "style_finally_loaded", которое запускается только один раз и только тогда, когда стиль действительно загружен:

var checking_style_status = false;
map.on('styledata', function (e) {
  if (checking_style_status){
    // If already checking style status, bail out
    // (important because styledata event may fire multiple times)
    return;
  } else {
    checking_style_status = true;
    check_style_status();
  }
});
function check_style_status() {
  if (map.isStyleLoaded()) {
    checking_style_status = false;
    map._container.trigger('map_style_finally_loaded');
  } else {
    // If not yet loaded, repeat check after delay:
    setTimeout(function() {check_style_status();}, 200);
    return;
  }
}

Я создал простое решение. Дайте 1 секунду mapbox для загрузки стиля после того, как вы установите стиль, и вы можете нарисовать слой

map.setStyle(styleUrl);     
setTimeout(function(){
   reDrawMapSourceAndLayer(); /// your function layer
}, 1000);

когда вы используете map.on ('styledataloading'), он запускает пару раз, когда вы меняете стиль

map.on('styledataloading', () => {
  const waiting = () => {
    if (!myMap.isStyleLoaded()) {
      setTimeout(waiting, 200);
    } else {
      loadMyLayers();
    }
  };
  waiting();
});

В итоге я получил: map.once("idle", ()=>{ ... some function here}); Если у вас есть куча вещей, которые вы хотите сделать, я бы сделал что-то вроде этого = ›добавьте их в массив, который выглядит как [{func: function, param: params}], тогда у вас есть другая функция, которая делает это:

executeActions(actions) {
  actions.forEach((action) => {
  action.func(action.params);
});

И в конце у вас есть

this.map.once("idle", () => {
    this.executeActions(actionsArray);
 });

У меня была такая же проблема при добавлении маркеров недвижимости на карту. Впервые добавляя маркеры, жду пока карта простаивает. После того, как он был добавлен, я сохраняю его в realEstateWasInitialLoaded и просто добавляю его потом, не дожидаясь. Но не забудьте сбросить realEstateWasInitialLoaded на false при изменении базовой карты или чего-то подобного.

checkIfRealEstateLayerCanBeAddedAndAdd() {
      /* The map must exist and real estates must be ready */
      if (this.map && this.realEstates) {
        this.map.once('idle', () => {
          if (!this.realEstateWasInitialLoaded) {
            this.addRealEstatesLayer();
            this.realEstateWasInitialLoaded = true
          }
        })
        if(this.realEstateWasInitialLoaded) {
          this.addRealEstatesLayer();
        }

      }
    },