Add support for layer min/maxResolution

src/objectliterals.jsdoc

@@ -337,6 +337,8 @@
  * @property {number|undefined} opacity Opacity.
  * @property {number|undefined} saturation Saturation.
  * @property {boolean|undefined} visible Visibility.
+ * @property {number|undefined} minResolution MinResolution.
+ * @property {number|undefined} maxResolution MaxResolution.
  */
 
 /**
@@ -348,6 +350,8 @@
  * @property {number|undefined} saturation Saturation.
  * @property {ol.source.Source} source Source for this layer.
  * @property {boolean|undefined} visible Visibility. Default is true (visible).
+ * @property {number|undefined} minResolution MinResolution.
+ * @property {number|undefined} maxResolution MaxResolution.
  */
 
 /**
@@ -358,6 +362,8 @@
  * @property {number|undefined} opacity Opacity.
  * @property {number|undefined} saturation Saturation.
  * @property {boolean|undefined} visible Visibility.
+ * @property {number|undefined} minResolution MinResolution.
+ * @property {number|undefined} maxResolution MaxResolution.
  * @property {Array.<ol.layer.Base>|ol.Collection|undefined} layers Child layers.
  */
 
@@ -371,6 +377,8 @@
  * @property {number|undefined} saturation Saturation.
  * @property {ol.source.Source} source Source for this layer.
  * @property {boolean|undefined} visible Visibility. Default is true (visible).
+ * @property {number|undefined} minResolution MinResolution.
+ * @property {number|undefined} maxResolution MaxResolution.
  */
 
 /**
@@ -383,6 +391,8 @@
  * @property {ol.source.Source} source Source for this layer.
  * @property {ol.style.Style|undefined} style Style.
  * @property {boolean|undefined} visible Visibility. Default is true (visible).
+ * @property {number|undefined} minResolution MinResolution.
+ * @property {number|undefined} maxResolution MaxResolution.
  */
 
 /**

src/ol/layer/layerbase.js

@@ -18,7 +18,9 @@ ol.layer.LayerProperty = {
   HUE: 'hue',
   OPACITY: 'opacity',
   SATURATION: 'saturation',
-  VISIBLE: 'visible'
+  VISIBLE: 'visible',
+  MAXRESOLUTION: 'maxresolution',
+  MINRESOLUTION: 'minresolution'
 };
 
 
@@ -29,7 +31,9 @@ ol.layer.LayerProperty = {
  *            opacity: number,
  *            ready: boolean,
  *            saturation: number,
- *            visible: boolean}}
+ *            visible: boolean,
+ *            maxResolution: number,
+ *            minResolution: number}}
  */
 ol.layer.LayerState;
 
@@ -58,6 +62,12 @@ ol.layer.Base = function(options) {
   values.saturation = goog.isDef(values.saturation) ? values.saturation : 1;
   /** @type {boolean} */
   values.visible = goog.isDef(values.visible) ? values.visible : true;
+  /** @type {number} */
+  values.maxResolution = goog.isDef(values.maxResolution) ?
+      values.maxResolution : Infinity;
+  /** @type {number} */
+  values.minResolution = goog.isDef(values.minResolution) ?
+      values.minResolution : 0;
 
   this.setValues(values);
 
@@ -67,6 +77,8 @@ ol.layer.Base = function(options) {
     ol.Object.getChangeEventType(ol.layer.LayerProperty.HUE),
     ol.Object.getChangeEventType(ol.layer.LayerProperty.OPACITY),
     ol.Object.getChangeEventType(ol.layer.LayerProperty.SATURATION),
+    ol.Object.getChangeEventType(ol.layer.LayerProperty.MAXRESOLUTION),
+    ol.Object.getChangeEventType(ol.layer.LayerProperty.MINRESOLUTION),
     goog.events.EventType.LOAD
   ],
   this.handleLayerChange, false, this);
