本文详解如何将加载的 GeoJSON 数据正确渲染到 Leaflet 地图上，重点解决 json.addTo(map) 失败的问题——关键在于必须通过 L.geoJSON() 创建图层实例，而非直接对原始 JSON 对象调用 addTo()。

本文详解如何将加载的 geojson 数据正确渲染到 leaflet 地图上，重点解决 `json.addto(map)` 失败的问题——关键在于必须通过 `l.geojson()` 创建图层实例，而非直接对原始 json 对象调用 `addto()`。

在 Leaflet 中，GeoJSON 数据本身（即通过 $.getJSON 获取的 JavaScript 对象）并不是一个可直接添加到地图的图层，而只是一个符合 GeoJSON 规范的数据结构。Leaflet 提供了专门的 L.geoJSON() 工厂函数，用于将该数据解析、样式化并封装为可交互的地图图层。

✅ 正确做法如下：

$.getJSON('path/to/your/data.geojson', function (geoJsonData) {
    // ✅ 正确：用 L.geoJSON() 创建图层，并添加到地图
    L.geoJSON(geoJsonData).addTo(map);

    // ? 可选：打印图层信息辅助调试
    console.log('GeoJSON layer added:', L.geoJSON(geoJsonData));
});

⚠️ 常见错误示例（即你遇到的问题）：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

// ❌ 错误：json 是纯数据对象，没有 addTo 方法
geoJsonData.addTo(map); // TypeError: geoJsonData.addTo is not a function

? 进阶提示：

• 若需自定义样式（如颜色、线宽、填充透明度），可传入 style 选项：

  L.geoJSON(geoJsonData, {
      style: function (feature) {
          return { color: '#2E8B57', weight: 2, fillColor: '#90EE90', fillOpacity: 0.6 };
      }
  }).addTo(map);

• 支持点、线、面及 FeatureCollection 等所有标准 GeoJSON 类型；
• 可结合 onEachFeature 实现弹窗、事件绑定等交互功能。

? 总结：永远记住——GeoJSON 数据 ≠ Leaflet 图层；必须经 L.geoJSON(data) 实例化后，才能调用 .addTo(map) 渲染。这是 Leaflet 的核心设计原则，也是绝大多数初学者易忽略的关键点。