Question

我正在将Mapbox与Vue.js一起使用，并且在向地图添加geojson图层时，请继续运行此错误消息：

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

我尝试了很多变化无济于事。我的问题是，如何确保正确的执行顺序，以便始终添加图层？我已经将函数包装在Javascript Promise中，并使用一种解决方法添加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()
    }
  }
}

Mapbox + Vue.js - 错误：样式未加载

1 个答案: