Mapbox中addSource将GeoJSON变量识别为URL致404，如何用变量加载？

问题核心是你传入的geojson是JSON字符串，Mapbox的addSource方法会将字符串类型的data参数默认识别为URL地址，导致它尝试请求一个不存在的地址，从而出现404错误。

解决方法：将JSON字符串解析为JavaScript对象后再传入data参数，使用JSON.parse()方法即可完成转换。

修改后的代码示例：

this.map.on('load', () => {
  const layers = this.map!.getStyle().layers;
  const labelLayerId = layers.find(
    (layer) => layer.type === 'symbol' && layer.layout!['text-field']
  )!.id;
  const geojsonStr = '{"type": "FeatureCollection","features": [...some data]}';
  // 解析字符串为JavaScript对象
  const geojsonData = JSON.parse(geojsonStr);
  this.map!.addSource('chungbuk-data-source', {
    type: 'geojson',
    data: geojsonData
  });
});

如果你的GeoJSON数据本身就是JavaScript对象（而非字符串），可以直接传入data参数，无需额外解析：

this.map.on('load', () => {
  const layers = this.map!.getStyle().layers;
  const labelLayerId = layers.find(
    (layer) => layer.type === 'symbol' && layer.layout!['text-field']
  )!.id;
  // 直接定义为JS对象
  const geojsonData = {
    type: "FeatureCollection",
    features: [...some data]
  };
  this.map!.addSource('chungbuk-data-source', {
    type: 'geojson',
    data: geojsonData
  });
});

这样Mapbox就会将data识别为本地GeoJSON数据，而非外部URL，404问题即可解决。

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