Javascript 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 { ...

我没有收到任何错误-它只是没有显示正确的图标，除非鼠标悬停在图标上

---

我肯定我错过了一些非常明显的东西，但我无法解决。有什么想法吗？

您可以使用

setStyle

：

var mystyle=new ol.style.style({
fill:new ol.style.fill（{color:'#00bbff'}），
笔划：新的ol.style.stroke（{color:'#fff'}），
图片：新的ol.style.Icon（/**@type{olx.style.IconOptions}*/({
主播：[16,16]，
主播：“像素”，
anchorYUnits:'像素'，
比例：0.1，
不透明度：1，
src:'http://2.bp.blogspot.com/_Sdh3wYnDKG0/TUiIRjXEimI/AAAAAAAAQeU/bGdHVRjwlhk/s1600/map+pin.png'
})),
文本：新的ol.style.text({
字体：“12px机器人”，
文字：“aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa，
填充：新的ol.style.fill({
颜色：“#ffbb00”
}),
笔划：新的ol风格笔划({
颜色：“#000”，
宽度：1
})
})
});
var styleCache={}；
var styleFunction=函数（特性）{
var半径=3；
var style=styleCache[radius]；
如果（！样式）{
style=新的ol.style.style({
图片：新ol.style.Circle({
半径：半径，
填充：新的ol.style.fill({
颜色：“rgba（255153,0,0.4）”
}),
笔划：新的ol风格笔划({
颜色：“rgba（255204,0,0.2）”，
宽度：1
})
})
});
styleCache[radius]=样式；
}
回归风格；
};
var vector=新的ol.layer.vector({
来源：新ol.source.Vector({
网址：'http://openlayers.org/en/v3.17.1/examples/data/kml/2012_Earthquakes_Mag5.kml',
格式：新建ol.format.KML({
提取样式：false
})
}),
style:styleFunction
});
var raster=新建ol.layer.Tile({
来源：新ol.source.雄蕊({
图层：“碳粉”
})
});
var map=新ol.map({
图层：[光栅，矢量]，
目标：“地图”，
视图：新ol.view({
中间：[0,0]，
缩放：2
})
});
map.on（'pointermove'，函数（evt）{
如果（evt.拖动）{
返回；
}
vector.getSource（）.getFeatures（）.forEach（f=>{
f、 setStyle（styleFunction）；
});
var pixel=map.getEventPixel（evt.originalEvent）；
map.forEachFeatureAtPixel（像素，函数（特征）{
feature.setStyle（mystyle）；
返回特性；
});    
});
#地图{
位置：相对位置；
}
KML中的地震
检查此示例，谢谢@pavlos，但这并不是我真正想要做的-我真的希望能够将“本机”OpenLayers文本标签显示在悬停状态，而不是显示工具提示。你知道这是否可能吗？太棒了，我想这让我离得更近了。但是还不能让它正常工作。。。请参阅上面我的编辑。非常感谢。没关系，我跳过了StyleCache代码，从而实现了这一点。感谢您对标签的帮助。
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;
    });    

});