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);
  }
}

UPDATE: 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();
  }
});

openlayers 3 wms getfeatureinfo 弹出窗口

openlayers 3 wms getfeatureinfo popup

javascript

popup

wms

getfeatureinfo

openlayers-3