canvas/heatmapFeature.js

  1. var inherit = require('../inherit');
  2. var registerFeature = require('../registry').registerFeature;
  3. var heatmapFeature = require('../heatmapFeature');
  4. var timestamp = require('../timestamp');
  5. var util = require('../util');
  7. /**
  8.  * Create a new instance of class canvas.heatmapFeature.
  9.  * Inspired from
  10.  *    https://github.com/mourner/simpleheat/blob/gh-pages/simpleheat.js .
  11.  *
  12.  * @class
  13.  * @alias geo.canvas.heatmapFeature
  14.  * @param {geo.heatmapFeature.spec} arg
  15.  * @extends geo.heatmapFeature
  16.  * @returns {canvas_heatmapFeature}
  17.  */
  18. var canvas_heatmapFeature = function (arg) {
  19.   'use strict';
  21.   if (!(this instanceof canvas_heatmapFeature)) {
  22.     return new canvas_heatmapFeature(arg);
  23.   }
  24.   heatmapFeature.call(this, arg);
  25.   var object = require('./object');
  27.   object.call(this);
  29.   /**
  30.    * @private
  31.    */
  32.   var geo_event = require('../event');
  34.   var m_this = this,
  35.       m_typedBuffer,
  36.       m_typedClampedBuffer,
  37.       m_typedBufferData,
  38.       m_heatMapPosition,
  39.       m_heatMapTransform,
  40.       s_init = this._init,
  41.       s_update = this._update,
  42.       m_lastRenderDuration,
  43.       m_renderTime = timestamp();
  45.   /**
  46.    * Compute gradient.  This creates a color lookup table.
  47.    *
  48.    * @returns {this}
  49.    */
  50.   this._computeGradient = function () {
  51.     var canvas, stop, context2d, gradient, colors;
  53.     colors = m_this.style('color');
  54.     if (!m_this._grad || m_this._gradColors !== colors) {
  55.       canvas = document.createElement('canvas');
  56.       context2d = canvas.getContext('2d');
  57.       gradient = context2d.createLinearGradient(0, 0, 0, 256);
  59.       canvas.width = 1;
  60.       canvas.height = 256;
  62.       for (stop in colors) {
  63.         gradient.addColorStop(stop, util.convertColorToRGBA(colors[stop]));
  64.       }
  66.       context2d.fillStyle = gradient;
  67.       context2d.fillRect(0, 0, 1, 256);
  68.       m_this._grad = context2d.getImageData(0, 0, 1, 256).data;
  69.       m_this._gradColors = colors;
  70.     }
  72.     return m_this;
  73.   };
  75.   /**
  76.    * Create a circle to render at each data point.
  77.    *
  78.    * @returns {this}
  79.    */
  80.   this._createCircle = function () {
  81.     var circle, ctx, r, r2, blur, gaussian, scale;
  82.     r = m_this.style('radius');
  83.     blur = m_this.style('blurRadius');
  84.     gaussian = m_this.style('gaussian');
  85.     scale = m_this.style('scaleWithZoom');
  86.     if (scale) {
  87.       const zoom = this.layer().map().zoom();
  88.       scale = Math.pow(2, zoom);
  89.       r *= scale;
  90.       blur *= scale;
  91.     }
  92.     if (!m_this._circle || m_this._circle.gaussian !== gaussian ||
  93.         m_this._circle.radius !== r || m_this._circle.blurRadius !== blur) {
  94.       circle = m_this._circle = document.createElement('canvas');
  95.       ctx = circle.getContext('2d');
  96.       r2 = blur + r;
  97.       circle.width = circle.height = r2 * 2;
  98.       if (!gaussian) {
  99.         ctx.shadowOffsetX = ctx.shadowOffsetY = r2 * 2;
  100.         ctx.shadowBlur = blur;
  101.         ctx.shadowColor = 'black';
  102.         ctx.beginPath();
  103.         ctx.arc(-r2, -r2, r, 0, Math.PI * 2, true);
  104.         ctx.closePath();
  105.         ctx.fill();
  106.       } else {
  107.         /* This approximates a gaussian distribution by using a 10-step
  108.          * piecewise linear radial gradient.  Strictly, it should not stop at
  109.          * the radius, but should be attenuated further.  The scale has been
  110.          * selected such that the values at the radius are around 1/256th of
  111.          * the maximum, and therefore would not be visible using an 8-bit alpha
  112.          * channel for the summation.  The values for opacity were generated by
  113.          * the python expression:
  114.          *   from scipy.stats import norm
  115.          *   for r in [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]:
  116.          *     opacity = norm.pdf(r, scale=0.3) / norm.pdf(0, scale=0.3)
  117.          * Using a 10-interval approximation is accurate to within 0.5% of the
  118.          * actual Gaussian magnitude.  Switching to a 20-interval approximation
  119.          * would get within 0.1%, at which point there is more error from using
  120.          * a Gaussian truncated at the radius than from the approximation.
  121.          */
  122.         var grad = ctx.createRadialGradient(r2, r2, 0, r2, r2, r2);
  123.         grad.addColorStop(0.0, 'rgba(255,255,255,1)');
  124.         grad.addColorStop(0.1, 'rgba(255,255,255,0.946)');
  125.         grad.addColorStop(0.2, 'rgba(255,255,255,0.801)');
  126.         grad.addColorStop(0.3, 'rgba(255,255,255,0.607)');
  127.         grad.addColorStop(0.4, 'rgba(255,255,255,0.411)');
  128.         grad.addColorStop(0.5, 'rgba(255,255,255,0.249)');
  129.         grad.addColorStop(0.6, 'rgba(255,255,255,0.135)');
  130.         grad.addColorStop(0.7, 'rgba(255,255,255,0.066)');
  131.         grad.addColorStop(0.8, 'rgba(255,255,255,0.029)');
  132.         grad.addColorStop(0.9, 'rgba(255,255,255,0.011)');
  133.         grad.addColorStop(1.0, 'rgba(255,255,255,0)');
  134.         ctx.fillStyle = grad;
  135.         ctx.fillRect(0, 0, r2 * 2, r2 * 2);
  136.       }
  137.       circle.radius = r;
  138.       circle.blurRadius = blur;
  139.       circle.gaussian = gaussian;
  140.       m_this._circle = circle;
  141.     }
  142.     return m_this;
  143.   };
  145.   /**
  146.    * Compute color for each pixel on the screen.
  147.    *
  148.    * @param {Uint8ClampedArray} pixels A 2D canvas `getImageData` buffer.
  149.    * @param {Uint8ClampedArray} gradient A 2D canvas with 256 pixels that
  150.    *    contain a color gradient.
  151.    * @protected
  152.    */
  153.   this._colorize = function (pixels, gradient) {
  154.     var grad = new Uint32Array(gradient.buffer),
  155.         pixlen = pixels.length,
  156.         i, j, k;
  157.     if (!m_typedBuffer || m_typedBuffer.length !== pixlen) {
  158.       m_typedBuffer = new ArrayBuffer(pixlen);
  159.       m_typedClampedBuffer = new Uint8ClampedArray(m_typedBuffer);
  160.       m_typedBufferData = new Uint32Array(m_typedBuffer);
  161.     }
  162.     for (i = 3, k = 0; i < pixlen; i += 4, k += 1) {
  163.       // Get opacity from the temporary canvas image and look up the final
  164.       // value from gradient
  165.       j = pixels[i];
  166.       if (j) {
  167.         m_typedBufferData[k] = grad[j];
  168.       }
  169.     }
  170.     pixels.set(m_typedClampedBuffer);
  171.   };
  173.   /**
  174.    * Render individual data points on the canvas.
  175.    *
  176.    * @param {RenderingContext} context2d The canvas context to draw in.
  177.    * @param {geo.map} map The parent map object.
  178.    * @param {array} data The main data array.
  179.    * @param {number} radius The sum of `radius` and `blurRadius`.
  180.    */
  181.   this._renderPoints = function (context2d, map, data, radius) {
  182.     var position = m_this.gcsPosition(),
  183.         intensityFunc = m_this.intensity(),
  184.         minIntensity = m_this.minIntensity(),
  185.         rangeIntensity = (m_this.maxIntensity() - minIntensity) || 1,
  186.         idx, pos, intensity;
  188.     for (idx = data.length - 1; idx >= 0; idx -= 1) {
  189.       pos = map.worldToDisplay(position[idx]);
  190.       intensity = (intensityFunc(data[idx], idx) - minIntensity) / rangeIntensity;
  191.       if (intensity <= 0) {
  192.         continue;
  193.       }
  194.       // Small values are not visible because globalAlpha < .01
  195.       // cannot be read from imageData
  196.       context2d.globalAlpha = intensity < 0.01 ? 0.01 : (intensity > 1 ? 1 : intensity);
  197.       context2d.drawImage(m_this._circle, pos.x - radius, pos.y - radius);
  198.     }
  199.   };
  201.   /**
  202.    * Render data points on the canvas by binning.
  203.    *
  204.    * @param {RenderingContext} context2d The canvas context to draw in.
  205.    * @param {geo.map} map The parent map object.
  206.    * @param {array} data The main data array.
  207.    * @param {number} radius The sum of `radius` and `blurRadius`.
  208.    * @param {number} binSize Size of the bins in pixels.
  209.    */
  210.   this._renderBinnedData = function (context2d, map, data, radius, binSize) {
  211.     var position = m_this.gcsPosition(),
  212.         intensityFunc = m_this.intensity(),
  213.         minIntensity = m_this.minIntensity(),
  214.         rangeIntensity = (m_this.maxIntensity() - minIntensity) || 1,
  215.         mapSize = map.size(),
  216.         bins = [],
  217.         rw = Math.ceil(radius / binSize),
  218.         maxx = Math.ceil(mapSize.width / binSize) + rw * 2 + 2,
  219.         maxy = Math.ceil(mapSize.height / binSize) + rw * 2 + 2,
  220.         datalen = data.length,
  221.         idx, pos, intensity, x, y, binrow, offsetx, offsety;
  223.     /* We create bins of size (binSize) pixels on a side.  We only track bins
  224.      * that are on the viewport or within the radius of it, plus one extra bin
  225.      * width. */
  226.     for (idx = 0; idx < datalen; idx += 1) {
  227.       pos = map.worldToDisplay(position[idx]);
  228.       /* To make the results look more stable, we use the first data point as a
  229.        * hard-reference to where the bins should line up.  Otherwise, as we pan
  230.        * points would shift which bin they are in and the display would ripple
  231.        * oddly. */
  232.       if (isNaN(pos.x) || isNaN(pos.y)) {
  233.         continue;
  234.       }
  235.       if (offsetx === undefined) {
  236.         offsetx = ((pos.x % binSize) + binSize) % binSize;
  237.         offsety = ((pos.y % binSize) + binSize) % binSize;
  238.       }
  239.       /* We handle points that are in the viewport, plus the radius on either
  240.        * side, as they will add into the visual effect, plus one additional bin
  241.        * to account for the offset alignment. */
  242.       x = Math.floor((pos.x - offsetx) / binSize) + rw + 1;
  243.       if (x < 0 || x >= maxx) {
  244.         continue;
  245.       }
  246.       y = Math.floor((pos.y - offsety) / binSize) + rw + 1;
  247.       if (y < 0 || y >= maxy) {
  248.         continue;
  249.       }
  250.       intensity = (intensityFunc(data[idx], idx) - minIntensity) / rangeIntensity;
  251.       if (intensity <= 0) {
  252.         continue;
  253.       }
  254.       if (intensity > 1) {
  255.         intensity = 1;
  256.       }
  257.       /* bins is an array of arrays.  The subarrays would be conceptually
  258.        * better represented as an array of dicts, but having a sparse array is
  259.        * uses much less memory and is faster.  Each bin uses four array entries
  260.        * that are (weight, intensity, x, y).  The weight is the sum of the
  261.        * intensities for all points in the bin.  The intensity is the geometric
  262.        * sum of the intensities to approximate what happens to the unbinned
  263.        * data on the alpha channel of the canvas.  The x and y coordinates are
  264.        * weighted by the intensity of each point. */
  265.       bins[y] = bins[y] || [];
  266.       x *= 4;
  267.       binrow = bins[y];
  268.       if (!binrow[x]) {
  269.         binrow[x] = binrow[x + 1] = intensity;
  270.         binrow[x + 2] = pos.x * intensity;
  271.         binrow[x + 3] = pos.y * intensity;
  272.       } else {
  273.         binrow[x] += intensity;  // weight
  274.         binrow[x + 1] += (1 - binrow[x + 1]) * intensity;
  275.         binrow[x + 2] += pos.x * intensity;
  276.         binrow[x + 3] += pos.y * intensity;
  277.       }
  278.     }
  279.     /* For each bin, render a point on the canvas. */
  280.     for (y = bins.length - 1; y >= 0; y -= 1) {
  281.       binrow = bins[y];
  282.       if (binrow) {
  283.         for (x = binrow.length - 4; x >= 0; x -= 4) {
  284.           if (binrow[x]) {
  285.             intensity = binrow[x + 1];
  286.             context2d.globalAlpha = intensity < 0.01 ? 0.01 : (intensity > 1 ? 1 : intensity);
  287.             /* The position is eighted by the intensities, so we have to divide
  288.              * it to get the necessary position */
  289.             context2d.drawImage(
  290.               m_this._circle,
  291.               binrow[x + 2] / binrow[x] - radius,
  292.               binrow[x + 3] / binrow[x] - radius);
  293.           }
  294.         }
  295.       }
  296.     }
  297.   };
  299.   /**
  300.    * Render the data on the canvas, then colorize the resulting opacity map.
  301.    *
  302.    * @param {RenderingContext} context2d The canvas context to draw in.
  303.    * @param {geo.map} map The parent map object.
  304.    * @returns {this}
  305.    */
  306.   this._renderOnCanvas = function (context2d, map) {
  308.     if (m_renderTime.timestamp() < m_this.buildTime().timestamp()) {
  309.       const starttime = Date.now();
  310.       var data = m_this.data() || [],
  311.           radius = m_this.style('radius') + m_this.style('blurRadius'),
  312.           binned = m_this.binned(),
  313.           canvas, pixelArray,
  314.           layer = m_this.layer(),
  315.           mapSize = map.size();
  317.       if (m_this.style('scaleWithZoom')) {
  318.         radius *= Math.pow(2, map.zoom());
  319.       }
  320.       /* Determine if we should bin the data */
  321.       if (binned === true || binned === 'auto') {
  322.         binned = Math.max(Math.floor(radius / 8), Math.max(1.5, Math.min(3, radius / 2.5)));
  323.         if (m_this.binned() === 'auto') {
  324.           var numbins = (Math.ceil((mapSize.width + radius * 2) / binned) *
  325.                          Math.ceil((mapSize.height + radius * 2) / binned));
  326.           if (numbins >= data.length) {
  327.             binned = 0;
  328.           }
  329.         }
  330.       }
  331.       if (binned < 1 || isNaN(binned)) {
  332.         binned = false;
  333.       }
  334.       /* Store what we did, in case this is ever useful elsewhere */
  335.       m_this._binned = binned;
  337.       context2d.setTransform(1, 0, 0, 1, 0, 0);
  338.       context2d.clearRect(0, 0, mapSize.width, mapSize.height);
  339.       m_heatMapTransform = '';
  340.       if (radius > 0.5 && radius < 8192) {
  341.         map.scheduleAnimationFrame(m_this._setTransform, false);
  342.         layer.canvas().css({transform: ''});
  344.         m_this._createCircle();
  345.         m_this._computeGradient();
  346.         if (!binned) {
  347.           m_this._renderPoints(context2d, map, data, radius);
  348.         } else {
  349.           m_this._renderBinnedData(context2d, map, data, radius, binned);
  350.         }
  351.         canvas = layer.canvas()[0];
  352.         pixelArray = context2d.getImageData(0, 0, canvas.width, canvas.height);
  353.         m_this._colorize(pixelArray.data, m_this._grad);
  354.         context2d.putImageData(pixelArray, 0, 0);
  355.       }
  357.       m_heatMapPosition = {
  358.         zoom: map.zoom(),
  359.         gcsOrigin: map.displayToGcs({x: 0, y: 0}, null),
  360.         rotation: map.rotation(),
  361.         lastScale: undefined,
  362.         lastOrigin: {x: 0, y: 0},
  363.         lastRotation: undefined
  364.       };
  365.       m_renderTime.modified();
  366.       layer.renderer().clearCanvas(false);
  367.       m_lastRenderDuration = Date.now() - starttime;
  368.     }
  370.     return m_this;
  371.   };
  373.   /**
  374.    * Initialize.
  375.    *
  376.    * @returns {this}
  377.    */
  378.   this._init = function () {
  379.     s_init.call(m_this, arg);
  381.     m_this.geoOn(geo_event.pan, m_this._animatePan);
  383.     return m_this;
  384.   };
  386.   /**
  387.    * Update the feature.
  388.    *
  389.    * @returns {this}
  390.    */
  391.   this._update = function () {
  392.     s_update.call(m_this);
  393.     if (m_this.buildTime().timestamp() <= m_this.dataTime().timestamp() ||
  394.         m_this.updateTime().timestamp() < m_this.timestamp()) {
  395.       m_this._build();
  396.     }
  397.     m_this.updateTime().modified();
  398.     return m_this;
  399.   };
  401.   /**
  402.    * Update the css transform for the layer as part of an animation frame.
  403.    * This allows an existing rendered version of the heatmap to appear with a
  404.    * transform until a new version can be computed.
  405.    */
  406.   this._setTransform = function () {
  407.     if (m_this.layer() && m_this.layer().canvas() && m_this.layer().canvas()[0]) {
  408.       m_this.layer().canvas()[0].style.transform = m_heatMapTransform;
  409.     }
  410.   };
  412.   /**
  413.    * Animate pan and zoom.
  414.    */
  415.   this._animatePan = function () {
  417.     if (!m_heatMapPosition) {
  418.       return;
  419.     }
  420.     var map = m_this.layer().map(),
  421.         zoom = map.zoom(),
  422.         scale = Math.pow(2, (zoom - m_heatMapPosition.zoom)),
  423.         origin = map.gcsToDisplay(m_heatMapPosition.gcsOrigin, null),
  424.         rotation = map.rotation();
  426.     if (m_heatMapPosition.lastScale === scale &&
  427.         m_heatMapPosition.lastOrigin.x === origin.x &&
  428.         m_heatMapPosition.lastOrigin.y === origin.y &&
  429.         m_heatMapPosition.lastRotation === rotation) {
  430.       return;
  431.     }
  433.     var transform = '' +
  434.         ' translate(' + origin.x + 'px' + ',' + origin.y + 'px' + ')' +
  435.         ' scale(' + scale + ')' +
  436.         ' rotate(' + ((rotation - m_heatMapPosition.rotation) * 180 / Math.PI) + 'deg)';
  438.     map.scheduleAnimationFrame(m_this._setTransform);
  440.     m_heatMapTransform = transform;
  441.     m_heatMapPosition.lastScale = scale;
  442.     m_heatMapPosition.lastOrigin.x = origin.x;
  443.     m_heatMapPosition.lastOrigin.y = origin.y;
  444.     m_heatMapPosition.lastRotation = rotation;
  446.     if (m_heatMapPosition.timeout) {
  447.       window.clearTimeout(m_heatMapPosition.timeout);
  448.       m_heatMapPosition.timeout = undefined;
  449.     }
  450.     /* This conditional can change if we compute the heatmap beyond the visible
  451.      * viewport so that we don't have to update on pans as often.  If we are
  452.      * close to where the heatmap was originally computed, don't bother
  453.      * updating it. */
  454.     if (parseFloat(scale.toFixed(4)) !== 1 ||
  455.         parseFloat((rotation - m_heatMapPosition.rotation).toFixed(4)) !== 0 ||
  456.         parseFloat(origin.x.toFixed(1)) !== 0 ||
  457.         parseFloat(origin.y.toFixed(1)) !== 0) {
  458.       let delay = m_this.updateDelay();
  459.       if (delay < 0 && m_lastRenderDuration) {
  460.         delay = m_lastRenderDuration - Math.floor(1000 / 60 * delay);
  461.       } else if (m_lastRenderDuration) {
  462.         delay = m_lastRenderDuration * 2;
  463.       } else {
  464.         delay = 100;
  465.       }
  466.       m_heatMapPosition.timeout = window.setTimeout(function () {
  467.         m_heatMapPosition.timeout = undefined;
  468.         m_this.buildTime().modified();
  469.         m_this.layer().draw();
  470.       }, m_this.updateDelay());
  471.     }
  472.   };
  474.   m_this._init(arg);
  475.   return this;
  476. };
  478. inherit(canvas_heatmapFeature, heatmapFeature);
  480. // Now register it
  481. registerFeature('canvas', 'heatmap', canvas_heatmapFeature);
  482. module.exports = canvas_heatmapFeature;