Question

我正在使用jquery来解析geoJSON文件，并尝试将解析后的geoJSON数据添加到回调中的传单地图图层上。我在geoJSON文件上遇到“格式不正确”的错误。我已经通过geoJSON在线lint检查器放置了geoJSON文件内容，并检查了良好的（http://geojsonlint.com/）。我在调用文件上的$ .ajax（）之前设置了预期的mime类型（并检查该文件确实是mime-type（utf-8）。我完全不确定为什么告诉我它没有很好的形成。在尝试对文件执行$ .getJSON（）时，我也得到了“格式不正确”。我知道这与文件解析有关，因为如果我将数据直接放在脚本中的变量中，那么请执行“L.geoJson（data，{}）。addTo（map1）;”那就行了。

这是geoJSON文件内容：

{
    "type":  "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    97.971119, 
                    45.903952
                ]
            },
            "properties": {
                "title":  "Location in Mongolia",
                "address":  "plains of Mongolia"
            }
        }
    ]
}

以下是相关代码：

        $.ajaxSetup({
            scriptCharset: "utf-8",
            contentType: "application/json; charset=utf-8"
        });
        //style: myStyle
        $.ajax('SimplestExampleGeoJSON.geojson').done(function(data) {
          L.geoJson(data, {

          }).addTo(map1);
        });

Answer 1

当您通过jQuery的$.ajax方法加载JSON文件时，您的回调参数中会出现字符串。

因此，在Leaflet L.geoJson可以使用之前，您需要首先解析它以将其转换为JSON对象。

$.ajax('SimplestExampleGeoJSON.geojson').done(function(data) {
  data = JSON.parse(data); // Convert string into JSON object.

  L.geoJson(data).addTo(map1);
});

演示：http://plnkr.co/edit/sQ70DNH1bALEPmUgjBLw?p=preview

Answer 2

好的，这解决了它（在这个链接的帮助下，必须在它起作用之前混合两个答案："not well-formed" warning when loading client-side JSON in Firefox via jQuery.ajax）问题是Firefox特定的.ajax问题与本地文件和mime类型。以下是对.ajax的更改，以使其与Firefox一起使用：

               $.ajax({
                  url: "SimplestExampleGeoJSON.json",
                  beforeSend: function(xhr){
                    if (xhr.overrideMimeType)
                    {
                      xhr.overrideMimeType("application/json");
                    }
                  },
                  dataType: 'json',
                  data: null,
                  success:  function(data, textStatus, request) {
                    L.geoJson(data, { }).addTo(map1);
                  }
                });

Answer 3

我自己遇到了这个问题（完全相同-将Leaflet与GeoJSON文件一起使用）。我发现比重写代码更简单的解决方案。如果您只是将要读取的文件从*.geojson重命名为*.json，则可以正常工作。例如，此代码可以正常工作而不会引发解析错误：

$.getJSON({
    url: "./static/boundaries/admin1_us.json",
}).done(function(admin1USGeoJSON) {
    // load state polygons, set style and interactive functions
    usGeoJSON = L.geoJson(admin1USGeoJSON).addTo(usMap);
});

但是，如果文件名为admin1_us.geojson，则Firefox会抛出XML解析错误。

在Firefox

3 个答案: