如何在Leaflet地图中加载data文件夹下的GeoJSON文件？文件不显示

我来帮你一步步定位问题，Leaflet加载GeoJSON不显示通常是由几个常见原因导致的，咱们逐个核对解决：

• 先确认文件路径是否正确
  你用的路径data/street.json是相对HTML文件的位置，得先确保这个路径没问题：比如你的HTML文件在项目根目录，data文件夹和它同级，那路径是对的；如果HTML在子文件夹里，可能要改成../data/street.json。另外可以直接在浏览器地址栏输入完整路径（比如http://localhost:xxxx/data/street.json），看看能不能正常打开文件——如果打不开，说明路径或文件位置肯定错了。

• 检查GeoJSON文件格式是否合法
  Leaflet对GeoJSON的格式要求很严格，哪怕多一个逗号、坐标顺序错了都会加载失败。你可以把文件内容复制到GeoJSON校验工具（比如浏览器控制台也能帮你检测解析错误），确认没有语法问题。特别注意：Leaflet要求GeoJSON的坐标是[经度, 纬度]的顺序，如果搞反了，就算加载成功也可能不在当前地图视图范围内。

• 解决本地打开时的CORS问题
  如果你是直接双击HTML文件（用file://协议打开），浏览器的跨域安全策略会阻止加载本地JSON文件。解决办法是用本地服务器运行项目：

  • Python用户：在项目根目录运行python -m http.server（Python3）或python -m SimpleHTTPServer（Python2）
  • Node.js用户：先安装npm install -g http-server，再在项目根目录运行http-server
    之后用http://localhost:端口号访问HTML文件，就能正常加载本地JSON了。

• 让地图自动适配GeoJSON范围
  有时候GeoJSON加载成功了，但默认地图视图不在它的位置，导致看不到。可以在加载后添加一行代码让地图自动缩放平移到目标区域：

  var geoJsonLayer = L.geoJSON('data/street.json').addTo(map);
  map.fitBounds(geoJsonLayer.getBounds());
  

  如果这样还是看不到，那大概率是前面的步骤有问题。

• 用浏览器控制台看报错信息
  打开浏览器开发者工具（按F12），切换到Console标签，看看有没有加载错误提示：比如404是找不到文件，SyntaxError是GeoJSON格式错误，这些信息能直接帮你定位问题。

另外别忘了确认Leaflet库已经正确加载，地图容器（比如#map元素）的CSS宽高设置正确（比如width: 100%; height: 100vh;），不然地图本身都显示不出来，GeoJSON自然也看不到。

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