本文详解如何将加载的 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));
});

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

Aria2 Json Rpc

通过 JSON‑RPC 2.0 与 aria2 下载管理器交互，使用自然语言命令管理下载、查询状态并控制任务。适用于 aria2、下载管理或种子操作。

下载

// ❌ 错误：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 的核心设计原则，也是绝大多数初学者易忽略的关键点。