openlayers 3 wms getfeatureinfo 弹出窗口

Question

我想在我的网页中添加一个带有 WMS 图层的 OSM 地图，其中包含一些关于图层的信息。对我来说最好的方法是使用 getFeatureInfoUrl 请求创建弹出窗口，但不幸的是我没有这样做的经验。我尝试了很多代码和教程，但都不起作用。

我是这样写的：

var osm = new ol.layer.Tile({
	source: new ol.source.OSM()
});
var wms = new ol.layer.Tile({
	source: new ol.source.TileWMS(({
	url: 'http://localhost:8081/geoserver/KORTOWO/wms',
	params: {'LAYERS': 'roads', 'TILED': "true"},
	serverType: 'geoserver',
 })),
 title: "Roads"
});


var map = new ol.Map({
    target: 'map',
    layers: [osm,wms],
    view: new ol.View({
        center: ol.proj.transform([20.45, 53.75], 'EPSG:4326', 'EPSG:3857'),
        zoom: 14
    })
});


var popup = new ol.Overlay.Popup();
map.addOverlay(popup);

map.on('singleclick', function(evt) {
popup.getElementById('info').innerHTML = '';
  var viewResolution = /** @type {number} */ (view.getResolution());
  var url = wms.getGetFeatureInfoUrl(
      evt.coordinate, viewResolution, 'EPSG:3857',
      {'INFO_FORMAT': 'text/html'});
  if (url) {
    popup.getElementById('info').innerHTML =
        '<iframe seamless src="' + url + '"></iframe>';
  }
    
    popup.show(evt.coordinate, url);
});

您能帮我修改代码以使其正常工作吗？我正在使用 OpenLayers3。

您好， 卡罗琳娜

Answer 1

更新 2

将其包装在一个函数中将是（未测试）：

map.on('singleclick', function(evt) {
    var layerWithWmsSource = map.forEachLayerAtPixel(evt.pixel, 
            function(layer) {
        // return only layers with ol.source.TileWMS
        var source = layer.getSource();
        if (source instanceof ol.source.TileWMS) {
            return layer;
        }
    });
    if (layerWithWmsSource) {
        getInfo(evt, layerWithWmsSource);
    }
});

function getInfo(evt, layer) {
  var resolution = map.getView().getResolution();
  var url = layer.getSource().getGetFeatureInfoUrl(evt.coordinate, 
    resolution, 'EPSG:3857', {'INFO_FORMAT': 'text/html'});
  if (url) {
    var content = '<p>' + url + '</p>';
    popup.show(evt.coordinate, content);
  }
}

---

更新：getGetFeatureInfoUrl()是ol.source.TileWMS的方法，所以修改为：

var url = wms.getSource().getGetFeatureInfoUrl(evt.coordinate, resolution,
        'EPSG:3857', {'INFO_FORMAT': 'text/html'});

---

也许你可以通过这些修改来解决：

map.on('singleclick', function(evt) {
  var resolution = map.getView().getResolution();

  var url = wms.getSource().getGetFeatureInfoUrl(evt.coordinate, resolution,
    'EPSG:3857', {'INFO_FORMAT': 'text/html'});

  if (url) {
    // maybe you don't want|need an <iframe> inside popup
    var content = '<iframe seamless src="' + url + '"></iframe>';
    popup.show(evt.coordinate, content);
  } else {
    // maybe you hide the popup here
    popup.hide();
  }
});