Mapbox GL JS无法读取本地GeoJSON文件的问题求助

问题根源是浏览器的本地文件访问安全限制：当你直接打开本地HTML文件（使用file://协议）时，浏览器出于安全考虑，会阻止脚本加载其他本地文件（比如你的../carparks.geojson），而通过Web服务器访问时用的是http/https协议，不受这个限制。

以下是几种可行的解决方案：

1. 启动本地开发服务器（推荐） #

通过本地服务器托管你的项目文件，用http://localhost访问，就能正常加载相对路径的GeoJSON文件：

• Python：在项目根目录打开终端，运行对应版本的命令：

  # Python 2
  python -m SimpleHTTPServer 8000
  
  # Python 3
  python -m http.server 8000
  

  然后在浏览器访问http://localhost:8000打开你的地图页面。

• Node.js：先全局安装http-server工具：

  npm install -g http-server
  

  然后在项目根目录运行：

  http-server
  

  默认访问http://localhost:8080即可。

2. 将GeoJSON内容直接嵌入代码 #

把carparks.geojson的全部内容复制，作为JavaScript对象直接赋值给data属性，无需外部文件引用：

map.on("load", function () {
  map.addSource("my-data", {
    type: "geojson",
    data: {
      "type": "FeatureCollection",
      "features": [
        // 粘贴你的GeoJSON特征数据，比如：
        // {
        //   "type": "Feature",
        //   "properties": {},
        //   "geometry": {
        //     "type": "Point",
        //     "coordinates": [116.397228, 39.9075]
        //   }
        // }
      ]
    }
  });

  map.addLayer({
    id: "my-layer",
    type: "circle",
    source: "my-data",
    paint: {
      "circle-radius": 6,
      "circle-color": "#ffffff", 
      "circle-stroke-color": "green", 
      "circle-stroke-width": 2, 
    },
  });
});

3. 临时调整浏览器安全设置（不推荐） #

仅用于本地测试，不适合生产环境：

• 关闭所有Chrome窗口，然后在终端/命令行运行：

  # Windows
  chrome.exe --allow-file-access-from-files
  
  # macOS
  open -a "Google Chrome" --args --allow-file-access-from-files
  
  # Linux
  google-chrome --allow-file-access-from-files
  

  这个方法会降低浏览器的安全性，建议测试完成后恢复正常启动方式。

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