ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #1687 from fredj/ol.layer.Heatmap

Browse Source 
Add ol.layer.heatmap
This commit is contained in:
Frédéric Junod
2014-03-06 15:00:13 +01:00
parent d1a85502a4 3bc0a6e6f0
commit 68f5adc284
8 changed files with 356 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ol/layer/heatmaplayer.exports
+1
View File
@@ -0,0 +1 @@
@exportSymbol ol.layer.Heatmap
src/ol/layer/heatmaplayer.js
+195
View File
@@ -0,0 +1,195 @@
// FIXME feature weight property
goog.provide('ol.layer.Heatmap');
goog.require('goog.asserts');
goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.events');
goog.require('ol.Object');
goog.require('ol.layer.Vector');
goog.require('ol.render.EventType');
goog.require('ol.style.Icon');
goog.require('ol.style.Style');
/**
* @enum {string}
*/
ol.layer.HeatmapLayerProperty = {
GRADIENT: 'gradient'
};
/**
* @constructor
* @extends {ol.layer.Vector}
* @param {olx.layer.HeatmapOptions=} opt_options Options.
* @todo stability experimental
*/
ol.layer.Heatmap = function(opt_options) {
var options = goog.isDef(opt_options) ? opt_options : {};
goog.base(this, /** @type {olx.layer.VectorOptions} */ (options));
/**
* @private
* @type {Uint8ClampedArray}
*/
this.gradient_ = null;
goog.events.listen(this,
ol.Object.getChangeEventType(ol.layer.HeatmapLayerProperty.GRADIENT),
this.handleGradientChanged_, false, this);
this.setGradient(goog.isDef(options.gradient) ?
options.gradient : ol.layer.Heatmap.DEFAULT_GRADIENT);
var radius = goog.isDef(options.radius) ? options.radius : 8;
var blur = goog.isDef(options.blur) ? options.blur : 15;
var shadow = goog.isDef(options.shadow) ? options.shadow : 250;
var style = new ol.style.Style({
image: ol.layer.Heatmap.createIcon_(radius, blur, shadow)
});
// 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);
};
goog.inherits(ol.layer.Heatmap, ol.layer.Vector);
/**
* @const
* @type {Array.<string>}
*/
ol.layer.Heatmap.DEFAULT_GRADIENT = ['#00f', '#0ff', '#0f0', '#ff0', '#f00'];
/**
* @param {Array.<string>} colors
* @return {Uint8ClampedArray}
* @private
*/
ol.layer.Heatmap.createGradient_ = function(colors) {
var canvas = goog.dom.createElement(goog.dom.TagName.CANVAS);
var context = canvas.getContext('2d');
var width = 1;
var height = 256;
canvas.width = width;
canvas.height = height;
var gradient = context.createLinearGradient(0, 0, width, height);
var step = 1 / colors.length;
for (var i = 0, ii = colors.length; i < ii; ++i) {
gradient.addColorStop(i * step, colors[i]);
}
context.fillStyle = gradient;
context.fillRect(0, 0, width, height);
return context.getImageData(0, 0, width, height).data;
};
/**
* @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
* @private
*/
ol.layer.Heatmap.createIcon_ = function(radius, blur, shadow) {
var canvas = /** @type {HTMLCanvasElement} */
(goog.dom.createElement(goog.dom.TagName.CANVAS));
var context = canvas.getContext('2d');
var halfSize = radius + blur + 1;
canvas.width = canvas.height = halfSize * 2;
context.shadowOffsetX = context.shadowOffsetY = shadow;
context.shadowBlur = blur;
context.shadowColor = '#000';
context.beginPath();
var center = halfSize - shadow;
context.arc(center, center, radius, 0, Math.PI * 2, true);
context.fill();
return new ol.style.Icon({
src: canvas.toDataURL()
});
};
/**
* @return {Array.<string>} Colors.
*/
ol.layer.Heatmap.prototype.getGradient = function() {
return /** @type {Array.<string>} */ (
this.get(ol.layer.HeatmapLayerProperty.GRADIENT));
};
goog.exportProperty(
ol.layer.Heatmap.prototype,
'getGradient',
ol.layer.Heatmap.prototype.getGradient);
/**
* @private
*/
ol.layer.Heatmap.prototype.handleGradientChanged_ = function() {
this.gradient_ = ol.layer.Heatmap.createGradient_(this.getGradient());
};
/**
* @param {ol.render.Event} event Post compose event
* @private
*/
ol.layer.Heatmap.prototype.handleRender_ = function(event) {
goog.asserts.assert(event.type == ol.render.EventType.RENDER);
var context = event.context;
var canvas = context.canvas;
var image = context.getImageData(0, 0, canvas.width, canvas.height);
var view8 = image.data;
var i, ii, alpha, offset;
for (i = 0, ii = view8.length; i < ii; i += 4) {
alpha = view8[i + 3] * 4;
if (alpha) {
view8[i] = this.gradient_[alpha];
view8[i + 1] = this.gradient_[alpha + 1];
view8[i + 2] = this.gradient_[alpha + 2];
}
}
context.putImageData(image, 0, 0);
};
/**
* @param {Array.<string>} colors Gradient.
*/
ol.layer.Heatmap.prototype.setGradient = function(colors) {
this.set(ol.layer.HeatmapLayerProperty.GRADIENT, colors);
};
goog.exportProperty(
ol.layer.Heatmap.prototype,
'setGradient',
ol.layer.Heatmap.prototype.setGradient);
src/ol/render/renderevent.js
+2 -1
View File
@@ -10,7 +10,8 @@ goog.require('ol.render.IVectorContext');
*/
ol.render.EventType = {
POSTCOMPOSE: 'postcompose',
PRECOMPOSE: 'precompose'
PRECOMPOSE: 'precompose',
RENDER: 'render'
};
src/ol/renderer/canvas/canvaslayerrenderer.js
+13
View File
@@ -122,6 +122,19 @@ ol.renderer.canvas.Layer.prototype.dispatchPreComposeEvent =
};
/**
* @param {CanvasRenderingContext2D} context Context.
* @param {ol.FrameState} frameState Frame state.
* @param {goog.vec.Mat4.Number=} opt_transform Transform.
* @protected
*/
ol.renderer.canvas.Layer.prototype.dispatchRenderEvent =
function(context, frameState, opt_transform) {
this.dispatchComposeEvent_(ol.render.EventType.RENDER, context,
frameState, opt_transform);
};
/**
* @return {HTMLCanvasElement|HTMLVideoElement|Image} Canvas.
*/
src/ol/renderer/canvas/canvasvectorlayerrenderer.js
+33 -2
View File
@@ -1,12 +1,15 @@
goog.provide('ol.renderer.canvas.VectorLayer');
goog.require('goog.asserts');
goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.events');
goog.require('goog.functions');
goog.require('ol.ViewHint');
goog.require('ol.extent');
goog.require('ol.feature');
goog.require('ol.layer.Vector');
goog.require('ol.render.EventType');
goog.require('ol.render.canvas.ReplayGroup');
goog.require('ol.renderer.canvas.Layer');
goog.require('ol.renderer.vector');
@@ -54,6 +57,19 @@ ol.renderer.canvas.VectorLayer = function(mapRenderer, vectorLayer) {
*/
this.replayGroup_ = null;
/**
* @type {HTMLCanvasElement}
*/
var canvas = /** @type {HTMLCanvasElement} */
(goog.dom.createElement(goog.dom.TagName.CANVAS));
/**
* @private
* @type {CanvasRenderingContext2D}
*/
this.context_ = /** @type {CanvasRenderingContext2D} */
(canvas.getContext('2d'));
};
goog.inherits(ol.renderer.canvas.VectorLayer, ol.renderer.canvas.Layer);
@@ -70,12 +86,27 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame =
var replayGroup = this.replayGroup_;
if (!goog.isNull(replayGroup) && !replayGroup.isEmpty()) {
var layer = this.getLayer();
var replayContext;
if (layer.hasListener(ol.render.EventType.RENDER)) {
// resize and clear
this.context_.canvas.width = context.canvas.width;
this.context_.canvas.height = context.canvas.height;
replayContext = this.context_;
} else {
replayContext = context;
}
var renderGeometryFunction = this.getRenderGeometryFunction_();
goog.asserts.assert(goog.isFunction(renderGeometryFunction));
context.globalAlpha = layerState.opacity;
replayContext.globalAlpha = layerState.opacity;
replayGroup.replay(
context, frameState.extent, frameState.pixelRatio, transform,
replayContext, frameState.extent, frameState.pixelRatio, transform,
frameState.view2DState.rotation, renderGeometryFunction);
if (replayContext != context) {
this.dispatchRenderEvent(replayContext, frameState, transform);
context.drawImage(replayContext.canvas, 0, 0);
}
}
this.dispatchPostComposeEvent(context, frameState, transform);