收到 'Unhandled Promise 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

每次调用 targetTrackingLine 时，以下代码都会创建一个要传递给 map.addSource 的新 ID：

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, always assuming data is a valid geojason object per the MapBox specification

引发的错误

收到 'Unhandled Promise Rejection' 错误

Receiving 'Unhandled Promise Rejection' error

javascript

vue.js

geolocation

mapbox

mapbox-gl-js