Openlayers 具有悬停更改样式答案

【问题标题】：Open layers feature hover change styleOpenlayers 具有悬停更改样式
【发布时间】：2019-06-05 19:23:16
【问题描述】：

我正在尝试更改鼠标悬停时多面体特征的不透明度。例如，我能够在鼠标悬停时获得该功能并更改样式，但无法对不透明度从 0.3 到 0.8 的过程进行动画处理。

我已阅读文档，但找不到任何内容...

有什么线索吗？

【问题讨论】：

向我们展示您迄今为止尝试过的内容。

标签： javascript openlayers openlayers-5

【解决方案1】：

当唯一的变化是样式函数在被调用时计算的经过时间时，一个特性不会自动重新渲染，但调用 feature.changed() 将触发另一个渲染。

  var map = new ol.Map({
  target: document.getElementById('map'),
  view: new ol.View({
      center: ol.proj.fromLonLat([0, 50]),
      zoom: 7,
  })
});

var layer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [
      new ol.Feature(
        ol.geom.Polygon.fromExtent([-1, 50, 1, 51]).transform('EPSG:4326', map.getView().getProjection())
      )
    ]
  })
});

var selectedStyle = new ol.style.Style({
 stroke: new ol.style.Stroke({
   width: 2,
   color: 'blue'
 }),
 fill: new ol.style.Fill()
});

var start;

map.addLayer(layer);
var select = new ol.interaction.Select({
  condition: ol.events.condition.pointerMove,
  style: function(feature) {
    var elapsed = new Date().getTime() - start;
    var opacity = Math.min(0.3 + elapsed/10000, 0.8);
    selectedStyle.getFill().setColor('rgba(255,0,0,' + opacity + ')');
    feature.changed();
    return selectedStyle;
  }
});
select.on('select', function(){ start = new Date().getTime(); });
map.addInteraction(select);

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/>
<div id="map" class="map"></div>

【讨论】：

它在您的示例中完美运行，但无法在我的代码中运行...我使用 webpack 并且我的功能是多面体，也许这可能是一个问题，但我不确定。如果我将控制台日志放入“select.on('select')....”中，我会在日志中看到它，但是当我将控制台日志放入 Select 样式函数中时（“style: function(feature)”）它没有显示在日志中。有什么线索吗？
选择样式不会覆盖直接在要素上设置的样式，它仅在要素使用图层样式时有效。