在选择时将 wfs 属性显示为标签答案

【问题标题】：show wfs attributes as label on selection在选择时将 wfs 属性显示为标签
【发布时间】：2019-04-23 07:41:03
【问题描述】：

我试图在我的 openlayer3 应用程序中将来自 geoserver 的 wfs gml 层的属性显示为标签。我成功地将标签作为文本获取，但无法访问特定属性“名称”。给出的是我正在使用的代码。

var sourceWFS = new ol.source.Vector({
    loader: function (extent) {
        $.ajax('..../geoserver/harry/ows?', {
            type: 'GET',
            data: {
                service: 'WFS',
                version: '1.1.0',
                request: 'GetFeature',
                typename: 'ABC',
                srsname: 'EPSG:3857',
                geometryField:'geometry',
                bbox: extent.join(',') + ',EPSG:3857'
            }

        }).done(function (response) {
            sourceWFS.addFeatures(formatWFS.readFeatures(response));
        });
    },
    strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ()),
    strategy: ol.loadingstrategy.bbox,
    projection: 'EPSG:3857',

});
var layerWFS = new ol.layer.Vector({
    source: sourceWFS
});

var interaction;

var interactionSelectPointerMove = new ol.interaction.Select({
    condition: ol.events.condition.pointerMove
});

var interactionSelect = new ol.interaction.Select({


    style: new ol.style.Style({ 

            stroke: new ol.style.Stroke({
                color: 'rgba(255,0,0,1.0)',
                width: 1
            }),
            fill: new ol.style.Fill({
                color: 'rgba(255,0,0,0.5)'
            }),
            text: new ol.style.Text({
                text:("abcd")
            })


        })
});

var interactionSnap = new ol.interaction.Snap({
    source: layerWFS.getSource()
});

我将abcd 作为选择标签

【问题讨论】：

标签： styles label openlayers-3 geoserver

【解决方案1】：

您将需要一个样式函数来从您希望显示的任何特性属性中设置样式中的文本

var selectStyle = new ol.style.Style({ 

            stroke: new ol.style.Stroke({
                color: 'rgba(255,0,0,1.0)',
                width: 1
            }),
            fill: new ol.style.Fill({
                color: 'rgba(255,0,0,0.5)'
            }),
            text: new ol.style.Text({
                text:("abcd")
            })

        });



var interactionSelect = new ol.interaction.Select({

    style: function(feature) {

            selectStyle.getText().setText(feature.get('name'));
            return selectStyle;

        }

});

【讨论】：

我尝试了相同但无法访问属性我没有收到任何错误但标签未显示。是 selectStyle.getText().setText(feature.get('name'));从地理服务器层获取标签的正确语法
我的答案缺少return 行
如果您不确定要使用哪个属性，您可以使用console.log(feature.getProperties()); 来检查可用的属性。

【解决方案2】：

默认情况下，您不会获得任何被 GML 属性“隐藏”的属性。最常见的“缺失”属性是name 和id。您可以通过检查 WFS 服务页面中的 Override GML Attributes 以了解您的客户请求的 GML 版本来关闭此（符合标准的）行为。

【讨论】：

【解决方案3】：

您实际显示的是“abcd”字符串本身，而不是“abcd”属性的值。要访问ol.Style 中的某些特性属性值，您必须使用StyleFunction，如下所示：

    style: function(feature, resolution){
             return new ol.style.Style({ 
                    stroke: new ol.style.Stroke({
                        color: 'rgba(255,0,0,1.0)',
                        width: 1
                    }),
                    fill: new ol.style.Fill({
                       color: 'rgba(255,0,0,0.5)'
                    }),
                    text: new ol.style.Text({
                       text: feature.get("abcd");
                    })
              })
           }

【讨论】：