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并且select函数可以工作，但是从不设置新的选择样式。

是否有不同的方法从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方法将是一个受欢迎的改进。

ol.interaction.Select给出了ol.source.VectorTile的错误

1 个答案: