OpenLayers 3 VectorTile Layer Reload style on zoom

Question

I have a vectorlayer in my map and would like to change the style of features when the zoom level changes. Is this possible?

var vlayer = new ol.layer.VectorTile({
    renderMode: 'vector',
    preload: Infinity,
    source: new ol.source.VectorTile({
        attributions: '&copy; <a href="https://www.openstreetmap.org/copyright">' + 'OpenStreetMap contributors</a>',
        format: new ol.format.MVT(),
        tileGrid: new ol.tilegrid.TileGrid({
            extent: ol.proj.get('EPSG:3857').getExtent(),
            resolutions: resolutions
        }),
        tilePixelRatio: 16,
        tileUrlFunction: tileUrlFunction,
        projection: 'EPSG:3857'
    })
    , style: stylefunction()
});

var map = new ol.Map({
    target: 'map',
    layers: [
        vlayer
    ],
    view: new ol.View({
        center: [0,0],
        zoom: 15
    })
});

Answer 1

If you want to change it up to the zoom after setting styles on the features, you can set change:resolution event on view.
something like this:

map.getView().on('change:resolution', function(e) {
  var features = map.getLayers().getArray()[0].getSource().getFeatures();

  if (map.getView().getZoom() == 2) {
    for (var i = 0, len = features.length; i < len; i++) {
      features[i].setStyle(newstyle);
    }  
  } else {
    for (var i = 0, len = features.length; i < len; i++) {
      features[i].setStyle(stylee);
    } 
  }
});

sample codepen here
when the map zoom is 2 then the color of features turn to blue.