0

Is there a way to include animate properties of a vector layer (GeoJSON)?

var highlightStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#fff',
      width: 1
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255,0,0,0.1)'
    })
  });
1

Yes, as a basic example something like this would change the stroke width and fill opacity on a 10 second cycle

var timer = 0;

var style = function(feature) {
  return new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#fff',
      width: (timer%10)+1
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255,0,0,' + (((timer%10)+1)/10) + ')'
    })
  });
}

var vector = new ol.layer.Vector({
  source: source,
  style: style
});

var map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: view
});

setInterval( function(){
  timer++;
  vector.setStyle(style);
}, 1000);
| improve this answer | |
  • Is it possible to include the setInterval() function in the style variable itself? I have some 'if' conditions to check before applying the style to the 'vector' layer. Currently, it animates the entire vector layer and not based off those set conditions. Something similar to this but with an if clause as the value of property 'style'. Thank you! – b_jugger Jan 20 '19 at 0:31
  • It would be easier to put the if clauses in the style function, you can test properties and types of features, the view resolution and any of your own variables which are in scope (similar to timer above). Style functions such can very complex e.g. openlayers.org/en/latest/examples/resources/… used in openlayers.org/en/v4.6.5/examples/mapbox-vector-tiles.html – Mike Jan 20 '19 at 11:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.