Limit image layer requests to layer extent

This has two nice consequences that can be seen in the wms-image.js and mapbuide-untiled.js examples:
 * no images are requested when you browse outside of the layer extent
 * when the layer extent is within the viewport extent, cached images are used since the intersecting extent is the same for multiple viewport extents

examples/mapguide-untiled.js

@@ -15,6 +15,7 @@ var bounds = [
 var map = new ol.Map({
   layers: [
     new ol.layer.Image({
+      extent: bounds,
       source: new ol.source.MapGuide({
         projection: 'EPSG:4326',
         url: agentUrl,
@@ -24,8 +25,7 @@ var map = new ol.Map({
           MAPDEFINITION: mdf,
           FORMAT: 'PNG'
         },
-        ratio: 2,
-        extent: bounds
+        ratio: 2
       })
     })
   ],

examples/wms-image.js

@@ -11,11 +11,11 @@ var layers = [
     source: new ol.source.MapQuest({layer: 'sat'})
   }),
   new ol.layer.Image({
+    extent: [-13884991, 2870341, -7455066, 6338219],
     source: new ol.source.ImageWMS({
       url: 'http://demo.opengeo.org/geoserver/wms',
       params: {'LAYERS': 'topp:states'},
-      serverType: 'geoserver',
-      extent: [-13884991, 2870341, -7455066, 6338219]
+      serverType: 'geoserver'
     })
   })
 ];

src/ol/renderer/canvas/canvasimagelayerrenderer.js

@@ -7,6 +7,7 @@ goog.require('goog.vec.Mat4');
 goog.require('ol.ImageBase');
 goog.require('ol.ImageState');
 goog.require('ol.ViewHint');
+goog.require('ol.extent');
 goog.require('ol.layer.Image');
 goog.require('ol.renderer.Map');
 goog.require('ol.renderer.canvas.Layer');
@@ -102,9 +103,16 @@ ol.renderer.canvas.ImageLayer.prototype.prepareFrame =
 
   var hints = frameState.viewHints;
 
-  if (!hints[ol.ViewHint.ANIMATING] && !hints[ol.ViewHint.INTERACTING]) {
+  var renderedExtent = frameState.extent;
+  if (goog.isDef(layerState.extent)) {
+    renderedExtent = ol.extent.getIntersection(
+        renderedExtent, layerState.extent);
+  }
+
+  if (!hints[ol.ViewHint.ANIMATING] && !hints[ol.ViewHint.INTERACTING] &&
+      !ol.extent.isEmpty(renderedExtent)) {
     image = imageSource.getImage(
-        frameState.extent, viewResolution, pixelRatio, viewState.projection);
+        renderedExtent, viewResolution, pixelRatio, viewState.projection);
     if (!goog.isNull(image)) {
       var imageState = image.getState();
       if (imageState == ol.ImageState.IDLE) {

src/ol/renderer/dom/domimagelayerrenderer.js

@@ -10,6 +10,7 @@ goog.require('ol.ImageBase');
 goog.require('ol.ImageState');
 goog.require('ol.ViewHint');
 goog.require('ol.dom');
+goog.require('ol.extent');
 goog.require('ol.layer.Image');
 goog.require('ol.renderer.dom.Layer');
 goog.require('ol.source.Image');
@@ -89,8 +90,15 @@ ol.renderer.dom.ImageLayer.prototype.prepareFrame =
 
   var hints = frameState.viewHints;
 
-  if (!hints[ol.ViewHint.ANIMATING] && !hints[ol.ViewHint.INTERACTING]) {
-    var image_ = imageSource.getImage(frameState.extent, viewResolution,
+  var renderedExtent = frameState.extent;
+  if (goog.isDef(layerState.extent)) {
+    renderedExtent = ol.extent.getIntersection(
+        renderedExtent, layerState.extent);
+  }
+
+  if (!hints[ol.ViewHint.ANIMATING] && !hints[ol.ViewHint.INTERACTING] &&
+      !ol.extent.isEmpty(renderedExtent)) {
+    var image_ = imageSource.getImage(renderedExtent, viewResolution,
         frameState.pixelRatio, viewState.projection);
     if (!goog.isNull(image_)) {
       var imageState = image_.getState();

src/ol/renderer/webgl/webglimagelayerrenderer.js

@@ -10,6 +10,7 @@ goog.require('ol.Extent');
 goog.require('ol.ImageBase');
 goog.require('ol.ImageState');
 goog.require('ol.ViewHint');
+goog.require('ol.extent');
 goog.require('ol.layer.Image');
 goog.require('ol.renderer.webgl.Layer');
 goog.require('ol.source.Image');
@@ -119,8 +120,14 @@ ol.renderer.webgl.ImageLayer.prototype.prepareFrame =
 
   var hints = frameState.viewHints;
 
-  if (!hints[ol.ViewHint.ANIMATING] && !hints[ol.ViewHint.INTERACTING]) {
-    var image_ = imageSource.getImage(frameState.extent, viewResolution,
+  var renderedExtent = frameState.extent;
+  if (goog.isDef(layerState.extent)) {
+    renderedExtent = ol.extent.getIntersection(
+        renderedExtent, layerState.extent);
+  }
+  if (!hints[ol.ViewHint.ANIMATING] && !hints[ol.ViewHint.INTERACTING] &&
+      !ol.extent.isEmpty(renderedExtent)) {
+    var image_ = imageSource.getImage(renderedExtent, viewResolution,
         frameState.pixelRatio, viewState.projection);
     if (!goog.isNull(image_)) {
       var imageState = image_.getState();