openlayers 3 wms getfeatureinfo всплывающее окно

Question

Я хочу добавить карту OSM со слоями WMS на мою веб-страницу, которая включает некоторую информацию о слоях. Лучший способ для меня - создать всплывающее окно с запросом 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

Wrapping this in a function would be (not tested):

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 so modify to:

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

---

Maybe you solve with these modifications:

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