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
    })
});
  • 1
    This may be the answer you're looking for: stackoverflow.com/a/37873359/3361339 – Alexandre Dubé Jun 13 '17 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 '17 at 16:22
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.

| improve this answer | |
  • 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 '17 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 '17 at 21:12

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.