openlayers 3 get layer for selected feature

Question

I'm trying to get the "id" of the layer for a selected feature and have tried maybe 3 or 4 methods for achieving this but have yet to achieve it.

I add my features like this...

 angular.forEach(response.FieldList, function (Field, key) {
                if (Field.FieldID != "") {
                    var shape = response.FieldList[key].Shape;
                    shape = shape.replace('}', ',"id":' + '"' + Field.FieldID + '"' + '}');
                    var geoJsonObj = {
                        'type': 'Feature',
                        'geometry': JSON.parse(shape),
                        'name': Field.FieldID,
                        'id': Field.FieldID

                    }
                    var vectorSource = new ol.source.Vector({
                        features: (new ol.format.GeoJSON()).readFeatures(geoJsonObj)
                    });

                      Fields[Field.FieldID] = new ol.layer.Vector({
                        projection: 'EPSG:4269',
                        source: vectorSource,
                        id: Field.FieldID,
                        name: 'Fields',
                        style: function (feature, resolution) {
                            var text = resolution * 100000 < 10 ? response.FieldList[key].Acres : '';

                            if (text != "") {
                                styleCache[text] = [new ol.style.Style({
                                    stroke: new ol.style.Stroke({
                                        color: '#319FD3',
                                        width: 1
                                    }),
                                    text: new ol.style.Text({
                                        font: '12px Calibri,sans-serif',
                                        text: text,
                                        fill: new ol.style.Fill({
                                            color: '#000'
                                        }),
                                        stroke: new ol.style.Stroke({
                                            color: '#fff',
                                            width: 3
                                        })
                                    }),
                                    fill: new ol.style.Fill({
                                        color: rcisWebMapUtilities.convertHex(response.FieldList[key].Shade, '0.5')
                                    })
                                })];
                            }
                            else if (text == "") {
                                styleCache[text] = [new ol.style.Style({
                                    fill: new ol.style.Fill({
                                        color: rcisWebMapUtilities.convertHex(response.FieldList[key].Shade, '0.5')
                                    })
                                })
                                ]
                            } return styleCache[text];
                        }


                      });



                      webMapValues.vectorFieldLayer.push(Fields[Field.FieldID])
                      webMapValues.fieldValues.push({
                          color: response.FieldList[key].Shade,
                          plantingName: response.FieldList[key].CropNickName,
                          acres: response.FieldList[key].Acres,
                          cropId: response.FieldList[key].CropID,
                          cropNumber: response.FieldList[key].CropNumber,
                          fieldID: response.FieldList[key].FiledID,
                          fieldName: response.FieldList[key].FieldName,
                          legalDesc: response.FieldList[key].LegalDesc,
                          policyNum: response.FieldList[key].PolicyNumber
                      })
                      var found = $filter('filter')(webMapValues.legend, { plantingName: response.FieldList[key].CropNickName }, true);
                      if (found == 0) {
                          webMapValues.legend.push({
                              color: response.FieldList[key].Shade,
                              plantingName: response.FieldList[key].CropNickName                          
                          })
                      }
                }
            });

as you can see I'm trying to set the "id" in many places...even altering the GeoJSON to include 'id' but it seems to get discarded somehow and is not there when I want to use it?

I am using a map.on 'click" like this...

map.on('click', function (evt) {
        var pixel = map.getEventPixel(evt.originalEvent);
        displayFeatureInfo(evt.pixel, evt.coordinate);

        //var coordinate = evt.coordinate;


    })

and this code to perform the highlight...

 var highlight;
    var displayFeatureInfo = function (pixel,coordinate) {

        var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
            var id = Opelayers magic to get layer id;
            return feature;
        });

        var info = document.getElementById('info');
        if (feature) {
            info.innerHTML = feature.getId() + ': ' + feature.get('name');


        } else {
            info.innerHTML = ' ';
        }

        if (feature !== highlight) {
            if (highlight) {
                featureOverlay.getSource().removeFeature(highlight);
            }
            if (feature) {
                featureOverlay.getSource().addFeature(feature);
                document.getElementById('popup-content').innerHTML = '<p>It is working</p>';
                popup.setPosition(coordinate);
            }

            highlight = feature;
        }

    };

feature.getId() and feature.get('name') return undefined?

after I get the feature I would like to get the "id" of the layer it is on. so probably in this code...

var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
            var id = Opelayers magic to get layer id;
            return feature;
        });

Is this possible? any help is greatly appreciated!!

Babbie

How do you add the features to the source? You'll have to set an id for each one with ol.Feature#setId – Ab

Thanks for the reply Jonatas...I came to the same conclusion but am struggling to figure out how to add the "id" properly...I will edit my question with the appropriate code. – Babbie

OpenLayers doesn't read (intentionally) id from your object. You'll have to use ol.Feature#setId. Looking at your code it's hard to understand why you create a new ol.source.Vector and a new ol.layer.Vector inside a loop. – Ab

Answer 1

In openlayers 4, I am able to get the layer of each selected feature like this: (Im not sure if this works in OL3)

var infoClicker = map.on('click', function(evt) {
    map.forEachFeatureAtPixel(evt.pixel,
        function(feature, layer) {
            var idLayer = layer.get('myLayerID');

See http://openlayers.org/en/latest/apidoc/ol.Map.html#forEachFeatureAtPixel

Undershorts

Answer 2

Look at ol.Feature. There does not seem to be a built-in way to get the containing source (or layer) that the feature is in. So, you have two choices, at least the way I see it.

First choice is to keep your code as is (using map.forEachFeatureAtPixel...) but make sure that for each feature, before the place that you call mySource.addFeature(myFeature), you call set(key, value, opt_silent) where the key would be sourceId (or layerId) and the value would be your identifying value for the containing source (or layer). So the OpenLayers MaGiC to get Layer ID would be materialized as feature.get('layerId').

The second choice is, instead of using map.forEachFeatureAtPixel, to consider using something along the lines of:

// When there is a single click on the map.
map.on('singleclick', function(evt) {
    // Get all features at the event's coordinate for mySource1 and for mySource2 separately.
    var clickedFeatures1 = mySource1.getFeaturesAtCoordinate(evt.coordinate);
    var clickedFeatures2 = mySource2.getFeaturesAtCoordinate(evt.coordinate);
    ....
}

This way you know who the parent source is for each feature, because you ask the parent directly. clickedFeatures1 and clickedFeatures2 are arrays, either one of which could, of course, be empty.

As for the feature's ID and name, does the feature have such attributes when it is added? If not, before adding the feature, go along the lines of this:

myFeature.setId(42);
myFeature.set('name', 'foo');
mySource.addFeature(myFeature);

Issue

Thanks for the response, I don't think the problem is on the "getting" end of the code meaning when I place the vector features on the map and highlight them...I think it's on the Layer creating and adding the "id" correctly. I certainly would use myFeature.setId(42); myFeature.set('name', 'foo'); mySource.addFeature(myFeature); If it was that straight forward but I am adding the feature through ol.source.vector which I can't figure out how to add and id to. – Babbie