Mapbox + Vue.js - ошибка: стиль не загружен

Question

Я использую Mapbox с Vue.js, и при добавлении слоя геоджонов на карту продолжаю появляться следующее сообщение об ошибке:

Uncaught (in promise) Error: Style is not done loading

Я пробовал много вариантовбезрезультатно.Мой вопрос: как мне обеспечить правильный порядок выполнения, чтобы слой всегда добавлялся?Я обернул функцию в обещание Javascript, добавив обходной путь setTimeout(), чтобы у карты / стиля было время для завершения загрузки, даже если она уже находится в приемнике Mapbox, но ошибка часто повторяется.Мой текущий компонент выглядит следующим образом (для краткости опущены некоторые функции):

export default {
  mounted() {
    new Promise(resolve => {
      this.loadMap([this.subjectProperty.longitude, this.subjectProperty.latitude])
      if(this.mapLoaded === true) resolve()
    }).then(() => {
      setTimeout(() => {
        this.showParcel()
      }, 3000)
    })
  },
  methods: {
    loadMap(center) {
      var self = this   
      mapBox = new mapboxgl.Map({
        container: 'map',
        zoom: 12,
        pitch: 45,
        center: center,
        style: 'mapbox://styles/mapbox/streets-v10'
      })
      mapBox.on('style.load', function() {
        self.mapLoaded = true
      })                    
    },
    showParcel() {
      mapBoxBounds = new mapboxgl.LngLatBounds()
      this.parcel.geo_json['geometry']['coordinates'][0].forEach((coord) => {
        mapBoxBounds.extend(coord)
      })
      MapBoxObject.addGeoJsonParcels(this.parcel.geo_json)
      MapBoxObject.fitBounds()
    }
  }
}

Answer 1

Попробуйте код ниже:

export default {
  mounted() {
    this.loadMap([
      this.subjectProperty.longitude,
      this.subjectProperty.latitude
    ]).then(_=>{
      this.showParcel()
    })  
  },
  methods: {
    loadMap(center) {
      return new Promise(resolve=>{
        let mapBox = new mapboxgl.Map({
          container: 'map',
          zoom: 12,
          pitch: 45,
          center: center,
          style: 'mapbox://styles/mapbox/streets-v10'
        })

        mapBox.on('style.load', _ => {
          resolve()
        })
      })
    },
    showParcel() {
      mapBoxBounds = new mapboxgl.LngLatBounds()
      this.parcel.geo_json['geometry']['coordinates'][0].forEach((coord) => {
        mapBoxBounds.extend(coord)
      })
      MapBoxObject.addGeoJsonParcels(this.parcel.geo_json)
      MapBoxObject.fitBounds()
    }
  }
}