如何在Leaflet地图中添加已获取的GeoJSON数据？

你直接调用json.addTo(map)无效的原因是：通过$.getJSON获取到的json是纯JavaScript对象，并不是Leaflet的图层实例，所以它没有addTo()这个方法。

正确的做法是用Leaflet提供的L.geoJSON()方法，把GeoJSON对象转换为Leaflet可识别的图层，再添加到地图：

$.getJSON(geojson, function (json) {
    console.log(typeof json)
    console.log(json)
    // 将GeoJSON对象转为Leaflet图层并添加到地图
    const geoJsonLayer = L.geoJSON(json);
    geoJsonLayer.addTo(map);
});

如果需要给GeoJSON要素自定义样式，可以在创建图层时传入样式配置：

$.getJSON(geojson, function (json) {
    const geoJsonLayer = L.geoJSON(json, {
        style: function(feature) {
            return {
                color: '#ff0000', // 边框颜色
                weight: 2, // 边框宽度
                fillColor: '#ffcccc', // 填充色
                fillOpacity: 0.5 // 填充透明度
            };
        }
    });
    geoJsonLayer.addTo(map);
});

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