openlayers-3 - 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 数组，并在样式函数中引用该对象或数组以不同的方式设置功能样式。

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