Django Web应用加载PostGIS的Shapefile时报getJson未定义如何解决？

• 你使用的Leaflet.Geoserver插件请求WFS服务时默认采用JSONP格式传输数据，Geoserver返回的JSONP响应格式为getJson(GeoJSON数据)，要求前端全局存在名为getJson的回调函数处理返回结果，你的页面未定义该全局函数，因此触发getJson is not defined报错。
• jQuery在解析JSONP响应时找不到对应的回调函数，因此抛出parsererror类型的解析错误。
• 额外可能触发问题的场景：资源引入顺序错误（未按jQuery → Leaflet → Leaflet.Geoserver的顺序引入依赖）、Geoserver未开启跨域或JSONP支持。

方案1：使用CORS替代JSONP（更稳定，推荐） #

该方案不需要额外定义回调函数，避免JSONP的安全风险和兼容性问题：

1. 开启Geoserver的CORS支持：打开Geoserver安装目录下webapps/geoserver/WEB-INF/web.xml，找到CORS过滤器的注释代码，解开注释后重启Geoserver。
2. 修改WFS图层初始化代码，明确指定普通JSON格式、禁用JSONP：

var wfsLayer_solos = L.Geoserver.wfs("http://localhost:8080/geoserver/wfs", {
  layers: "gic:solos1_2_4326",
  outputFormat: "application/json",
  jsonp: false, // 禁用JSONP请求
  style: {
    color: "black",
    fillOpacity: "0",
    opacity: "0.5",
  },
  onEachFeature: function (feature, layer) {
    layer.bindPopup('<pre>'+JSON.stringify(feature.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>');
  },
});

方案2：保留JSONP模式，补充全局回调函数 #

如果需要继续使用JSONP，提前在页面JS全局作用域定义getJson回调即可：

// 定义全局回调函数，处理Geoserver返回的JSONP数据
window.getJson = function (geoJsonData) {
  L.geoJSON(geoJsonData, {
    style: {
      color: "black",
      fillOpacity: "0",
      opacity: "0.5",
    },
    onEachFeature: function (feature, layer) {
      layer.bindPopup('<pre>'+JSON.stringify(feature.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>');
    }
  }).addTo(map); // 注意替换为你自己的地图实例变量名
};

使用该方案需要先确认Geoserver全局设置中「启用JSONP」选项已勾选。

前置检查项 #

确认页面资源引入顺序正确，避免依赖加载顺序错误导致的插件异常：

1. 引入jQuery
2. 引入Leaflet核心库
3. 引入Leaflet.Geoserver插件

内容的提问来源于stack exchange，提问作者Bárbara Duarte