OpenLayers getFeatureInfoUrl调用后弹窗空白求助

云原生阿岚

2026-8-15

问题描述

我参考OpenLayers官网示例，尝试更新由qgis2web导出的OpenLayers 3代码（原代码调用的iframe已失效）。目前遇到弹窗空白的问题，我已上传示例项目，在qgis2web.js中编写了如下代码来查询WMS图层并在弹窗展示结果，但弹窗始终为空，请问原因是什么？

相关代码

var viewProjection = map.getView().getProjection();
var viewResolution = map.getView().getResolution();
for (i = 0; i < wms_layers.length; i++) {
  if (wms_layers[i][1]) {
    var url = wms_layers[i][0].getSource().getFeatureInfoUrl(
      evt.coordinate, viewResolution, viewProjection, {
        INFO_FORMAT: "text/html"
      });
    if (url) {
      fetch(`https://api.allorigins.win/raw?url=${url}`)
        .then((response) => response.text())
        .then((html) => {
          overlayPopup.setPosition(coord);
          content.innerHTML = html;
          container.style.display = "block";
        });
    }
  }
}

问题截图

弹窗空白截图

问题排查与解决建议

变量不统一：生成请求URL用的是evt.coordinate，设置弹窗位置却用coord，两个变量未统一，可能导致请求坐标错误或弹窗定位异常，建议替换为同一个变量（比如都用evt.coordinate）。
代理请求响应异常：使用api.allorigins.win代理跨域请求，需检查：
- 在浏览器开发者工具的Network面板查看fetch请求的响应内容，确认是否获取到有效HTML；
- 直接访问未经过代理的url，验证WMS服务本身是否返回了预期的查询结果。如果WMS服务无数据返回，弹窗自然为空。
版本API兼容性：参考的是新版OpenLayers示例，但当前用的是OpenLayers 3，部分API可能存在差异。核对OL3官方文档，确认getFeatureInfoUrl的参数格式是否完全适配。
图层可见性判断逻辑：wms_layers[i][1]用于判断图层可见性，需确认该值的判断逻辑是否正确，是否确实选中了当前可见的WMS图层发起请求。