ol-ext/src/render/AnimExtent.js

A set of cool extensions for OpenLayers (ol) in node modules structure

/*	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 */ }
}