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