map.removeSource无法移除GeoJSON点，Mapbox点位叠加问题求助

看起来你遇到的是Mapbox数据源与图层不同步导致的典型问题，我来帮你梳理下原因和可行的解决方案：

为什么旧点位没被覆盖？ #

Mapbox里的**source（数据源）和layer（图层）**是相互独立的：你只删除了source，但之前基于这个source创建的layer还存在，当你重新添加同名source时，layer会自动关联，但旧layer可能残留着之前的渲染状态，或者在删除/重建的间隙，旧数据还没被完全清理，导致新点位叠加上去。另外，componentWillReceiveProps是React已标记过时的生命周期方法，执行时机的不确定性也可能让逻辑执行不彻底。

解决方案1：直接更新数据源（推荐，更高效） #

没必要每次都删除重建source和layer，Mapbox提供了直接更新source数据的方法，既能保证点位覆盖，又能节省性能：

// 类组件中修改逻辑
componentWillReceiveProps(nextProps) {
  if (!this.map) return;
  
  const source = this.map.getSource('id');
  if (source) {
    // 直接更新数据源，旧点位会自动被替换
    source.setData(nextProps.newData);
  } else {
    // 第一次初始化时添加数据源和图层
    this.map.addSource('id', { type: 'geojson', data: nextProps.newData });
    // 这里以circle类型图层为例，你可以替换成自己的marker样式配置
    this.map.addLayer({
      id: 'search-markers-layer',
      type: 'circle',
      source: 'id',
      paint: {
        'circle-radius': 8,
        'circle-color': '#2196F3'
      }
    });
  }
}

解决方案2：彻底删除重建source和layer #

如果你坚持要通过删除重建的方式实现，一定要同时移除对应的layer，再移除source，最后重新添加两者：

componentWillReceiveProps(nextProps) {
  if (!this.map) return;
  
  const sourceId = 'id';
  const layerId = 'search-markers-layer';
  
  // 先移除图层（如果存在）
  if (this.map.getLayer(layerId)) {
    this.map.removeLayer(layerId);
  }
  // 再移除数据源（如果存在）
  if (this.map.getSource(sourceId)) {
    this.map.removeSource(sourceId);
  }
  
  // 添加新的数据源和图层
  this.map.addSource(sourceId, { type: 'geojson', data: nextProps.newData });
  this.map.addLayer({
    id: layerId,
    type: 'circle',
    source: sourceId,
    paint: {
      'circle-radius': 8,
      'circle-color': '#2196F3'
    }
  });
}

升级建议：替换过时的生命周期方法 #

componentWillReceiveProps在React 16.3+已被标记为过时，建议换成更可靠的实现：

函数组件+useEffect的写法 #

import { useEffect } from 'react';

function MapComponent({ newData, map }) {
  useEffect(() => {
    if (!map) return;
    
    const sourceId = 'id';
    const layerId = 'search-markers-layer';
    
    // 清理旧的图层和数据源的工具函数
    const cleanup = () => {
      if (map.getLayer(layerId)) map.removeLayer(layerId);
      if (map.getSource(sourceId)) map.removeSource(sourceId);
    };
    
    cleanup();
    
    // 添加新的数据源和图层
    map.addSource(sourceId, { type: 'geojson', data: newData });
    map.addLayer({
      id: layerId,
      type: 'circle',
      source: sourceId,
      paint: {
        'circle-radius': 8,
        'circle-color': '#2196F3'
      }
    });
    
    // 组件卸载时自动清理
    return cleanup;
  }, [newData, map]); // 当newData或map实例变化时触发更新
  
  // ...其他组件逻辑
}

额外检查点 #

• 确认nextProps.newData确实是最新的查询结果：可以在生命周期方法里打印日志，确保Redux传递的状态已经更新。
• 确认this.map是正确的Mapbox实例引用：避免因为实例未初始化导致所有操作失效。

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