React应用中Mapbox地图无法显示GeoJSON对象的故障排查

我正在开发一个React.js应用，需要在Mapbox地图上显示GeoJSON对象。地图初始化正常，但GeoJSON对象无法显示。以下是相关代码：

useEffect(() => {
  if (map.current) return; // Prevent reinitializing

  map.current = new mapboxgl.Map({
    container: mapContainerRef.current,
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-97.328, 35.204],
    zoom: zoomLevel
  });

  console.log("THIS APPEARS IN CONSOLE");

  // Wait to do anything until after the map is loaded
  map.current.on('load', () => {
    console.log("THIS DOES NOT APPEAR IN CONSOLE");

    // Add the GeoJSON data as a source
    map.current.addSource('featureData', {
      type: 'geojson',
      data: 'features.geojson' // Update this path to your GeoJSON file
    });

    console.log("NEITHER DOES THIS")

    // Add a layer to display the features
    map.current.addLayer({
      id: 'initialfeatures',
      type: 'symbol',
      source: 'featureData',
      layout: {
        'icon-image': 'airport-15',
        'icon-allow-overlap': true,
        'icon-size': 2
      }
    });
  });
}, []);

以下是我的GeoJSON文件示例（本次测试仅包含4个对象）：

"type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [35.22242612285483, -97.43936146979259]
      },
      "properties": {
        "object": "traffic signal"

已尝试的排查措施 #

• 确认mapContainerRef引用正确
• 检查'load'事件触发前是否存在错误
• 确认GeoJSON文件位置正确（位于与src文件夹同级的public文件夹中）
• 验证Mapbox访问令牌
• 检查网络请求是否存在失败请求（注意：未发现加载该文件的请求）

问题分析与解决建议 #

1. 优先解决load事件未触发的核心问题 #

你提到地图初始化正常，但load事件内的日志无输出，说明地图的load事件未触发，需排查以下点：

• 确保在地图初始化前正确设置Mapbox访问令牌：

  import mapboxgl from 'mapbox-gl';
  mapboxgl.accessToken = '你的令牌内容'; // 必须在new mapboxgl.Map前执行
  

• 检查浏览器控制台的错误日志（不要只看自定义的console.log），地图初始化可能存在隐藏错误（如令牌无效、容器无尺寸等）
• 给地图容器设置明确的宽高样式，无尺寸的容器会导致地图加载异常：

  .map-container {
    width: 100%;
    height: 400px;
  }
  

2. 修复GeoJSON的两个关键错误 #

你的GeoJSON存在格式和坐标逻辑问题：

• 格式不完整：提供的示例缺少闭合的}，完整的FeatureCollection结构应为：

  {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [-97.43936146979259, 35.22242612285483]
        },
        "properties": {
          "object": "traffic signal"
        }
      }
    ]
  }
  

• 坐标顺序错误：Mapbox严格遵循**[经度, 纬度]**的顺序，你原坐标是[纬度, 经度]，即使加载成功也会显示在错误位置（不在当前地图中心范围内）

3. 修正GeoJSON文件路径 #

文件放在public文件夹下时，需使用根路径开头的绝对路径，确保Mapbox能正确请求到文件：

map.current.addSource('featureData', {
  type: 'geojson',
  data: '/features.geojson' // 加上开头的/
});

4. 额外验证点 #

• 确认map和mapContainerRef是用useRef正确声明的：

  const map = useRef(null);
  const mapContainerRef = useRef(null);
  

• 若仍无GeoJSON的网络请求，说明load事件未触发，回到第一步排查地图初始化的隐藏错误

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