基于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);