【发布时间】：2016-06-30 05:32:30
【问题描述】：
我试图找到一种方法，仅当鼠标悬停在功能图标上时才在 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 的方式。可能是我太乐观了。
有没有人有什么想法或例子可以看看？
谢谢， 加雷斯
编辑：感谢 Jose，我现在离目标更近了。自从我第一次提出这个问题以来，我的原始代码发生了一些变化。我现在通过一个从 GeoJSON 数据中读取图标文件名称的函数将样式应用于每个功能。例如，大门显示有“大门打开”或“大门关闭”图标，筒仓显示有“筒仓高”、“筒仓中”或“筒仓低”图标。正确的图标和文本在悬停时显示所有功能，这很棒 - 只是当我没有将鼠标悬停在图标上时，显示不正确的图标 - 它显示所有功能的“筒仓低”图标。当我将鼠标悬停在某个图标上时，它会显示正确的图标，然后在我不再悬停时恢复。
这是我更新后的代码（重要部分）：
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;
});
});
我没有收到任何错误 - 只是没有显示正确的图标，除非鼠标悬停在图标上。
我确定我遗漏了一些非常明显的东西，但我无法解决。请问有什么想法吗？
【问题讨论】：
-
感谢@pavlos，但这并不是我真正想要做的——我真的希望能够在悬停时显示“本机”OpenLayers 文本标签，而不是显示工具提示.你知道这是否可能吗？