​

目录

前言

一、技术实现方案

1、要素属性设置

二、闪烁效果实现

1、Maker的闪烁实现

2、Path类对象的实现方式

总结

前言

        在一些面向公安指挥、应急消防、热搜舆情等应用中，通常为了将实时位置显示出来，凸出当前发生的事情的时空位置。在做WebGIS应用时，不仅要将空间位置，比如事件发生的具体事件点；还有发生了某重大事件之后，需要把一定的缓冲范围的红线在地图上标注出来。Leaflet.js本身是没有这些功能的，但是我们可以结合Leaflet的API和JavaScript的组合来一起实现上面的这些需求。

        网上这方面已经有一些博主进行相关技术的分享，但是没有覆盖所有的基础要素。本文不仅介绍了在Leaflet中实现要素的闪烁实现方法，同时还使用代码对点、线、面、圆、矩形等多种要素的具体实现提供了实际可运行代码。如果您当前有这方面的需求，可以看看这篇博客。

        文章首先介绍在Leaflet中的技术实现方案，然后介绍了Leaflet中的样式设置基础知识，最后以实际代码的方式给出点、线 、面、圆、矩形等要素的闪烁实现效果。让您充分了解掌握这些基础知识，在项目开发中可以直接应用。

一、技术实现方案

        本节首先来分析一下技术实现方案，为了能实现这些图形要素的闪烁，我们首先要来看一下怎么操作这些图形。只有针对的找到了设置方法，才能正确的进行设置。

1、要素属性设置

        在Leaflet，我们可以通过控制要素的透明度来实现要素的隐藏和实现。而闪烁可以分解为一定时间周期内的隐藏和闪烁。因此我们使用定时器和透明度设置来实现动态闪烁的效果。首先来看一下Maker和其他的Polygon、circle、rectangle等的透明度设置属性。关于这些对象的属性，大家可以在Leaflet的官网网站中找到相关的说明。下面是Marker的相关属性列表：

        与Maker类似的是，其它的继承自Path对象的其它要素，如Polygon。、Polyline等也是使用这种方式。也是通过修改透明度的方式来进行效果的实现。

二、闪烁效果实现

        在明确了上述的技术方案之后，本节我们来重点讲解实现过程。技术实现采用定时器和Leafet的API的方式。

1、Maker的闪烁实现

        这里直接贴出代码，marker的闪烁实现较为简单：

function setTargetSelect(e){
	var i = 1
	var int = setInterval(() => {
	if(!e._map) clearInterval(int)
		if (i < -1) {
			i = 1
		}
		i = i - 0.08
		if (i < 0)   e.setOpacity(i * -1)
		else   e.setOpacity(i)
	},60)
}

        在将marker对象添加到map地图中时，会自动进行透明度的设置调用。当我们从map中移除当前的marker，会自动调用clearInterval方法来停止循环调用。下面展示如何在Leaflet中调用这个方法：

var marker = L.marker([22.024546, 110.654297]).addTo(mymap).bindTooltip("<b>Hello world!</b><br />我的成长故事点").openTooltip();
setTargetSelect(marker);
	
var marker1 = L.marker([29.61167, 113.950195]).addTo(mymap).bindTooltip("<b>Hello world!</b><br />第二故乡.").openTooltip();
setTargetSelect(marker1);

        实现的效果如下：

        以上就是marker对象的实现，熟悉Leaflet对象的朋友都知道。Marker是比较独立的一个类。其它的要素如Polygon、Polyline都是继承自Path对象的。 因此Polygon与Polyline的实现方式有所不同。

2、Path类对象的实现方式

        通过上述这张图，大概可以看到。常见的Polyline、Polygon、rectangle、CirleMarker、Cirle都是继承自Path对象的，所以这些对象都需要使用别的定义方式。 

function setTargetSelect2(e) {
	let timer = null
	var i = 1
	var j = 0.2 //注意要和线的透明度同步修改，保持开始和结束时间一致
	function updateAnimation() {
		if (i < -1) {
			i = 1
		}
		i = i - 0.01
		if (j < -0.2) {
			j = 0.2
		}
		j = j - 0.002 //注意要和线的透明度同步修改，保持开始和结束时间一致
		if (i < 0)   e.setStyle({opacity:i * -1,fillOpacity:j*-1})
		else   e.setStyle({opacity:i,fillOpacity:j})
		if (!e._map) return cancelAnimationFrame(timer)
		window.requestAnimationFrame(updateAnimation)
	}
	window.requestAnimationFrame(updateAnimation)
}

        与Maker对象不一样的是，这里的调用使用的是requestAnimationFrame，而不是通过定时器的模式。站在前人的肩膀上，可以得到更多有价值的经验。关于requestAnimationFrame和定时器模式的区别，可以看看博主前辈的介绍。如果不是博主的经验分享，我想一定会在循环调用上陷入崩溃，这就是知识分享的益处。

        在设置完成了要素闪烁的方法之后，我们在地图上创建对应的子类对象，比如Polygon、Polyline、Circle、Rectangle 后，调用闪烁方法。关键代码如下：

var circle = L.circle([29.649869, 120.146484], 99000, {
	color: 'red',
	fillColor: '#f03',
	fillOpacity: 0.5
}).addTo(mymap).bindPopup("我是一个圆2.").bindTooltip("我是一个圆2.").openTooltip();
setTargetSelect2(circle);

var polygon = L.polygon([
	[32.916485, 101.601563],
	[30.562261, 105.556641],
	[34.524661, 108.149414],
	[35.173808, 103.051758]
]).addTo(mymap).bindPopup("我是一个多边形.").bindTooltip("热点事件覆盖区.").openTooltip();
setTargetSelect2(polygon);

//定义一个Bounds 左上角和右下角的坐标
var bounds=[[35.88905, 91.845703], [32.842674, 96.635742]]
	
var rectangle = L.rectangle(bounds,{color:'red',weight:1}).addTo(mymap).bindTooltip("红色覆盖范围.").openTooltip();
setTargetSelect2(rectangle);

        以上就基本实现了在地图上进行点、线、面、圆、矩形等类型要素的闪烁效果的展示。下面给大家看一下视频实际效果。 

Leaflet点、线、面、圆、矩形闪烁效果实

三、总结

        以上就是本文的主要内容，文章首先介绍在Leaflet中的技术实现方案，然后介绍了Leaflet中的样式设置基础知识，最后以实际代码的方式给出点、线 、面、圆、矩形等要素的闪烁实现效果。行文仓促，定有不足之处，欢迎各位朋友在评论区留言指正，不胜感激。文章编写时，参考了以下朋友的博客，受益匪浅。本实例已经整理成压缩包，感兴趣的可以下载Webgis中使用Leaflet实现的点、线、面、圆、矩形等要素闪烁效果的实例。

1、leaflet呼吸闪烁效果。

2、聊聊使用 JavaScript 做动画出现卡顿的原因。