Leaflet加载Point类型GeoJSON时报Invalid LatLng错误求助

你的GeoJSON数据中Point类型要素的坐标格式不符合标准规范：

• 标准GeoJSON中，Point类型的coordinates字段应为一维经纬度数组，格式为[lon, lat]
• 你当前的Point坐标多嵌套了一层数组，变成了[[lon, lat]]，这是MultiPoint类型的坐标格式，Leaflet解析Point时读取不到正确的经纬度值，才会抛出Invalid LatLng错误

两种方案二选一即可：

方案1：修正GeoJSON数据格式 #

把所有Point类型要素的coordinates外层多余的数组去掉，修改后的数据示例：

let Points = {"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}},"features":[{"type":"Feature","properties":{"id":"25","name":"Essai Point","activity":"WC","image":"image4.jpg"},"geometry":{"type":"Point","coordinates":[-0.3783868407297,43.304121626953]}},{"type":"Feature","properties":{"id":"27","name":"Essai Point2","activity":"WC","image":"image5.jpg"},"geometry":{"type":"Point","coordinates":[-0.378387,43.30413]}}]}

方案2：不修改原始数据，在pointToLayer回调中手动调整坐标 #

如果无法修改原始GeoJSON数据，可以在渲染时手动提取内层的坐标数组：

let circles = L.geoJson(Points, {
    pointToLayer: function (feature, latlng) {
        // 手动取出嵌套的坐标值
        let realLatlng = L.latLng(feature.geometry.coordinates[0][1], feature.geometry.coordinates[0][0]);
        return L.circleMarker(realLatlng, style);
    }
}).addTo(mymap);

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