ol.interaction.Select gives an error on ol.source.

Question

I'm trying to change the style of a feature in a VectorTile layer once it is selected. However the first time the select interaction is triggered the console reports an error:

Uncaught TypeError: feature.getId is not a function
at ol.source.Vector.addToIndex_ (ol-debug.js:66819)
at ol.source.Vector.addFeatureInternal (ol-debug.js:66772)
at ol.source.Vector.addFeature (ol-debug.js:66759)
at ol.source.Vector.<anonymous> (ol-debug.js:66919)
at ol.Collection.boundListener (ol-debug.js:3441)
at ol.Collection.ol.events.EventTarget.dispatchEvent (ol-debug.js:3859)
at ol.Collection.insertAt (ol-debug.js:12466)
at ol.Collection.push (ol-debug.js:12490)
at ol.Collection.extend (ol-debug.js:12402)
at ol.interaction.Select.handleEvent (ol-debug.js:70163)

I worked my way through the code and realized the culprit is probably that the feature under the select event is not an ol.Feature but an ol.render.Feature. The latter does not have a getId() function. However after the first time, modifyingCollection is set as true and the select function works, but the new select style is never set.

Is there a different way to select features from a ol.source.VectorTile which does not produce this error?

the relevant code:

var select = new ol.interaction.Select({
    condition: ol.events.condition.click,
    multi: false,
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(200,255,255,0.5)'
        })
    })
});

map.addInteraction(select);
    select.on('select', function(e) {
        var features = e.target.getFeatures();
        features.forEach(function(feature) {
            var props = feature.getProperties();
            console.log(props)
        })
    });

 var bagpanden = new ol.layer.VectorTile({
        source: new ol.source.VectorTile({
            attributions: 'BAG data: © <a href="https://www.kadaster.nl/bag">Kadaster</a> ' +
            'Client: <a href="https://research.geodan.nl/">' +
            'Geodan Research</a>',
            format: new ol.format.MVT(),
            tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
            tilePixelRatio: 1.000000001,
            url: 'http://research.geodan.nl/service/geoserver/gwc/service/tms/1.0.0/research%3Apand@World_3857@pbf/' +
            '{z}/{x}/{-y}.pbf'
        }),
        style: createStyle()
    });

Answer 1

You can configure your ol.format.MVT to create ol.Feature instances instead of ol.render.Feature. This will make parsing a bit slower, but will give you features with a getId() method:

format: new ol.format.MVT({
  featureClass: ol.Feature
})

Also note that ol.interaction.Select will not allow you to highlight features on a vector tile layer. Instead, use of Map#forEachFeatureAtPixel. You can maintain an object literal or array of highlighted feature ids, and reference that object or array in your style function to style features differently.

If you are up for creating a pull request: adding a getId() method to ol.render.Feature would be a welcome improvement.