WFS point layer label is not displaying on OpenLayers 3

305 Views Asked by At

I have loaded the WFS point layer data from GeoServer successfully. And I can plot the point layer also, but the label was not displaying. I added label as text param on Style part and the param looks like this text: '${name}',

Currently my code looks like this:

    var sourceWFS = new ol.source.Vector({
        format: new ol.format.GeoJSON({
            extractGeometryName: true
        }),
        title: geoServerLayerName,
        url: appConfigInfo.wfsurl + '/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=' + geoServerLayerName + '&outputFormat=application/json',
        strategy: ol.loadingstrategy.bbox,
        projection: 'EPSG:4326'
    });
    var vectorLayerWFS = new ol.layer.Vector({
        source: sourceWFS,
        style: new ol.style.Style({
            image: new ol.style.Icon(({
                anchor: [0.5, 1],
                src: IconUrl
            })),
            text: new ol.style.Text({
                text: '${name}',
                font: '12px Calibri,sans-serif',
                fill: new ol.style.Fill({
                    color: '#000'
                }),
                stroke: new ol.style.Stroke({
                    color: '#fff',
                    width: 2
                }),
            })
        })
    });
    vectorLayerWFS.setProperties({
        title: layerName
    });
    mapObj.addLayer(vectorLayerWFS);
1

There are 1 best solutions below

1
On

The text must be set in a style function

var style = new ol.style.Style({
        image: new ol.style.Icon(({
            anchor: [0.5, 1],
            src: IconUrl
        })),
        text: new ol.style.Text({
            font: '12px Calibri,sans-serif',
            fill: new ol.style.Fill({
                color: '#000'
            }),
            stroke: new ol.style.Stroke({
                color: '#fff',
                width: 2
            }),
        })
    });
var vectorLayerWFS = new ol.layer.Vector({
    source: sourceWFS,
    style: function(feature) {
        style.getText().setText(feature.get('name'));
        return style;
    }
});