67 lines
2.4 KiB
JavaScript
67 lines
2.4 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).
|
|
*/
|
|
|
|
import ol_Map from 'ol/Map.js'
|
|
import {transformExtent as ol_proj_transformExtent} from 'ol/proj.js'
|
|
import {unByKey as ol_Observable_unByKey} from 'ol/Observable.js'
|
|
import {upAndDown as ol_easing_upAndDown} from 'ol/easing.js'
|
|
|
|
/** Pulse an extent on postcompose
|
|
* @param {ol.coordinates} point to pulse
|
|
* @param {ol.pulse.options} options pulse options param
|
|
* @param {ol.projectionLike|undefined} options.projection projection of coords, default no transform
|
|
* @param {Number} options.duration animation duration in ms, default 2000
|
|
* @param {ol.easing} options.easing easing function, default ol.easing.upAndDown
|
|
* @param {ol.style.Stroke} options.style stroke style, default 2px red
|
|
*/
|
|
ol_Map.prototype.animExtent = function(extent, options){
|
|
var listenerKey;
|
|
options = options || {};
|
|
|
|
// Change to map's projection
|
|
if (options.projection) {
|
|
extent = ol_proj_transformExtent (extent, options.projection, this.getView().getProjection());
|
|
}
|
|
|
|
// options
|
|
var start = new Date().getTime();
|
|
var duration = options.duration || 1000;
|
|
var easing = options.easing || ol_easing_upAndDown;
|
|
var width = options.style ? options.style.getWidth() || 2 : 2;
|
|
var color = options.style ? options.style.getColr() || 'red' : '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 p0 = this.getPixelFromCoordinate([extent[0],extent[1]]);
|
|
var p1 = this.getPixelFromCoordinate([extent[2],extent[3]]);
|
|
|
|
var context = event.context;
|
|
context.save();
|
|
context.scale(ratio,ratio);
|
|
context.beginPath();
|
|
// var e = easing(elapsedRatio)
|
|
context.globalAlpha = easing(1 - elapsedRatio);
|
|
context.lineWidth = width;
|
|
context.strokeStyle = color;
|
|
context.rect(p0[0], p0[1], p1[0]-p0[0], p1[1]-p0[1]);
|
|
context.stroke();
|
|
context.restore();
|
|
// tell OL3 to continue postcompose animation
|
|
frameState.animate = true;
|
|
}
|
|
}
|
|
|
|
// Launch animation
|
|
listenerKey = this.on('postcompose', animate.bind(this));
|
|
try { this.renderSync(); } catch(e) { /* ok */ }
|
|
}
|