在 Firefox 中解析本地文件期间在 geoJSON 上获取 "not well formed"

Question

我正在使用 jquery 解析 geoJSON 文件，并尝试将解析后的 geoJSON 数据添加到回调中的传单地图层。我在 geoJSON 文件中收到 "not well formed" 错误。我已经通过 geoJSON 在线 lint 检查器将 geoJSON 文件内容放入其中，并且检查结果良好 (http://geojsonlint.com/)。在文件上调用 $.ajax() 之前，我已经设置了预期的 mime 类型（并检查文件确实是那个 mime 类型（utf-8）。我完全不确定为什么它告诉我它的格式不正确。尝试对文件执行 $.getJSON() 时，我也得到了 "not well formed" 。我知道这与文件解析有关，因为如果我将数据直接放在脚本中的变量中，然后执行 "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 文件时，您会在回调参数中得到一个 字符串 。

因此您需要先解析它，将其转换为JSON对象，然后Leaflet L.geoJson才能使用它。

$.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

好的，这修复了它（得到了这个 link 的帮助，在它起作用之前必须混合两个答案："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 中解析本地文件期间在 geoJSON 上获取 "not well formed"

Getting "not well formed" on geoJSON during parse of local file in Firefox

jquery

geojson

leaflet