基於flash-marker.js 的地圖標註閃爍代碼調試

修改網上流傳的flash-marker.js

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
      (global.FlashMarker = factory());
}(this, (function () { 'use strict';
  var map = null;
  var canvas = null;
  /**
   * @author lzugis
   * @Date 2017-09-29
   * */
  function CanvasLayer(options) {
    this.options = options || {};
    this.paneName = this.options.paneName || 'labelPane';
    this.zIndex = this.options.zIndex || 0;
    this._map = options.map;
    map = this._map;
    this._lastDrawTime = null;
    this.show();
  }

  CanvasLayer.prototype.initialize = function () {
    var map = this._map;
    canvas = this.canvas = document.createElement('canvas');
    var ctx = this.ctx = this.canvas.getContext('2d');
    canvas.style.cssText = 'position:absolute;' + 'left:0;' + 'top:0;' + 'z-index:' + this.zIndex + ';';
    this.adjustSize();
    this.adjustRatio(ctx);
    map.getViewport().appendChild(canvas);
    var that = this;
    map.getView().on('propertychange',function(){
      // $(canvas).hide();
      // canvas.style.display="none";
    });
    // map.on("moveend",function(){
    //   // $(canvas).show();
    //   // canvas.style.display="block";
    //   that.adjustSize();
    //   that._draw();
    // });
  };

  CanvasLayer.prototype.adjustSize = function () {
    var size = this._map.getSize();
    // var canvas = this.canvas;
    canvas.width = size[0];
    canvas.height = size[1];
    canvas.style.width = canvas.width + 'px';
    canvas.style.height = canvas.height + 'px';
  };

  CanvasLayer.prototype.adjustRatio = function (ctx) {
    var backingStore = ctx.backingStorePixelRatio || ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
    var pixelRatio = (window.devicePixelRatio || 1) / backingStore;
    var canvasWidth = ctx.canvas.width;
    var canvasHeight = ctx.canvas.height;
    ctx.canvas.width = canvasWidth * pixelRatio;
    ctx.canvas.height = canvasHeight * pixelRatio;
    ctx.canvas.style.width = canvasWidth + 'px';
    ctx.canvas.style.height = canvasHeight + 'px';
    ctx.scale(pixelRatio, pixelRatio);
  };

  CanvasLayer.prototype.draw = function () {
    var self = this;
    var args = arguments;

    clearTimeout(self.timeoutID);
    self.timeoutID = setTimeout(function () {
      self._draw();
    }, 15);
  };

  CanvasLayer.prototype._draw = function () {
    var map = this._map;
    var size = map.getSize();
    var center = map.getView().getCenter();
    if (center) {
      var pixel = map.getPixelFromCoordinate(center);
      this.canvas.style.left = pixel[0] - size[0] / 2 + 'px';
      this.canvas.style.top = pixel[1] - size[1] / 2 + 'px';
      this.options.update && this.options.update.call(this);
    }
  };

  CanvasLayer.prototype.getContainer = function () {
    return this.canvas;
  };

  CanvasLayer.prototype.show = function () {
    this.initialize();
    this.canvas.style.display = 'block';
  };

  CanvasLayer.prototype.hide = function () {
    this.canvas.style.display = 'none';
  };

  CanvasLayer.prototype.setZIndex = function (zIndex) {
    this.canvas.style.zIndex = zIndex;
  };

  CanvasLayer.prototype.getZIndex = function () {
    return this.zIndex;
  };

  var global = typeof window === 'undefined' ? {} : window;

  var requestAnimationFrame = global.requestAnimationFrame || global.mozRequestAnimationFrame || global.webkitRequestAnimationFrame || global.msRequestAnimationFrame || function (callback) {
    return global.setTimeout(callback, 1000 / 60);
  };

  function Marker(opts) {
    this.city = opts.name;
    this.location = [opts.lnglat[0], opts.lnglat[1]];
    this.color = opts.color;
    this.type = opts.type || 'circle';
    this.speed = opts.speed || 0.15;
    this.size = 0;
    this.max = opts.max || 20;
  }

  Marker.prototype.draw = function (context) {
    context.save();
    context.beginPath();
    switch (this.type) {
      case 'circle':
        this._drawCircle(context);
        break;
      case 'ellipse':
        this._drawEllipse(context);
        break;
      default:
        break;
    }
    context.closePath();
    context.restore();

    this.size += this.speed;
    if (this.size > this.max) {
      this.size = 0;
    }
  };

  Marker.prototype._drawCircle = function (context) {
    var pixel = this.pixel||map.getPixelFromCoordinate(this.location);
    context.strokeStyle = this.color;
    context.moveTo(pixel[0] + pixel.size, pixel[1]);
    context.arc(pixel[0], pixel[1], this.size, 0, Math.PI * 2);
    context.stroke();
  };

  Marker.prototype._drawEllipse = function (context) {
    var pixel = this.pixel || map.getPixelFromCoordinate(this.location);
    var x = pixel[0],
      y = pixel[1],
      w = this.size,
      h = this.size / 2,
      kappa = 0.5522848,

      // control point offset horizontal
      ox = w / 2 * kappa,

      // control point offset vertical
      oy = h / 2 * kappa,

      // x-start
      xs = x - w / 2,

      // y-start
      ys = y - h / 2,

      // x-end
      xe = x + w / 2,

      // y-end
      ye = y + h / 2;

    context.strokeStyle = this.color;
    context.moveTo(xs, y);
    context.bezierCurveTo(xs, y - oy, x - ox, ys, x, ys);
    context.bezierCurveTo(x + ox, ys, xe, y - oy, xe, y);
    context.bezierCurveTo(xe, y + oy, x + ox, ye, x, ye);
    context.bezierCurveTo(x - ox, ye, xs, y + oy, xs, y);
    context.stroke();
  };

  function FlashMarker(map, dataSet) {
    this.timer = null;
    var that = this;
    var animationLayer = null,
      width = map.getSize()[0],
      height = map.getSize()[1],
      animationFlag = true,
      markers = [];
    that.width = width;
    that.height = height;
    this.close();

    var addMarker = function addMarker() {
      if (markers.length > 0) return;
      markers = [];
      for (var i = 0; i < dataSet.length; i++) {
        markers.push(new Marker(dataSet[i]));
      }
    };

    //上層canvas渲染，動畫效果
    var render = function render() {
      var animationCtx = animationLayer.canvas.getContext('2d');
      that.animationCtx = animationCtx;
      if (!animationCtx) {
        return;
      }

      if (!animationFlag) {
        animationCtx.clearRect(0, 0, width, height);
        return;
      }

      addMarker();

      animationCtx.fillStyle = 'rgba(0,0,0,.95)';
      var prev = animationCtx.globalCompositeOperation;
      animationCtx.globalCompositeOperation = 'destination-in';
      animationCtx.fillRect(0, 0, width, height);
      animationCtx.globalCompositeOperation = prev;

      for (var i = 0; i < markers.length; i++) {
        var marker = markers[i];
        marker.draw(animationCtx);
      }
    };
    //初始化
    var init = function init() {
      animationLayer = new CanvasLayer({
        map: map,
        update: render
      });

      (function drawFrame() {
        that.timer = requestAnimationFrame(drawFrame);
        render();
      })();
    };

    init();
  }
  FlashMarker.prototype.close = function() {
    cancelAnimationFrame(this.timer);
    if(this.animationCtx){
      this.animationCtx.clearRect(0, 0, this.width, this.height);
    }
  }
  return FlashMarker;

})));

調用代碼

　　//數據
let lnglat=[];//坐標值[x,y]    
let citys = [{
      name: '',
      lnglat: lnglat,
      color: '#5070FF',
      type: 'circle',
      speed: 0.5,
    }];
    if(this.mark){
      this.mark.close();
    }
    this.mark = new window.FlashMarker(map, citys);