OpenLayers 3:在悬停上显示向量标签

Question

我试图找到一种仅当鼠标徘徊在功能图标上时，才能在openlaylayers vector上显示标签。我发现了一些类似事物的例子，但是没有什么能做我需要做的事情。在我看来，这很简单，但我无法弄清楚如何开始。

这是我的功能样式代码的样子（几个示例）。请注意，我正在从几个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。也许我太乐观了。

有人有我可以检查的任何想法或示例吗？

谢谢Gareth

---

编辑：感谢Jose我现在更接近目标了。自从我第一次提出问题以来，我的原始代码已经改变了。我现在通过一个函数将样式应用于每个功能，该函数从Geojson数据中读取图标文件的名称。例如，用"闸门"或"锁定的"图标"one_answers"筒仓高"，"筒仓中的"或"孤岛 - 低"图标一起显示门。正确的图标和文本显示在所有功能的悬停上显示，这很棒 - 只是当我不悬停在图标上时，图标不正确时正在显示 - 它显示了所有功能的" 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;
    });    
});

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

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

Answer 1

您可以使用setStyle：

var mystyle = new ol.style.Style({
  fill: new ol.style.Fill({color: '#00bbff'}),
  stroke: new ol.style.Stroke({color: '#fff'}),
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    anchor: [16, 16],
    anchorXUnits: 'pixels',
    anchorYUnits: 'pixels',
    scale : 0.1,
    opacity: 1,
    src: 'http://2.bp.blogspot.com/_Sdh3wYnDKG0/TUiIRjXEimI/AAAAAAAAQeU/bGdHVRjwlhk/s1600/map+pin.png'
  })),
  text: new ol.style.Text({
    font: '12px Roboto',
    text: 'AAAAAAAAAAAAAAA',
    fill: new ol.style.Fill({
      color: '#ffbb00'
    }),
    stroke: new ol.style.Stroke({
      color: '#000',
      width: 1
    })
  })
});
var styleCache = {};
var styleFunction = function(feature) {
  var radius = 3;
  var style = styleCache[radius];
  if (!style) {
    style = new ol.style.Style({
      image: new ol.style.Circle({
        radius: radius,
        fill: new ol.style.Fill({
          color: 'rgba(255, 153, 0, 0.4)'
        }),
        stroke: new ol.style.Stroke({
          color: 'rgba(255, 204, 0, 0.2)',
          width: 1
        })
      })
    });
    styleCache[radius] = style;
  }
  return style;
};
var vector = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'http://openlayers.org/en/v3.17.1/examples/data/kml/2012_Earthquakes_Mag5.kml',
    format: new ol.format.KML({
      extractStyles: false
    })
  }),
  style: styleFunction
});
var raster = new ol.layer.Tile({
  source: new ol.source.Stamen({
    layer: 'toner'
  })
});
var map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});
map.on('pointermove', function(evt) {
  if (evt.dragging) {
    return;
  }
  vector.getSource().getFeatures().forEach(f=>{
    f.setStyle(styleFunction);
  });
  var pixel = map.getEventPixel(evt.originalEvent);
  map.forEachFeatureAtPixel(pixel,function(feature) {
    feature.setStyle(mystyle);
    return feature;
  });    
});

#map {
  position: relative;
}

<title>Earthquakes in KML</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.17.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="map" class="map"></div>