单击时从多个 Geoserver 图层获取要素属性 - 打开图层 3答案

【问题标题】：get feature attributes from multiple Geoserver layers on click - open layers 3单击时从多个 Geoserver 图层获取要素属性 - 打开图层 3
【发布时间】：2017-12-21 05:20:36
【问题描述】：

我正在尝试使用 OpenLayers 3 和 Geoserver 提供的图层从地图单击上的多个图层中获取属性。

我找到了这个 sn-p，但它使用的是旧版本的 Open Layers，我没有找到任何与 Open Layers 3 以相同方式工作的东西

http://dev.openlayers.org/examples/getfeatureinfo-popup.html

【问题讨论】：

标签： popup openlayers-3 geoserver getfeatureinfo

【解决方案1】：

OpenLayers 示例 WMS GetFeatureInfo (Layers) 正好说明了这一点。

<script>
  var wmsSource = new ol.source.TileWMS({
    url: 'https://ahocevar.com/geoserver/wms',
 // Add as many layers as you like here!! 
    params: {'LAYERS': 'ne:ne', 'TILED': true},
    serverType: 'geoserver',
    crossOrigin: 'anonymous'
  });

  var wmsLayer = new ol.layer.Tile({
    source: wmsSource
  });

  var view = new ol.View({
    center: [0, 0],
    zoom: 1
  });

  var map = new ol.Map({
    layers: [wmsLayer],
    target: 'map',
    view: view
  });

  map.on('singleclick', function(evt) {
    document.getElementById('info').innerHTML = '';
    var viewResolution = /** @type {number} */ (view.getResolution());
// Here all the layers in the wmsSource will be added to the URL
    var url = wmsSource.getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, 'EPSG:3857',
        {'INFO_FORMAT': 'text/html'});
    if (url) {
      document.getElementById('info').innerHTML =
          '<iframe seamless src="' + url + '"></iframe>';
    }
  });

【讨论】：

我确实遇到过这个例子，但我不确定如何调整它以与可见地图一起使用，以便我在该点击点从图层中检索所有且仅属性。
可能是openlayers.org/en/latest/examples/getfeatureinfo-tile.html 之类的东西？
我也看过那个例子，它提供了一层的信息。我需要类似我在问题中发布的示例，单击即可提供两层的格式化信息
然后使用第二个例子中的第一个例子查询所有层。
这两个例子使用了非常不同的方法和不同的功能。

【解决方案2】：

这似乎可行..第一个答案的简单变体 - 如果有重叠的特征，这将检索和显示来自多层和每层中的多个特征的属性

var layerlist = [wmsLayer, wmsLayer2];
var info = [];

map.on('singleclick', function(evt) {
  info = [];

for (i=0; i<layerlist.length; i++)
  getInfo(evt, layerlist[i]);
});

function getInfo(evt, layer) {
  var resolution = map.getView().getResolution();
  var coordinate = evt.coordinate;
  var pixel = evt.pixel;
  var thislayer = layer.getSource().getParams().LAYERS;


  var url = layer.getSource().getGetFeatureInfoUrl(evt.coordinate,
    resolution, 'EPSG:3857', {'INFO_FORMAT': 'application/json', 'FEATURE_COUNT': 50 });

if (url) {
      var parser = new ol.format.GeoJSON();
        var lookup = {};
       $.ajax({url: url,
          dataType: 'json',
          success:function(response) {
            var result = parser.readFeatures(response);
            if ((result.length > 0) && (wmsLayer.getVisible()==true)) {
              for (var i = 0, ii = result.length; i < ii; ++i) {
               var text = result[i].get("id");
               var param_name; 
               // to populate different field values from different layers in info popup
               if (thislayer == 'thisname' ){

                 param_name = result[i].get("param1");
               } else {
                 param_name = result[i].get("param2");
               }

                    info.push( param_name); 
              }
                content.innerHTML  = '<p><strong>ID: </strong>' + info.join(', ');


           overlay.setPosition(coordinate);
        }
      }
    });
  }

【讨论】：