mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
66 lines
2.2 KiB
JavaScript
66 lines
2.2 KiB
JavaScript
/* Copyright (c) 2015 Jean-Marc VIGLINO,
|
|
released under the CeCILL-B license (French BSD license)
|
|
(http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
|
|
*/
|
|
/** Pulse a point on postcompose
|
|
* @param {ol.coordinates} point to pulse
|
|
* @param {ol.pulse.options} pulse options param
|
|
* - projection {ol.projection||String} projection of coords
|
|
* - duration {Number} animation duration in ms, default 3000
|
|
* - radius {Number} radius of the circle (in px), default 30
|
|
* - amplitude {Number} movement amplitude (in px), default 0
|
|
* - easing {ol.easing} easing function, default ol.easing.easeOut
|
|
* - width {Number} line width, default 2
|
|
* - color {ol.color} line color, default red
|
|
*/
|
|
ol.Map.prototype.pulse = function(coords, options)
|
|
{ var listenerKey;
|
|
options = options || {};
|
|
|
|
// Change to map's projection
|
|
if (options.projection)
|
|
{ coords = ol.proj.transform(coords, options.projection, this.getView().getProjection());
|
|
}
|
|
|
|
// options
|
|
var start = new Date().getTime();
|
|
var duration = options.duration || 3000;
|
|
var maxRadius = options.radius || 30;
|
|
if (maxRadius<0) maxRadius = 5;
|
|
var minRadius = maxRadius - (options.amplitude || maxRadius); //options.minRadius || 0;
|
|
var easing = options.easing || ol.easing.easeOut;
|
|
var width = options.lineWidth || 2;
|
|
var color = options.color || 'red';
|
|
|
|
// Animate function
|
|
function animate(event)
|
|
{ var frameState = event.frameState;
|
|
var ratio = frameState.pixelRatio;
|
|
var elapsed = frameState.time - start;
|
|
if (elapsed > duration) ol.Observable.unByKey(listenerKey);
|
|
else
|
|
{ var elapsedRatio = elapsed / duration;
|
|
var p = this.getPixelFromCoordinate(coords);
|
|
var context = event.context;
|
|
context.save();
|
|
context.scale(ratio,ratio);
|
|
context.beginPath();
|
|
var e = easing(elapsedRatio)
|
|
var r = (1-e) * minRadius + e * maxRadius;
|
|
context.arc(p[0], p[1], (r>0?r:0), 0, 2 * Math.PI, false);
|
|
context.globalAlpha = easing(1 - elapsedRatio);
|
|
context.lineWidth = width;
|
|
context.strokeStyle = color;
|
|
context.stroke();
|
|
context.restore();
|
|
// tell OL3 to continue postcompose animation
|
|
frameState.animate = true;
|
|
}
|
|
}
|
|
|
|
// Launch animation
|
|
listenerKey = this.on('postcompose', animate, this);
|
|
this.renderSync();
|
|
}
|
|
|