ol.interaction.Select在ol.source.VectorTile上给出错误 [英] ol.interaction.Select gives an error on ol.source.VectorTile

问题描述

一旦选择VectorTile图层，我正尝试更改其样式.但是，首次触发选择交互时，控制台会报告错误:

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)

我遍历代码，发现罪魁祸首可能是select事件下的功能不是ol.Feature，而是ol.render.Feature.后者没有getId()函数.但是，第一次后，modifyingCollection设置为true，并且select函数起作用，但是从未设置新的select样式.

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.

是否有其他方法可以从ol.source.VectorTile中选择功能，而不会产生此错误?

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

相关代码:

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()
    });

推荐答案

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

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
})

还请注意，ol.interaction.Select不允许您突出显示矢量切片图层上的要素.而是使用Map#forEachFeatureAtPixel.您可以维护对象文字或突出显示的功能ID的数组，并在样式函数中引用该对象或数组以对样式进行不同的样式.

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.

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

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

这篇关于ol.interaction.Select在ol.source.VectorTile上给出错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！