Add ol.layer.Heatmap class and example
This commit is contained in:
Frederic Junod
52
examples/heatmap-earthquakes.html
Normal file
52
examples/heatmap-earthquakes.html
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||||
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||||
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||||
|
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||||
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||||
|
<title>Earthquakes heatmap</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||||
|
<div class="navbar-inner">
|
||||||
|
<div class="container">
|
||||||
|
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div class="span12">
|
||||||
|
<div id="map" class="map"><div id="info"></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row-fluid">
|
||||||
|
|
||||||
|
<div class="span12">
|
||||||
|
<h4 id="title">Earthquakes heatmap</h4>
|
||||||
|
<p id="shortdesc">Demonstrates the use of a heatmap layer.</p>
|
||||||
|
<div id="docs">
|
||||||
|
<p>
|
||||||
|
This example parses a KML file and renders the features as a <code>ol.layer.Heatmap</code> layer.
|
||||||
|
</p>
|
||||||
|
<p>See the <a href="heatmap-earthquakes.js" target="_blank">heatmap-earthquakes.js source</a> to see how this is done.</p>
|
||||||
|
</div>
|
||||||
|
<div id="tags">heatmap, kml, vector, style</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="jquery.min.js" type="text/javascript"></script>
|
||||||
|
<script src="loader.js?id=heatmap-earthquakes" type="text/javascript"></script>
|
||||||
|
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
40
examples/heatmap-earthquakes.js
Normal file
40
examples/heatmap-earthquakes.js
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
goog.require('ol.Map');
|
||||||
|
goog.require('ol.View2D');
|
||||||
|
goog.require('ol.layer.Heatmap');
|
||||||
|
goog.require('ol.layer.Tile');
|
||||||
|
goog.require('ol.source.KML');
|
||||||
|
goog.require('ol.source.Stamen');
|
||||||
|
|
||||||
|
|
||||||
|
var vector = new ol.layer.Heatmap({
|
||||||
|
source: new ol.source.KML({
|
||||||
|
projection: 'EPSG:3857',
|
||||||
|
url: 'data/kml/2012_Earthquakes_Mag5.kml'
|
||||||
|
}),
|
||||||
|
radius: 5
|
||||||
|
});
|
||||||
|
|
||||||
|
vector.getSource().on('addfeature', function(event) {
|
||||||
|
// 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
|
||||||
|
// standards-violating <magnitude> tag in each Placemark. We extract it from
|
||||||
|
// the Placemark's name instead.
|
||||||
|
var name = event.feature.get('name');
|
||||||
|
var magnitude = parseFloat(name.substr(2));
|
||||||
|
event.feature.set('weight', magnitude - 5);
|
||||||
|
});
|
||||||
|
|
||||||
|
var raster = new ol.layer.Tile({
|
||||||
|
source: new ol.source.Stamen({
|
||||||
|
layer: 'toner'
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
var map = new ol.Map({
|
||||||
|
layers: [raster, vector],
|
||||||
|
renderer: 'canvas',
|
||||||
|
target: 'map',
|
||||||
|
view: new ol.View2D({
|
||||||
|
center: [0, 0],
|
||||||
|
zoom: 2
|
||||||
|
})
|
||||||
|
});
|
||||||
@@ -540,6 +540,26 @@
|
|||||||
* @todo stability experimental
|
* @todo stability experimental
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef {Object} olx.layer.HeatmapOptions
|
||||||
|
* @property {number|undefined} brightness Brightness.
|
||||||
|
* @property {number|undefined} contrast Contrast.
|
||||||
|
* @property {number|undefined} hue Hue.
|
||||||
|
* @property {Array.<string>|undefined} gradient The color gradient of the heatmap,
|
||||||
|
* specified as an array of CSS color strings. Default is `['#00f', '#0ff', '#0f0', '#ff0', '#f00']`.
|
||||||
|
* @property {number|undefined} minResolution The minimum resolution
|
||||||
|
* (inclusive) at which this layer will be visible.
|
||||||
|
* @property {number|undefined} maxResolution The maximum resolution
|
||||||
|
* (exclusive) below which this layer will be visible.
|
||||||
|
* @property {number|undefined} opacity Opacity. 0-1. Default is `1`.
|
||||||
|
* @property {number|undefined} saturation Saturation.
|
||||||
|
* @property {ol.source.Vector} source Source.
|
||||||
|
* @property {ol.style.Style|Array.<ol.style.Style>|ol.feature.StyleFunction|undefined} style Layer style.
|
||||||
|
* @property {boolean|undefined} visible Visibility. Default is `true` (visible).
|
||||||
|
* @todo stability experimental
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @typedef {Object} olx.layer.TileOptions
|
* @typedef {Object} olx.layer.TileOptions
|
||||||
* @property {number|undefined} brightness Brightness. Default is `0`.
|
* @property {number|undefined} brightness Brightness. Default is `0`.
|
||||||
|
|||||||
1
src/ol/layer/heatmaplayer.exports
Normal file
1
src/ol/layer/heatmaplayer.exports
Normal file
@@ -0,0 +1 @@
|
|||||||
|
@exportSymbol ol.layer.Heatmap
|
||||||
197
src/ol/layer/heatmaplayer.js
Normal file
197
src/ol/layer/heatmaplayer.js
Normal file
@@ -0,0 +1,197 @@
|
|||||||
|
// 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 {Uint32Array}
|
||||||
|
*/
|
||||||
|
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 {Uint32Array}
|
||||||
|
* @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);
|
||||||
|
var imageData = context.getImageData(0, 0, width, height).data;
|
||||||
|
for (var i = 0, ii = imageData.length; i < ii; i += 4) {
|
||||||
|
imageData[i + 3] = i / 4;
|
||||||
|
}
|
||||||
|
return new Uint32Array(imageData.buffer);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @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 view32 = new Uint32Array(image.data.buffer);
|
||||||
|
var view8 = image.data;
|
||||||
|
var i, ii, alpha;
|
||||||
|
for (i = 0, ii = view32.length; i < ii; ++i) {
|
||||||
|
alpha = view8[4 * i + 3];
|
||||||
|
if (alpha) {
|
||||||
|
view32[i] = this.gradient_[alpha];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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);
|
||||||
@@ -101,7 +101,7 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame =
|
|||||||
replayContext.globalAlpha = layerState.opacity;
|
replayContext.globalAlpha = layerState.opacity;
|
||||||
replayGroup.replay(
|
replayGroup.replay(
|
||||||
replayContext, frameState.extent, frameState.pixelRatio, transform,
|
replayContext, frameState.extent, frameState.pixelRatio, transform,
|
||||||
renderGeometryFunction);
|
frameState.view2DState.rotation, renderGeometryFunction);
|
||||||
|
|
||||||
if (replayContext != context) {
|
if (replayContext != context) {
|
||||||
this.dispatchRenderEvent(replayContext, frameState, transform);
|
this.dispatchRenderEvent(replayContext, frameState, transform);
|
||||||
|
|||||||
Reference in New Issue
Block a user