OpenLayers 3：在悬停时显示矢量标签

我试图找到一种仅在鼠标悬停在功能图标上时才在OpenLayers矢量功能上显示标签的方法。我已经找到了一些类似事情的例子，但是没有什么能做我需要做的。在我看来，这将非常简单，但是我无法确定如何开始。

这就是我的功能样式代码的样子（几个示例中的一个）。请注意，我要从几个GeoJSON文件中引入要素数据，因此要feature.get(...)在颜色部分中输入s：

if (feature.get('level_pc') < 35 ) {
    var style = new ol.style.Style({
        fill: new ol.style.Fill({color: feature.get('shapefill')}),
        stroke: new ol.style.Stroke({color: feature.get('shapestroke')}),
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            anchor: [16, 16],
            anchorXUnits: 'pixels',
            anchorYUnits: 'pixels',
            opacity: 0.75,
            src: '/icons/aws-red.png'
        })),
        text: new ol.style.Text({
            font: '12px Roboto',
            text: feature.get('label'),
            fill: new ol.style.Fill({
                color: feature.get('textfill')
            }),
            stroke: new ol.style.Stroke({
                color: feature.get('textstroke'),
                width: 1
            })
        })
    });
    return style
} else { ...

我真的希望有一种方法可以在样式定义中插入一些代码，以创建悬停交互，而不必创建每种样式的副本，然后编写一些额外的代码来在悬停/非悬停样式之间进行切换。必要的。也许可以通过在鼠标悬停时将文本颜色的Alpha值设置为255以及在其他时间将其设置为0的方式来实现。也许我太乐观了。

有人有我可以检查的想法或例子吗？

谢谢加雷斯

编辑：多亏了何塞，我现在离目标越来越近了。自从我第一次提出问题以来，我的原始代码已经有所更改。现在，我通过一个从GeoJSON数据中读取图标文件名称的函数将样式应用于每个功能。例如，闸门显示为“闸门打开”或“闸门关闭”图标，筒仓显示为“ silo-high”，“ silo-medium”或“ silo-low”图标。正确的图标和文本会在所有功能上悬停显示，这很棒-只是当我不将鼠标悬停在这些图标上时，会显示不正确的图标-它会在所有功能上显示“ silo-low”图标。当我将鼠标悬停在一个图标上时，它会显示正确的图标，然后在我不再悬停时将其还原。

这是我更新的代码（的重要部分）：

var structuresStyleHover = function(feature, resolution) {
    style = new ol.style.Style({
        fill: new ol.style.Fill({color: feature.get('shapefill')}),
        stroke: new ol.style.Stroke({color: feature.get('shapestroke')}),
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            anchor: [16, 16],
            anchorXUnits: 'pixels',
            anchorYUnits: 'pixels',
            opacity: 1,
            src: '/icons/'+feature.get('icon')+'-'+feature.get('status').toLowerCase()+'.png'
        })),
        text: new ol.style.Text({
            font: '12px Roboto',
            text: feature.get('label'),
            fill: new ol.style.Fill({
                color: feature.get('textfill')
            }),
            stroke: new ol.style.Stroke({
                color: feature.get('textstroke'),
                width: 1
            })
        })
    })
    return style;
};

var styleCache = {};
var styleFunction = function(feature,resolution) {
      var radius = 16;
      var style = styleCache[radius];
      if (!style) {
        style = new ol.style.Style({
            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
                anchor: [16, 16],
                anchorXUnits: 'pixels',
                anchorYUnits: 'pixels',
                opacity: 0.5,
                src: '/icons/'+feature.get('icon')+'-'+feature.get('status').toLowerCase()+'.png'
            })),
        });
        styleCache[radius] = style;
      }
      return style;
};

var structuresLayer = new ol.layer.Vector({
    source: structuresSource,
    style: styleFunction
});

...

var map = new ol.Map({
    layers: [paddocksLayer,structuresLayer],
    interactions: ol.interaction.defaults({
        altShiftDragRotate: false,
        dragPan: false,
        rotate: false
    }).extend([new ol.interaction.DragPan({kinetic: null})]),
    target: olMapDiv,
    view: view
});

...

map.on('pointermove', function(evt) {
    if (evt.dragging) {
        return;
    }
    structuresLayer.getSource().getFeatures().forEach(f=>{
        f.setStyle(styleFunction);
    });
    var pixel = map.getEventPixel(evt.originalEvent);
    map.forEachFeatureAtPixel(pixel,function(feature,resolution) {
        feature.setStyle(structuresStyleHover(feature,resolution));
        return feature;
    });    

});

我没有任何错误-除非鼠标悬停在图标上，否则它不会显示正确的图标。

我确定我确实缺少一些明显的东西，但是我无法解决。有什么想法吗？