0

Long story short I cannot get the attribute(s) back for labeling after assignment. I must not be doing it right. I format the attributes as follows:

{'fipscode': '09003','state': 'ny','county': 'kings county','speccode': 'AWSB1U','callsign': 'WQGA906','fcc': 'Cellco Partnership','lease': 'NULL','leaseid': 'NULL','current': 'Cellco Partnership','future': 'Cellco Partnership'}

and assign them as follows:

feature.attributes = attrsList;

and when I attempt to retrieve the county field, or any field, it is undefined.

More Code Follows, Ideas?

function initMap() {

var wktReader = new ol.format.WKT();

var featureCollection = [];

for (var i = 0; i < geometries.length; i++) {

    var feature = wktReader.readFeature(geometries[i]);
    var attrs = attributes[i];
    var textMsg = "";
    var state = "";
    var county = "";

    var mystyle = new ol.style.Style({
        fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.1)' }),
        stroke: new ol.style.Stroke({ color: 'blue', width: 3 }),
        text: new ol.style.Text({
            textAlign: 'center',
            textBaseline: 'middle',
            font: '12px Verdana',
            text: GetAttributes('fipscode'),
            fill: new ol.style.Fill({color: 'black'}),
            stroke: new ol.style.Stroke({color: 'white', width: 0.5})
        })
    });


    if (feature.getGeometry().getType() == 'Polygon') {

        feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');

        // Assign the attributes
        var attrsList = GetAttributes(attrs);

        feature.attributes = attrsList;
        //feature.features = attrsList;

        //var looky = feature.get('fipscode');
        //feature.text = feature.get('fipscode');
        feature.setStyle(mystyle);

        //feature.setStyle(styleFunction(feature));
        // styleFunction()

        featureCollection.push(feature);
    }
    else if (feature.getGeometry().getType() == 'LineString') {
        feature.setStyle(new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                width: 3
            })
        }));

        featureCollection.push(feature);
    }
    else if (feature.getGeometry().getType() == 'Point') {

        feature.setStyle(new ol.style.Style({
            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                opacity: 0.75,
                src: 'Icons/marker.png'
            }))
        }));

        featureCollection.push(feature);
    }
}
1

There are two things we need to address here; the proper way of getting/setting feature properties, and then how to use those properties in your feature's style.

Getting and Setting Feature Properties

The standard way to attach custom properties to a feature in OL3 is to use the feature object's native "values_" property and its inbuilt getter and setter functions. You're defining your own "attributes" property on the object, which could technically work with a few code changes, but the usual way is simply more convenient.

You can set one property at a time:

feature.set('fipscode', '1234');

Or you can use an object to set multiple values (this is closer to what you're trying to achieve in your example):

feature.setProperties({'fipscode': '09003','state': 'ny','county': 'kings county','speccode': 'AWSB1U','callsign': 'WQGA906','fcc': 'Cellco Partnership','lease': 'NULL','leaseid': 'NULL','current': 'Cellco Partnership','future': 'Cellco Partnership'});

Whichever of these you use, you can then use the feature's native get() method to get the value of any attribute:

feature.get('fipscode');

Styling based on these properties

The correct way to use a feature's attributes to influence its style is using a style function: https://openlayers.org/en/latest/apidoc/ol.html#.StyleFunction

This is a function defined by you and attached to the layer that holds your features. All style functions take two arguments: (feature, resolution). Your style function determines something about the features that are passed into it, and returns an ol.style.Style.

Once your function is written, you can add it to your layer definition in place of the usual 'style' values:

myLayer = new ol.layer.Vector({
    title: 'My FeatureCollection',
    style: myStyleFunction
});

I've updated your code with these changes so you can try it out. Note you'll have to add the style function to wherever you are defining your layer.

function initMap() {

    var wktReader = new ol.format.WKT();

    var featureCollection = [];

    for (var i = 0; i < geometries.length; i++) {

        var feature = wktReader.readFeature(geometries[i]);
        feature.setProperties(attributes[i]);

        featureCollection.push(feature);
    }

    //Add your layer here with {style: myStyleFunction}
}

var myStyleFunction = function(feature, resolution)
{
    var style;

    if(feature.getGeometry().getType() == 'Polygon') {
        style = new ol.style.Style({
            fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.1)' }),
            stroke: new ol.style.Stroke({ color: 'blue', width: 3 }),
            text: new ol.style.Text({
                textAlign: 'center',
                textBaseline: 'middle',
                font: '12px Verdana',
                text: feature.get('fipscode'),
                fill: new ol.style.Fill({color: 'black'}),
                stroke: new ol.style.Stroke({color: 'white', width: 0.5})
            })
        });
    }
    else if (feature.getGeometry().getType() == 'LineString') {
        style = new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                width: 3
            })
        });
    }
    else if (feature.getGeometry().getType() == 'Point') {

        style = new ol.style.Style(new ol.style.Style({
            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                opacity: 0.75,
                src: 'Icons/marker.png'
            }))
        }));
    }

    return [style];

}
  • Wow. That is a lot of useful feedback. I'll be trying it out this morning! – user2084255 Apr 18 '17 at 14:22
  • Can you post the rest of your code? Specifically, where the variable "attributes" that you're calling within your loop is defined (the "attributes[i]" in var attrs = attributes[i]). – rbkb Apr 18 '17 at 18:24
  • I'm having success using feature.set for individual fields but am still getting 'undefined' for feature.get('fipscode') when attempting to extract from the features.values_ technique. Any chance you can post a working example of that? Thanks (I assign the dictionary pairs as a variable, perhaps that's the problem?) – user2084255 Apr 18 '17 at 19:31
  • The 'attributes' portion of my code is quite convoluted due to my working from asp.net/c# to jquery. All that is really going on is I'm caching field:value pairs as session variables and I found a way to read those into javascript. Then I wrote a formating function to produce the { 'fld1':'val1','fld2':'val2',...} bit that is assigned to the feature.values_ . – user2084255 Apr 18 '17 at 19:39
  • Here is an actual string produced: {'fipscode': '55105','state': 'il','county': 'mchenry county','speccode': 'AWSB1U','callsign': 'WQGA952','fcc': 'Cellco Partnership','lease': 'NULL','leaseid': 'NULL','current': 'Cellco Partnership','future': 'Cellco Partnership'} – user2084255 Apr 18 '17 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.