0

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
    })
});
2
  • 1
    This may be the answer you're looking for: stackoverflow.com/a/37873359/3361339 Jun 13, 2017 at 12:08
  • Thanks @AlexandreDubé. That is what I am currently doing... Unfortunately the issue is that OpenLayers only styles the object once... If I have multiple styles... For example, a road is 1 pixel wide at zoom level 10, but I want that same road to be 2 pixels wide at zoom level 11, the function to style the object is never called after the initial style... The road remains 1 pixel wide no matter what zoom level I go to because the object already has a style.
    – birwin
    Jun 13, 2017 at 16:22

1 Answer 1

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.

2
  • Thanks @Chase Choi... I will try this a little later and mark it as an answer if it works... This appears to be what I was looking for, however. As I want to restyle many features this might be fairly CPU intensive, however, it looks like my only option.
    – birwin
    Jun 14, 2017 at 16:24
  • Your answer appears to be the solution. I have one problem, however... I am using OpenLayers3 and I am using a ol.layer.VectorTile object. Your map.getLayers().getArray()[0].getSource().getFeatures() line throws an exception . I believe that line works for a ol.layer.Vector object. From the research I have done on the Internet, OpenLayers does not allow me to pull Features from the VectorTile object.
    – birwin
    Jun 16, 2017 at 21:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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