打开图层功能悬停更改样式

Question

我正在尝试更改鼠标悬停时多面特征的不透明度。我能够在鼠标悬停时获得该功能并更改样式，但无法为不透明度从 0.3 到 0.8 的过程设置动画。

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

有线索吗？

Answer 1

一个功能不会自动 re-render 当唯一的变化是样式函数在调用时计算的经过时间，但调用 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>

打开图层功能悬停更改样式

Open layers feature hover change style

javascript

openlayers

openlayers-5