OpenLayers点击GeoServer多边形弹窗无响应问题求助

问题场景 #

开发城市地图门户时，使用OpenLayers加载GeoServer发布的WMS建筑图层，点击地图上的多边形要素，无法弹出显示属性信息的窗口。已尝试参考GIS教程、OpenLayers官方示例、检查GeoServer数据、开启浏览器弹窗权限等操作，问题仍未解决。

可能的问题点及修复方案 #

1. 坐标系不匹配 #

地图视图通过ol.proj.fromLonLat转换后默认使用EPSG:3857，但原代码getFeatureInfoUrl中指定了EPSG:5514，导致坐标转换错误，GeoServer无法匹配到对应要素。

2. jQuery重复引入 #

HTML中重复引入了jQuery库，可能导致脚本冲突。

3. 图层标题语法错误 #

buildings图层的title属性多了一个前置双引号，可能引发潜在解析问题。

4. 缺失错误处理逻辑 #

$.getJSON请求失败时没有错误回调，无法排查请求是否成功或返回数据格式是否正确。

5. 未验证返回数据有效性 #

未判断GeoServer返回的要素数组是否为空，可能因无匹配要素导致脚本报错。

修复后的完整代码 #

HTML（修改点：移除重复的jQuery引入） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css">
    <link rel="stylesheet" href="/resource/ol/ol.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <title>Popup test</title>
</head>
<body>
    <div id="map" class="map"></div>
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
    <script src="/resource/ol/ol.js"></script>
    <script src="main.js"></script>
</body>
</html>

CSS（无修改） #

#map {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.ol-popup {
    position: absolute;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}
.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}
.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}
.ol-popup-closer:after {
    content: "✖";
}

JS（标注修改点） #

var mapView = new ol.View ({
  center: ol.proj.fromLonLat ([18.4301100, 49.8452658]),
  zoom: 12,
});

var map = new ol.Map ({
  target: 'map',
  view: mapView,
  controls:[],
});

var osmTile = new ol.layer.Tile ({
  title: 'Open Street Map',
  visible: true,
  source: new ol.source.OSM(),
});

map.addLayer(osmTile);

var buildings = new ol.layer.Tile ({
  // 修改点：移除多余的前置双引号
  title: 'Budovy města',
  source: new ol.source.TileWMS({
    url:'http://192.168.1.214:8080/geoserver/GIS/wms',
    params:{'LAYERS':'GIS:budovy_meu', 'TILED':true},
    serverType:'geoserver',
    visible: true,
  })
});

map.addLayer(buildings);

// popup
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

var popup = new ol.Overlay ({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250,
  },
});

map.addOverlay(popup);

closer.onclick = function(){
  popup.setPosition(undefined);
  closer.blur();
  return false;
};

map.on("singleclick", function(evt){
  content.innerHTML = '';
  var resolution = mapView.getResolution();
  // 修改点：使用地图视图的投影（默认EPSG:3857），与GeoServer图层投影保持一致
  var projection = mapView.getProjection();
 
  var url = buildings.getSource().getFeatureInfoUrl (evt.coordinate, resolution, projection, {
      'INFO_FORMAT': 'application/json',
      'propertyName': 'adresa,odbor',
  });

  if (url){ 
      // 修改点：添加错误处理回调，排查请求问题；增加要素数组有效性判断
      $.getJSON(url, function (data){
          if (data.features && data.features.length > 0) {
              var feature = data.features[0];
              var props = feature.properties;
              content.innerHTML = `<h3>Adresa : </h3> <p>${props.adresa.toUpperCase()}</p> <br> <h3> Odbor : </h3> <p>${props.odbor.toUpperCase()}</p>`;
              popup.setPosition(evt.coordinate);
          } else {
              popup.setPosition(undefined);
          }
      }).fail(function(jqXHR, textStatus, errorThrown) {
          console.error('GetFeatureInfo请求失败:', textStatus, errorThrown);
          popup.setPosition(undefined);
      });
  } else {
      popup.setPosition(undefined);
  }
});

验证步骤 #

1. 确认GeoServer服务地址http://192.168.1.214:8080/geoserver/GIS/wms可访问，图层GIS:budovy_meu存在且包含adresa、odbor属性。
2. 打开浏览器开发者工具（F12），切换到控制台和网络标签：
   • 点击地图时检查是否有JS报错
   • 查看GetFeatureInfo请求的状态码和返回数据是否正确
3. 确保buildings图层处于可见状态，点击多边形区域测试弹窗是否正常显示。

内容的提问来源于stack exchange，提问作者Standa Tokoš