Take the feature's weight into account

src/ol/layer/heatmaplayer.js

@@ -1,4 +1,3 @@
-// FIXME feature weight property
 goog.provide('ol.layer.Heatmap');
 
 goog.require('goog.asserts');
@@ -46,34 +45,36 @@ ol.layer.Heatmap = function(opt_options) {
   this.setGradient(goog.isDef(options.gradient) ?
       options.gradient : ol.layer.Heatmap.DEFAULT_GRADIENT);
 
-  var radius = goog.isDef(options.radius) ? options.radius : 8;
+  var circle = ol.layer.Heatmap.createCircle_(
-  var blur = goog.isDef(options.blur) ? options.blur : 15;
+      goog.isDef(options.radius) ? options.radius : 8,
-  var shadow = goog.isDef(options.shadow) ? options.shadow : 250;
+      goog.isDef(options.blur) ? options.blur : 15,
+      goog.isDef(options.shadow) ? options.shadow : 250);
 
-  var style = new ol.style.Style({
+  /**
-    image: ol.layer.Heatmap.createIcon_(radius, blur, shadow)
+   * @type {Array.<Array.<ol.style.Style>>}
+   */
+  var styleCache = new Array(256);
+
+  this.setStyle(function(feature, resolution) {
+    var weight = feature.get('weight');
+    var opacity = goog.isDef(weight) ? weight : 1;
+    // cast to 8 bits
+    var index = (255 * opacity) | 0;
+    var style = styleCache[index];
+    if (!goog.isDef(style)) {
+      style = [
+        new ol.style.Style({
+          image: new ol.style.Icon({
+            opacity: opacity,
+            src: circle
+          })
+        })
+      ];
+      styleCache[index] = style;
+    }
+    return style;
   });
 
-  // FIXME: styles are immutable
-  // /**
-  //  * @param {ol.Feature} feature
-  //  * @param {number} resolution
-  //  * @return {number} weight
-  //  */
-  // var weightFunction = function(feature, resolution) {
-  //   var weight = /** @type {number} */ (feature.get('weight'));
-  //   return goog.isDef(weight) ? weight : 1;
-  // };
-  //
-  // var styleArray = [style];
-  // this.setStyle(function(feature, resolution) {
-  //   var image = style.getImage();
-  //   image.setOpacity(weightFunction(feature, resolution));
-  //   return styleArray;
-  // });
-
-  this.setStyle(style);
-
   goog.events.listen(this, ol.render.EventType.RENDER,
       this.handleRender_, false, this);
 
@@ -102,7 +103,7 @@ ol.layer.Heatmap.createGradient_ = function(colors) {
   canvas.height = height;
 
   var gradient = context.createLinearGradient(0, 0, width, height);
-  var step = 1 / colors.length;
+  var step = 1 / (colors.length - 1);
   for (var i = 0, ii = colors.length; i < ii; ++i) {
     gradient.addColorStop(i * step, colors[i]);
   }
@@ -118,10 +119,10 @@ ol.layer.Heatmap.createGradient_ = function(colors) {
  * @param {number} radius Radius size in pixel.
  * @param {number} blur Blur size in pixel.
  * @param {number} shadow Shadow offset size in pixel.
- * @return {ol.style.Icon} icon
+ * @return {string}
  * @private
  */
-ol.layer.Heatmap.createIcon_ = function(radius, blur, shadow) {
+ol.layer.Heatmap.createCircle_ = function(radius, blur, shadow) {
   var canvas =  /** @type {HTMLCanvasElement} */
       (goog.dom.createElement(goog.dom.TagName.CANVAS));
   var context = canvas.getContext('2d');
@@ -134,9 +135,7 @@ ol.layer.Heatmap.createIcon_ = function(radius, blur, shadow) {
   var center = halfSize - shadow;
   context.arc(center, center, radius, 0, Math.PI * 2, true);
   context.fill();
-  return new ol.style.Icon({
+  return canvas.toDataURL();
-    src: canvas.toDataURL()
-  });
 };