Leaflet地图中AJAX动态加载GeoJSON图层失败问题

核心原因 #

AJAX请求默认返回的response是字符串格式的GeoJSON文本，而Leaflet的L.geoJson()方法需要接收的是JavaScript对象，不是原始字符串。

之前通过JS文件引入时，var regions = {...}是直接定义的JS对象，所以能被L.geoJson()直接识别；但AJAX返回的是未解析的文本字符串，自然无法被正确处理。

解决方案 #

有两种常用的解决方式：

方式一：让jQuery自动解析JSON #

在AJAX配置中添加dataType: 'json'，jQuery会自动将返回的文本解析为JS对象，此时success回调里的response直接可用：

$.ajax({
  url: "getRegions.ashx",
  cache: false,
  type: "post",
  async: false,
  dataType: 'json', // 开启自动JSON解析
  success: function (response) { 
       var newGeoJsonLayerGroup = L.geoJson(response, {
           // 你的图层配置
       }).addTo(map);            
  }
});

方式二：手动解析JSON字符串 #

如果无法修改AJAX的dataType配置，可以在success回调中用JSON.parse()将字符串手动转为JS对象：

$.ajax({
  url: "getRegions.ashx",
  cache: false,
  type: "post",
  async: false,
  success: function (response) { 
       var regions = JSON.parse(response); // 手动解析字符串
       var newGeoJsonLayerGroup = L.geoJson(regions, {
           // 你的图层配置
       }).addTo(map);            
  }
});

额外注意事项 #

如果手动解析时出现报错，大概率是返回的GeoJSON文本存在语法错误（比如多余的逗号、引号不匹配、格式不符合GeoJSON规范），可以直接复制返回的内容到JSON校验工具中检查修正。

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