接收'Unhandled Rejection‘错误

Question

当我在我的MapBox地图上创建一个活动的跟踪线时，我收到了这个错误。

我不得不在这个文件的其他地方使用相同的api。我猜这就是问题所在..有没有办法解决这个问题？

错误-

Error: There is already a source with this ID
    at i.addSource (mapbox-gl.js?e192:33)
    at r.addSource (mapbox-gl.js?e192:33)
    at VueComponent._callee5$ (Dashboard.vue?98fa:142)
    at tryCatch (runtime.js?96cf:45)
    at Generator.invoke [as _invoke] (runtime.js?96cf:271)
    at Generator.prototype.<computed> [as next] (runtime.js?96cf:97)
    at asyncGeneratorStep (asyncToGenerator.js?3b8d:5)
    at _next (asyncToGenerator.js?3b8d:27)

已挂载呼叫-

  mounted() {
    this.createMap();
      window.setInterval(() => {
        this.getLocation()
      }, 500)
  },

第一个API调用-

async getLocation() {
  const res = await getLocations()
  this.center = [res.data[0].longitude,res.data[0].latitude];

  // Reverse Geocoding using MapBox API
  axios.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${this.center}.json?access_token=${this.access_token}`)
      .then(async (response) => {
         this.loading = false;
         this.lat = response.data.query[1].toFixed(6);
         this.lng = response.data.query[0].toFixed(6);
         this.place_name = response.data.features[0].place_name;
         this.uncertainty_radius = res.data[0].uncertaintyRadiusInMeters;
         this.map.flyTo({center: [this.lng, this.lat], zoom: 16.5});
      });
  await this.mapMarker();
  await this.targetTrackingLine()
},

这是我的以下行函数-

async targetTrackingLine() {
  if (this.lng !== "0.000000" && this.lng !== "") {
    const response = await fetch(
        `https://api.mapbox.com/geocoding/v5/mapbox.places/${this.center}.json?access_token=${this.access_token}`
    );
    const data = await response.json();
    // save full coordinate list for later
    const coordinates = data.query;
    console.log(coordinates)
    // start by showing just the first coordinate
    data.query.coordinates = [coordinates[0]];
    // add it to the map
    this.map.addSource('trace', {type: 'geojson', data: data});
    this.map.addLayer({
      'id': 'trace',
      'type': 'line',
      'source': 'trace',
      'paint': {
        'line-color': '#000',
        'line-width': 4
      }
    });
    // on a regular basis, add more coordinates from the saved list and update the map
    let i = 0;
    const timer = setInterval(() => {
      if (i < coordinates.length) {
        data.query.coordinates.push(coordinates[i]);
        this.map.getSource('trace').setData(data);
        i++;
      } else {
        window.clearInterval(timer);
      }
    }, 10);
  }
}

Answer 1

下面的代码创建一个新的id，以便在每次调用targetTrackingLine时传递给map.addSource：

let targetTrackingCalls = 0;
async targetTrackingLine() {
   const sourceId = "trace" + ++targetTrackingCalls; // unique per call

   //... source lines
   this.map.addSource(sourceId, {type: 'geojson', data: data});

   //... in timer callback;

      this.map.getSource(sourceId).setData(data);

    //...
}

使用唯一的id应防止addSource引发的错误，始终假定data是每个MapBox specification的有效geojason对象