ol.interaction.Select 在 ol.source.VectorTile 上给出错误

Question

选择 VectorTile 图层后，我正在尝试更改该要素的样式。但是第一次触发选择交互时控制台报错：

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)

我研究了代码并意识到罪魁祸首可能是select事件下的功能不是 ol.Feature 而是 ol.render.Feature。后者没有 getId() 函数。然而，在第一次之后，modifyingCollection设置为 true 并且选择功能有效，但从未设置新的选择样式。

是否有不同的方法可以从 ol.source.VectorTile 中选择不会产生此错误的特征？

相关代码：

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

您可以配置您ol.format.MVT创建ol.Feature实例而不是ol.render.Feature. 这会使解析速度变慢，但会为您提供一种getId()方法的功能：

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

另请注意，这ol.interaction.Select将不允许您突出显示矢量切片图层上的要素。相反，使用Map#forEachFeatureAtPixel. 您可以维护一个对象文字或突出显示的特征 id 数组，并在您的样式函数中引用该对象或数组以不同的样式设置特征。

如果您准备创建拉取请求：添加一个getId()方法ol.render.Feature将是一个受欢迎的改进。