@@ -134,6 +146,8 @@ ol.layer.Base.prototype.getLayerState = function() {
   var ready = this.isReady();
   var saturation = this.getSaturation();
   var visible = this.getVisible();
+  var maxResolution = this.getMaxResolution();
+  var minResolution = this.getMinResolution();
   return {
     brightness: goog.isDef(brightness) ? goog.math.clamp(brightness, -1, 1) : 0,
     contrast: goog.isDef(contrast) ? Math.max(contrast, 0) : 1,
@@ -141,7 +155,9 @@ ol.layer.Base.prototype.getLayerState = function() {
     opacity: goog.isDef(opacity) ? goog.math.clamp(opacity, 0, 1) : 1,
     ready: ready,
     saturation: goog.isDef(saturation) ? Math.max(saturation, 0) : 1,
-    visible: goog.isDef(visible) ? !!visible : true
+    visible: goog.isDef(visible) ? !!visible : true,
+    maxResolution: goog.isDef(maxResolution) ? maxResolution : Infinity,
+    minResolution: goog.isDef(minResolution) ? Math.max(minResolution, 0) : 0
   };
 };
 
@@ -167,6 +183,32 @@ ol.layer.Base.prototype.getLayersArray = goog.abstractMethod;
 ol.layer.Base.prototype.getLayerStatesArray = goog.abstractMethod;
 
 
+/**
+ * @return {number} MaxResolution.
+ */
+ol.layer.Base.prototype.getMaxResolution = function() {
+  return /** @type {number} */ (
+      this.get(ol.layer.LayerProperty.MAXRESOLUTION));
+};
+goog.exportProperty(
+    ol.layer.Base.prototype,
+    'getMaxResolution',
+    ol.layer.Base.prototype.getMaxResolution);
+
+
+/**
+ * @return {number} MinResolution.
+ */
+ol.layer.Base.prototype.getMinResolution = function() {
+  return /** @type {number} */ (
+      this.get(ol.layer.LayerProperty.MINRESOLUTION));
+};
+goog.exportProperty(
+    ol.layer.Base.prototype,
+    'getMinResolution',
+    ol.layer.Base.prototype.getMinResolution);
+
+
 /**
  * @return {number} Opacity.
  */
@@ -288,6 +330,30 @@ goog.exportProperty(
     ol.layer.Base.prototype.setHue);
 
 
+/**
+ * @param {number} maxResolution MaxResolution.
+ */
+ol.layer.Base.prototype.setMaxResolution = function(maxResolution) {
+  this.set(ol.layer.LayerProperty.MAXRESOLUTION, maxResolution);
+};
+goog.exportProperty(
+    ol.layer.Base.prototype,
+    'setMaxResolution',
+    ol.layer.Base.prototype.setMaxResolution);
+
+
+/**
+ * @param {number} minResolution MinResolution.
+ */
+ol.layer.Base.prototype.setMinResolution = function(minResolution) {
+  this.set(ol.layer.LayerProperty.MINRESOLUTION, minResolution);
+};
+goog.exportProperty(
+    ol.layer.Base.prototype,
+    'setMinResolution',
+    ol.layer.Base.prototype.setMinResolution);
+
+
 /**
  * @param {number} opacity Opacity.
  */

src/ol/layer/layergroup.js

@@ -206,6 +206,10 @@ ol.layer.Group.prototype.getLayerStatesArray = function(opt_obj) {
     layerState.opacity *= ownLayerState.opacity;
     layerState.saturation *= ownLayerState.saturation;
     layerState.visible = layerState.visible && ownLayerState.visible;
+    layerState.maxResolution = Math.min(
+        layerState.maxResolution, ownLayerState.maxResolution);
+    layerState.minResolution = Math.max(
+        layerState.minResolution, ownLayerState.minResolution);
   }
 
   return obj;

src/ol/renderer/canvas/canvasmaprenderer.js

@@ -114,13 +114,16 @@ ol.renderer.canvas.Map.prototype.renderFrame = function(frameState) {
 
   var layerStates = frameState.layerStates;
   var layersArray = frameState.layersArray;
+  var viewResolution = frameState.view2DState.resolution;
   var i, ii, image, layer, layerRenderer, layerState, transform;
   for (i = 0, ii = layersArray.length; i < ii; ++i) {
 
     layer = layersArray[i];
     layerRenderer = this.getLayerRenderer(layer);
     layerState = layerStates[goog.getUid(layer)];
-    if (!layerState.visible || !layerState.ready) {
+    if (!layerState.visible || !layerState.ready ||
+        viewResolution >= layerState.maxResolution ||
+        viewResolution < layerState.minResolution) {
       continue;
     }
     layerRenderer.renderFrame(frameState, layerState);

src/ol/renderer/webgl/webglmaprenderer.js

@@ -551,12 +551,15 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(frameState) {
   ++this.textureCacheFrameMarkerCount_;
 
   var layersArray = frameState.layersArray;
+  var viewResolution = frameState.view2DState.resolution;
   var i, ii, layer, layerRenderer, layerState;
   for (i = 0, ii = layersArray.length; i < ii; ++i) {
     layer = layersArray[i];
     layerRenderer = this.getLayerRenderer(layer);
     layerState = frameState.layerStates[goog.getUid(layer)];
-    if (layerState.visible && layerState.ready) {
+    if (layerState.visible && layerState.ready &&
+        viewResolution < layerState.maxResolution &&
+        viewResolution >= layerState.minResolution) {
       layerRenderer.renderFrame(frameState, layerState);
     }
   }
@@ -580,10 +583,11 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(frameState) {
   var currentProgram = null;
   var locations;
   for (i = 0, ii = layersArray.length; i < ii; ++i) {
-
     layer = layersArray[i];
     layerState = frameState.layerStates[goog.getUid(layer)];
-    if (!layerState.visible || !layerState.ready) {
+    if (!layerState.visible || !layerState.ready ||
+        viewResolution >= layerState.maxResolution ||
+        viewResolution < layerState.minResolution) {
       continue;
     }
     var useColor =