时间戳

首页 > 解决方案 > 收到“未处理的承诺拒绝”错误

javascript - 收到“未处理的承诺拒绝”错误

问题描述

我在 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);
  }
}

标签： javascriptvue.jsgeolocationmapboxmapbox-gl-js

解决方案

以下代码在map.addSource每次targetTrackingLine调用时创建一个新的 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，始终假定根据MapBox 规范data是一个有效的geojason对象

推荐阅读