Leaflet中通过URL导入远程GeoJSON图层失败求助

你的代码核心问题是L.geoJson构造函数不能直接传入URL——它的第一个参数需要是解析后的GeoJSON对象，而非远程地址。另外代码里的async选项不是L.geoJson的合法配置，loaded事件也不会触发，因为根本没有发起数据请求。

修正步骤与代码 #

用fetchAPI先请求并解析GeoJSON数据，再创建图层：

// 确保baseMaps和map已经提前定义完成
fetch('https://github.com/zeke/us-counties/blob/master/county.geo.json?raw=true')
  .then(res => res.json())
  .then(geoData => {
    // 创建郡县图层，可自定义样式
    const countiesLayer = L.geoJson(geoData, {
      style: function(feature) {
        return { color: '#ccc', weight: 1, fillOpacity: 0.1 };
      }
    });

    // 图层添加到地图后自动缩放至边界
    countiesLayer.on('add', () => {
      map.fitBounds(countiesLayer.getBounds());
    });

    // 配置叠加图层并添加控制器
    const overlays = {
      "Counties": countiesLayer
    };
    L.control.layers(baseMaps, overlays).addTo(map);
  })
  .catch(err => {
    console.log('数据加载失败:', err);
  });

额外注意事项 #

• 如果遇到CORS跨域错误，说明GitHub的raw地址暂时不允许跨域请求，你需要将这个GeoJSON文件下载到自己的服务器托管，或者使用本地文件测试。
• 查看浏览器控制台的具体错误信息（比如404、CORS提示），能更快定位问题。

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