CODEWITHSUNDEEP
javascriptopenlayersopenlayers-5
Mike Lammers
Mike Lammers

Reputation: 564

Open layers feature hover change style

I am trying to change the opacity of a multipolygon feature on mouseover. I am able to get the feature on mouseover and change the style but am unable to animate the process of the opacity going from 0.3 to 0.8 for example.

I have read through the docs but cant find anything...

Any clue?

Upvotes: 3

Views: 6394

Answers (1)

Mike
Mike

Reputation: 17897

A feature won't automatically re-render when the only change is the elapsed time a style function would calculate if it is called, but calling feature.changed() will trigger another render.

  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>

Upvotes: 6

Related Questions