Angular项目中Mapbox点击切换数据源并更新多边形的实现问题

嘿，我一眼就看出问题所在啦——你每次调用plotPolygon的时候直接新增数据源和图层，但Mapbox不允许重复创建同名的源和图层，第一次调用成功后，后续的调用其实都在静默失败（你可以打开浏览器控制台看看，应该能看到报错）。要解决这个问题，我们只需要在添加新内容之前，先把旧的数据源和依赖它的图层删掉就行。

下面是修改后的plotPolygon函数：

plotPolygon(polygon: any) {
  // 先移除旧的图层和数据源（如果存在的话）
  // 注意：必须先删依赖数据源的图层，再删数据源
  if (this.map.getLayer('outline')) {
    this.map.removeLayer('outline');
  }
  if (this.map.getLayer('CampPoly')) {
    this.map.removeLayer('CampPoly');
  }
  if (this.map.getSource('CampPoly')) {
    this.map.removeSource('CampPoly');
  }

  // 以下是你原来的添加源和图层的逻辑
  // Add a data source containing GeoJSON data.
  this.map.addSource('CampPoly', {
    'type': 'geojson',
    'data': {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        // These coordinates outline CampPoly.
        'coordinates': polygon
      }
    }
  });
  // Add a new layer to visualize the polygon.
  this.map.addLayer({
    'id': 'CampPoly',
    'type': 'fill',
    'source': 'CampPoly', // reference the data source
    'layout': {},
    'paint': {
      'fill-color': '#0080ff', // blue color fill
      'fill-opacity': 0.5
    }
  });
  // Add a black outline around the polygon.
  this.map.addLayer({
    'id': 'outline',
    'type': 'line',
    'source': 'CampPoly',
    'layout': {},
    'paint': {
      'line-color': '#000',
      'line-width': 3
    }
  });
}

关键要点解释： #

• 删除顺序很重要：因为outline和CampPoly图层都依赖CampPoly数据源，所以必须先删除这两个图层，再删除数据源，否则Mapbox会报错。
• 检查存在性：用map.getLayer(layerId)和map.getSource(sourceId)来判断是否存在对应的图层或数据源，避免删除不存在的内容导致报错。
• 为什么之前没更新：第一次调用时创建了这些资源，后续调用addSource和addLayer会因为同名而被Mapbox拒绝，所以旧的多边形一直留在地图上。

这样修改后，每次切换Campaign调用plotPolygon时，都会先清理掉旧的内容，再加载新的多边形，就能正常更新啦！

内容的提问来源于stack exchange，提问作者mm6643