修改网上流传的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);

基于flash-marker.js 的地图标注闪烁代码调试的更多相关文章

  1. Vue中使用百度地图——设置地图标注

    知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...

  2. [转] 基于ArcGISServer实现活动地图标注

    ——王嘉彬(Esri中国上海分公司) 1.背景 1.1.主流互联网地图应用的现状 在目前主流的互联网地图应用中,如 Google Map(图 1).搜狗地图(图2),POI 兴趣点的文字标注越来越多的 ...

  3. 百度地图标注及结合ECharts图谱数据可视化

    本示例中根据企业位置经纬度,在页面右侧百度地图中标注企业名称.同时页面左侧ECharts图谱饼状图用于统计企业行业与注册资本.当右侧百度地图缩放拖拽,左侧ECharts图谱根据右侧地图上出现的企业动态 ...

  4. JS 百度地图 地图线路描绘

    JS 百度地图 地图线路描绘 <script type="text/javascript" src="http://api.map.baidu.com/api?v= ...

  5. JS 百度地图-右键菜单

    JS 百度地图-右键菜单 /*-----------------标注右键删除-------------------------*/ var markerMenu = new BMap.ContextM ...

  6. JS 百度地图路书---动态路线

    JS 百度地图路书---动态路线 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" con ...

  7. 百度地图Api详解之地图标注

    标注概述 标注(Marker)是用来表示一个点位置的可见元素,每个标注自身都包含地理信息.比如你在西单商场位置添加了一个标注,不论地图移动.缩放,标注都会跟随一起移动,保证其始终指向正确的地理位置. ...

  8. 最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)

    http://blog.csdn.net/leixiaohua1020/article/details/43936415 ======================================= ...

  9. 前端使用d3.js调用地图api 进行数据可视化

    前段时间自己研究了demo就是把某个区域的某个位置通过经纬度在地图上可视化.其实就是使用了第三方插件,比现在比较火的可视化插件d3.js echart.js.大致思路就是,把要用到的位置的geojso ...

随机推荐

  1. springBoot集成web service

    转载大神: https://blog.csdn.net/u011410529/article/details/68063541?winzoom=1 https://blog.csdn.net/nr00 ...

  2. Java文件与io——NewIO

    为啥要使用NIO? NIO的创建目的是为了让JAVA程序员可以实现高速I/O而无需编写自定义的本机代码.NIO将最耗时的I/O操作(即填充和提取缓冲区)转移回操作系统,因而可以极大地提高速度 流与快的 ...

  3. AssetDatabase的方法总结

    AssetDatabase的方法总结 1.AssetDatabase.FindAssets public static string[] FindAssets(string filter);publi ...

  4. mysql必知必会学习笔记(1)

    chapter 13 13.1 数据分组 如果要将数据分为多个逻辑组怎么办?? 要用数据分组 13.2 创建分组 使用group by子句.group by会指示对mysql进行分组,然后对每个组进行 ...

  5. java8 api简介(一)

    from https://www.aliyun.com/jiaocheng/785076.html 摘要:函数式编程详解:前言:现在有很多公司都用了jdk8,但是函数式编程也许没有用上,jdk8也提供 ...

  6. 记秋招第一个offer:去哪儿

    9月17日 网申去哪儿,没有内推,因为网申了就不能内推了.难受,内推可以免简历筛选的,这下好了,可能简历直接挂了.我怎么犯了这么低级的错误?还没去搞清楚能不能内推就先傻乎乎地网申了. 9月28日 晚上 ...

  7. agc016A - Shrinking(字符串 贪心)

    题意 题目链接 给出一个字符串,每次操作可以使得字符串缩短一位,且第$i$位必须要保证与变换前的这一位或下一位相同, 问使得整个字符串全相同最少的操作次数 Sol 300P的题我都要想10min啊,还 ...

  8. 洛谷P4133 [BJOI2012]最多的方案(记忆化搜索)

    题意 题目链接 求出把$n$分解为斐波那契数的方案数,方案两两不同的定义是分解出来的数不完全相同 Sol 这种题,直接爆搜啊... 打表后不难发现$<=1e18$的fib数只有88个 最先想到的 ...

  9. Java有关List的stream基本操作

    参考博客: https://www.jianshu.com/p/9fe8632d0bc2 Stream简介 Java 8引入了全新的Stream API.这里的Stream和I/O流不同,它更像具有I ...

  10. ansible基本操作

    ansible优点:redhat自带工具,可通过rpm或yum直接安装:客户端免安装:操作通过ssh验证操作:可以通过自定义hosts文件对可操作主机进行分类,方便批量操作 #ansible操作格式, ...