React导致OpenLayers中悬停时闪烁

Question

我在React组件中使用OpenLayers映射，并尝试在悬停时将样式应用于我的圆圈，如本例所示：https://openlayers.org/en/latest/examples/webgl-points-layer.html

然而，我的代码如下，使用refs，并导致闪烁：

// OnHover, apply style
mapRef.current.on('pointermove', function (ev) {
if (hoveredRef.current !== null) {
hoveredRef.current.set('hover', 0);
hoveredRef.current = null;
}
mapRef.current.forEachFeatureAtPixel(ev.pixel, feature => {
feature.set('hover', 1);
hoveredRef.current = feature;
return true;
});
});

他们的地图运行得很好，所以我只能假设它与React或我的数据有关。

Answer 1

pointermove以巨大的速率激发，并且您在每个事件中添加/删除hover属性。你应该限制它，还应该检查你是否没有悬停在与前一事件相同的功能上-在这种情况下，你应该跳过更新它。此外，如果有重叠的功能，你的实现就会中断。

你可能应该检查rlayers-https://github.com/mmomtchev/rlayers(免责声明，我是作者(，检查RPopup组件-它包含您的问题的解决方案。