Only render if sources are ready

examples/raster.js

@@ -34,7 +34,7 @@ function color(pixels) {
     pixel[0] = 0;
     pixel[1] = 255;
     pixel[2] = 0;
-    pixel[3] = 255;
+    pixel[3] = 128;
   } else {
     pixel[3] = 0;
   }
@@ -70,9 +70,10 @@ var map = new ol.Map({
   ],
   target: 'map',
   view: new ol.View({
-    center: [-9651695.964309687, 4937351.719788862],
+    center: [-9651695, 4937351],
     zoom: 13,
-    minZoom: 12
+    minZoom: 12,
+    maxZoom: 19
   })
 });
 

src/ol/source/rastersource.js

@@ -16,6 +16,7 @@ goog.require('ol.raster.IdentityOp');
 goog.require('ol.renderer.canvas.ImageLayer');
 goog.require('ol.renderer.canvas.TileLayer');
 goog.require('ol.source.Image');
+goog.require('ol.source.State');
 goog.require('ol.source.Tile');
 
 
@@ -172,6 +173,25 @@ ol.source.Raster.prototype.getImage =
 };
 
 
+/**
+ * Determine if all sources are ready.
+ * @return {boolean} All sources are ready.
+ * @private
+ */
+ol.source.Raster.prototype.allSourcesReady_ = function() {
+  var ready = true;
+  var source;
+  for (var i = 0, ii = this.renderers_.length; i < ii; ++i) {
+    source = this.renderers_[i].getLayer().getSource();
+    if (source.getState() !== ol.source.State.READY) {
+      ready = false;
+      break;
+    }
+  }
+  return ready;
+};
+
+
 /**
  * Compose the frame.  This renders data from all sources, runs pixel-wise
  * operations, and renders the result to the stored canvas context.
@@ -179,6 +199,9 @@ ol.source.Raster.prototype.getImage =
  * @private
  */
 ol.source.Raster.prototype.composeFrame_ = function(frameState) {
+  if (!this.allSourcesReady_()) {
+    return;
+  }
   var len = this.renderers_.length;
   var imageDatas = new Array(len);
   var pixels = new Array(len);