修改网上流传的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);
如对本文有疑问， 点击进行留言回复！！
150Vue-Router路由概述+基本使用router-view占位符+重定向redirect
网友评论