WFS 层 Openlayers 中的弹出窗口

Question

早安。

要使用 wfs 层，使用 Leaflet 还是 openlayers 更好？

我有一个从地理服务器返回 WFS 的 openlayers 代码。但我无法在弹出窗口中显示属性。有谁能够帮助我？ 谢谢

Answer 1

您可以尝试 ol-ext ol/Overlay/PopupFeature 在弹出窗口中显示特征属性。 参见示例：https://viglino.github.io/ol-ext/examples/popup/map.popup.feature.html

Answer 2

按照https://viglino.github.io/ol-ext/examples/popup/map.popup.feature.html 的示例，我有这段代码，其中我的 WFS 层包含 id 和 name 属性，但是，它在弹出窗口中没有显示任何内容

    var vectorSource = new ol.source.Vector({
            format: new ol.format.GeoJSON(),
            url: function(extent) {
            return 'http://localhost:8080/geoserver/teste/wfs?service=WFS&' +
              version=1.1.0&request=GetFeature&typename=teste:MYLAYER&' +
              'outputFormat=application/json&srsname=EPSG:4326&' +
              'bbox=' + extent.join(',') + ',EPSG:4326';
            },
            strategy: ol.loadingstrategy.bbox
        });
 
 
        var vector = new ol.layer.Vector({
            source: vectorSource,
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgba(0, 0, 255, 1.0)',
                    width: 2
                })
            })
        });
               
        var layers = [
            new ol.layer.Tile({source: new ol.source.OSM()}),
            vector,
        ];
        var map = new ol.Map({
            layers: layers,
             interactions: ol.interaction.defaults({ altShiftDragRotate:false, pinchRotate:false }),
            target: 'map',
            view: new ol.View({
                center: ol.proj.fromLonLat([-46.444137, -23.713596]),
                zoom: 12
            })
        });
        
  var select = new ol.interaction.Select({
    hitTolerance: 5,
    multi: true,
    condition: ol.events.condition.singleClick
  });
 map.addInteraction(select);

  var popup = new ol.Overlay.PopupFeature({
    popupClass: 'default anim',
    select: select,
    canFix: true,
    template: {
        title: 
          function(f) {
            return f.get('nome')+' ('+f.get('id')+')';
          },
        attributes: // [ 'id', 'nome' ]
        {
          'nome': { title: 'Nome' },
          'id': { title: 'Id' },
        
        }
    }
  });
 map.addOverlay (popup);

Answer 3

这是弹出代码。我有 3 层：layer1、layer2 和 layer3。 对于 layer1，ID 我想显示为 ID。对于 layer2，我想将 ID 显示为 CODE，而对于其他层，我不想显示 ID 属性。 我应该如何更改模板？谢谢

 var popup = new ol.Overlay.PopupFeature({
    popupClass: 'default anim',
    select: select_interaction,
    canFix: true,
    template: {
        title: 
            function(f) {
                return f.get('NAME')+' ('+f.get('ID')+')';
            },
        attributes: 
        {
            'ID': { title: 'ID' },
            // with prefix and suffix
            'POP': { 
                title: 'População',  // attribute's title
                before: '',           // something to add before
                format: ol.Overlay.PopupFeature.localString(),  // format as local string
                after: ' hab.'        // something to add after
            }, 
        }
    }
});

Answer 4

@user12538529
您必须为每个案例创建一个函数并返回模板：

// Create templates
var templateID = { ... }; 
var templateCODE = { ... };
// Popup with a template function
var popup = new ol.Overlay.PopupFeature({
    popupClass: 'default anim',
    select: select_interaction,
    canFix: true,
    template: function(feature) {
      var prop = feature.getProperties();
      // Test if has property ID
      if (prop.hasOwnProperty('ID')) return templateID;
      // or property CODE
      else if (prop.hasOwnProperty('CODE')) return templateCODE;
    }
});