2

我想将带有 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。

问候，卡罗琳娜

4

1 回答 1

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();
  }
});
于 2015-11-13T16:26:01.010 回答