Set style zoom level openlayers 3

Question

In Openlayers it was possible to turn certain features on or off depending on the zoom level. I have not found the same functionality in OpenLayers 3 despite looking through the documentation. Does anyone know how to do this? This is the feature I'm placing on the map and ol.style.Text is what I would like to display only after the user is zoomed in to a particular zoom level.

var geoJsonObj = {
  'type': 'Feature',
  'geometry': JSON.parse(response.FieldList[key].Shape)
}
var vectorSource = new ol.source.Vector({
  features: (new ol.format.GeoJSON()).readFeatures(geoJsonObj)
});
Fields[Field.FieldID] = new ol.layer.Vector({
  projection: 'EPSG:4269',
  source: vectorSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'yellow',
      width: 1
    }),
    fill: new ol.style.Fill({
      color: rcisWebMapUtilities.convertHex(response.FieldList[key].Shade, '0.5')
    }),
    text: new ol.style.Text({
      textAlign: 'Center',
      text: response.FieldList[key].Acres,
      scale: 1
    })
  })
});

does minResolution , maxResolution on vector layer initialization fit your needs???? api doc here --> openlayers.org/en/latest/apidoc/ol.layer.Vector.html — pavlos
Not really because the Style is part of the layer so not just the text is hidden the entire layer gets hidden... — Funn_Bobby
then you may use the ol.style.StyleFunction() instead of a static style. It accepts two params ol.Feature and resolution. So using the resolution return your static style with or without text. If you need further help I ll try to make a fiddle. — pavlos
If you would make a fiddle I would appreciate it, I have looked at numerous examples and they all seem to be different...and when I try to use many of them i receive "function does not exist" error's — Funn_Bobby
...when I try to use "ol.style.styleFunction" I get the error "ol.style.styleFunction is not a constructor" and I've also tried the other naming convention "ol.style.StyleFunction" with the same result — Funn_Bobby

Tim Schaub Tim Schaub · Accepted Answer · 2016-06-17T04:51:35

The vector layer example demonstrates the use of a style function for resolution dependent styling: http://openlayers.org/en/latest/examples/vector-layer.html

Here is a simplified version:

var layer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: function(feature, resolution) {
    var text = resolution < 5000 ? feature.get('name') : '';
    return new ol.style.Style({
      text: new ol.style.Text({
        text: text,
        fill: new ol.style.Fill({
          color: '#000'
        }),
        stroke: new ol.style.Stroke({
          color: '#f00',
          width: 3
        })
      })
    });
  }
});

The layer above would render feature names at resolutions below 5000 map units per pixel.

The vector layer example above has some additional code to reuse styles when possible. If you've got a ton of features, you can put excess pressure on the garbage collector by creating new style instances for every render frame.

Set style zoom level openlayers 3

2 Answers