基于Leaflet的点、线、面、圆等多要素闪烁实现方法

目录

前言

一、技术实现方案

1、要素属性设置

二、闪烁效果实现

1、Maker的闪烁实现

2、Path类对象的实现方式

总结

---

前言

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

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

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

一、技术实现方案

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

1、要素属性设置

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

选项	类型	默认	说明
icon	Icon	*	用于渲染标记（marker）的图标实例。有关如何自定义标记（marker）图标的详细信息，请参阅 Icon 文档。如果未指定，L.Icon.Default 则使用公共实例。
keyboard	Boolean	true	是否可以用键盘标记并按回车键进行点击。
title	String	''	悬停在标记（marker）上时出现的浏览器 tooltip 提示文本内容（默认情况下没有 tooltip 提示）。 对无障碍环境很有帮助。
alt	String	'Marker'	Icon图标的 alt 属性提示文本内容。 对无障碍环境很有帮助。
zIndexOffset	Number	0	默认情况下，标记（marker）图像 zIndex 是根据其纬度自动设置的。如果您想将标记置于所有其他标记（marker）之上(或之下)，则使用此选项指定一个高值，如 1000(或高的负值)。
opacity	Number	1.0	标记（marker）的不透明度。
riseOnHover	Boolean	false	如果为 true，当你把鼠标悬停在它上面时，该标记（marker）会在其他标记之上。
riseOffset	Number	250	用于 riseOnHover 功能的 z-index 偏移。
pane	String	'markerPane'	Map pane 将添加标记图标的位置。
shadowPane	String	'shadowPane'	Map pane 将添加标记阴影的位置。
bubblingMouseEvents	Boolean	false	当为 true 时，此标记上的鼠标事件将触发地图上的相同事件(除非使用 L.DomEvent.stopPropagation）。
autoPanOnFocus	Boolean	true	When true, the map will pan whenever the marker is focused (via e.g. pressing tab on the keyboard) to ensure the marker is visible within the map's bounds

        与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 做动画出现卡顿的原因。