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

Question

我正在尝试在 selected 后更改 VectorTile 层中要素的样式。但是，第一次触发 select 交互时，控制台会报告错误：

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 并且 select 函数起作用，但是新的 select 样式从未被设置。

是否有不同的方法从 ol.source.VectorTile 获取 select 特征而不产生此错误？

相关代码：

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() 方法将是一个受欢迎的改进。

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

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

openlayers-3