From 232f4975c4823e5d556c3c3ec71c34398d483ef4 Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Tue, 24 Feb 2015 17:10:15 +0100 Subject: [PATCH 1/2] Add ol.layer.Heatmap#blur getter and setter --- examples/heatmap-earthquakes.html | 2 ++ examples/heatmap-earthquakes.js | 6 ++++ src/ol/layer/heatmaplayer.js | 49 ++++++++++++++++++++++++------- 3 files changed, 46 insertions(+), 11 deletions(-) diff --git a/examples/heatmap-earthquakes.html b/examples/heatmap-earthquakes.html index d6ec6f8899..79a5e2e59a 100644 --- a/examples/heatmap-earthquakes.html +++ b/examples/heatmap-earthquakes.html @@ -45,6 +45,8 @@
+ +
diff --git a/examples/heatmap-earthquakes.js b/examples/heatmap-earthquakes.js index 0e41408931..277ed7fbe3 100644 --- a/examples/heatmap-earthquakes.js +++ b/examples/heatmap-earthquakes.js @@ -5,6 +5,7 @@ goog.require('ol.layer.Tile'); goog.require('ol.source.KML'); goog.require('ol.source.Stamen'); +var blur = $('#blur'); var radius = $('#radius'); var vector = new ol.layer.Heatmap({ @@ -13,6 +14,7 @@ var vector = new ol.layer.Heatmap({ projection: 'EPSG:3857', url: 'data/kml/2012_Earthquakes_Mag5.kml' }), + blur: parseInt(blur.val(), 10), radius: parseInt(radius.val(), 10) }); @@ -41,6 +43,10 @@ var map = new ol.Map({ }); +blur.on('input', function() { + vector.setBlur(parseInt(blur.val(), 10)); +}); + radius.on('input', function() { vector.setRadius(parseInt(radius.val(), 10)); }); diff --git a/src/ol/layer/heatmaplayer.js b/src/ol/layer/heatmaplayer.js index dd65d7906b..641d4df85d 100644 --- a/src/ol/layer/heatmaplayer.js +++ b/src/ol/layer/heatmaplayer.js @@ -16,6 +16,7 @@ goog.require('ol.style.Style'); * @enum {string} */ ol.layer.HeatmapLayerProperty = { + BLUR: 'blur', GRADIENT: 'gradient', RADIUS: 'radius' }; @@ -53,12 +54,6 @@ ol.layer.Heatmap = function(opt_options) { */ this.gradient_ = null; - /** - * @private - * @type {number} - */ - this.blur_ = goog.isDef(options.blur) ? options.blur : 15; - /** * @private * @type {number} @@ -81,9 +76,12 @@ ol.layer.Heatmap = function(opt_options) { ol.Object.getChangeEventType(ol.layer.HeatmapLayerProperty.GRADIENT), this.handleGradientChanged_, false, this); - goog.events.listen(this, - ol.Object.getChangeEventType(ol.layer.HeatmapLayerProperty.RADIUS), - this.handleStyleChanged_, false, this); + goog.events.listen(this, [ + ol.Object.getChangeEventType(ol.layer.HeatmapLayerProperty.BLUR), + ol.Object.getChangeEventType(ol.layer.HeatmapLayerProperty.RADIUS) + ], this.handleStyleChanged_, false, this); + + this.setBlur(goog.isDef(options.blur) ? options.blur : 15); this.setGradient(goog.isDef(options.gradient) ? options.gradient : ol.layer.Heatmap.DEFAULT_GRADIENT); @@ -168,11 +166,12 @@ ol.layer.Heatmap.createGradient_ = function(colors) { */ ol.layer.Heatmap.prototype.createCircle_ = function() { var radius = this.getRadius(); - var halfSize = radius + this.blur_ + 1; + var blur = this.getBlur(); + var halfSize = radius + blur + 1; var size = 2 * halfSize; var context = ol.dom.createCanvasContext2D(size, size); context.shadowOffsetX = context.shadowOffsetY = this.shadow_; - context.shadowBlur = this.blur_; + context.shadowBlur = blur; context.shadowColor = '#000'; context.beginPath(); var center = halfSize - this.shadow_; @@ -182,6 +181,20 @@ ol.layer.Heatmap.prototype.createCircle_ = function() { }; +/** + * @return {number} Blur size in pixels. + * @api + * @observable + */ +ol.layer.Heatmap.prototype.getBlur = function() { + return /** @type {number} */ (this.get(ol.layer.HeatmapLayerProperty.BLUR)); +}; +goog.exportProperty( + ol.layer.Heatmap.prototype, + 'getBlur', + ol.layer.Heatmap.prototype.getBlur); + + /** * @return {Array.} Colors. * @api @@ -252,6 +265,20 @@ ol.layer.Heatmap.prototype.handleRender_ = function(event) { }; +/** + * @param {number} blur Blur size in pixels. + * @api + * @observable + */ +ol.layer.Heatmap.prototype.setBlur = function(blur) { + this.set(ol.layer.HeatmapLayerProperty.BLUR, blur); +}; +goog.exportProperty( + ol.layer.Heatmap.prototype, + 'setBlur', + ol.layer.Heatmap.prototype.setBlur); + + /** * @param {Array.} colors Gradient. * @api From d12cdc336c77b0e8d40a357d843b941712746a81 Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Wed, 25 Feb 2015 09:16:42 +0100 Subject: [PATCH 2/2] Create the circle only when the blur and radius are set --- src/ol/layer/heatmaplayer.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/ol/layer/heatmaplayer.js b/src/ol/layer/heatmaplayer.js index 641d4df85d..957da02f76 100644 --- a/src/ol/layer/heatmaplayer.js +++ b/src/ol/layer/heatmaplayer.js @@ -76,17 +76,19 @@ ol.layer.Heatmap = function(opt_options) { ol.Object.getChangeEventType(ol.layer.HeatmapLayerProperty.GRADIENT), this.handleGradientChanged_, false, this); + this.setGradient(goog.isDef(options.gradient) ? + options.gradient : ol.layer.Heatmap.DEFAULT_GRADIENT); + + this.setBlur(goog.isDef(options.blur) ? options.blur : 15); + + this.setRadius(goog.isDef(options.radius) ? options.radius : 8); + goog.events.listen(this, [ ol.Object.getChangeEventType(ol.layer.HeatmapLayerProperty.BLUR), ol.Object.getChangeEventType(ol.layer.HeatmapLayerProperty.RADIUS) ], this.handleStyleChanged_, false, this); - this.setBlur(goog.isDef(options.blur) ? options.blur : 15); - - this.setGradient(goog.isDef(options.gradient) ? - options.gradient : ol.layer.Heatmap.DEFAULT_GRADIENT); - - this.setRadius(goog.isDef(options.radius) ? options.radius : 8); + this.handleStyleChanged_(); var weight = goog.isDef(options.weight) ? options.weight : 'weight'; var weightFunction; @@ -100,6 +102,8 @@ ol.layer.Heatmap = function(opt_options) { goog.asserts.assert(goog.isFunction(weightFunction)); this.setStyle(goog.bind(function(feature, resolution) { + goog.asserts.assert(!goog.isNull(this.styleCache_)); + goog.asserts.assert(goog.isDef(this.circleImage_)); var weight = weightFunction(feature); var opacity = goog.isDef(weight) ? goog.math.clamp(weight, 0, 1) : 1; // cast to 8 bits @@ -167,6 +171,7 @@ ol.layer.Heatmap.createGradient_ = function(colors) { ol.layer.Heatmap.prototype.createCircle_ = function() { var radius = this.getRadius(); var blur = this.getBlur(); + goog.asserts.assert(goog.isDef(radius) && goog.isDef(blur)); var halfSize = radius + blur + 1; var size = 2 * halfSize; var context = ol.dom.createCanvasContext2D(size, size); @@ -248,6 +253,7 @@ ol.layer.Heatmap.prototype.handleStyleChanged_ = function() { */ ol.layer.Heatmap.prototype.handleRender_ = function(event) { goog.asserts.assert(event.type == ol.render.EventType.RENDER); + goog.asserts.assert(!goog.isNull(this.gradient_)); var context = event.context; var canvas = context.canvas; var image = context.getImageData(0, 0, canvas.width, canvas.height);