基于Leaflet.js的Marker闪烁特效的实现-模拟预警

目录

前言

一、闪烁组件

1、关于leaflet-icon-pulse

2、 使用leaflet-icon-pulse

3、方法及参数简介

二、闪烁实例开发

1、创建网页

2、Marker闪烁设置

3、实际效果

 三、总结

前言

        在一些地质灾害或者应急情况当中，或者热门预测当中。我们需要基于时空位置来进行标记，不仅要在地图中进行位置的标注，同时还需要实现目标点的闪烁，通过动态的渲染来体现当前正在突发的情况。以前段时间大家比较关注的台湾省花莲县的7.3级地震为例，在官方的一些媒体当中，仅描述了一些文字信息。如下所示：

        本报台北4月3日电 (记者张盼)据中国地震台网正式测定：4月3日7时58分，在台湾花莲县海域(北纬23.81度，东经121.74度)发生7.3级地震，震源深度12千米。全台均感受到剧烈晃动，花莲出现房屋倒塌等灾情。截至22时许，余震已有216起。台灾害应变中心晚间表示，地震迄今共造成9死、1011伤、百余人受困。花莲灾情最为严重，苏花公路落石砸中车辆造成伤亡，并有2栋大楼严重倾斜，目前仍在全力搜救。

        这些文字的信息对于空间数据的展示有待加强。那么来看一下中国地震台网网站是怎么进行地震数据及时性的展示的。

        由于震发时间已经过了几天，因此这里不再进行动态数据展示。来看一个最新地震信息的可视化效果。 这里的目标点是会自动进行闪烁提醒，帮助人们及时关注这个点。

        如何在Leaflet当中实现上述的功能呢，如何才能更加方便快捷的进行空间闪烁功能的开发呢？带着这个问题，本文将给出答案。文章重点讲解如何在Leaflet.js当中进行地图Marker的闪烁特效的开发。如果您当前也有类似的需求，不妨可以看看本文。

一、闪烁组件

        熟悉Leaflet的朋友一定知道，Leaflet组件本身是没有Marker闪烁的功能的。要想实现Maker闪烁的功能，必须要进行组件扩展。Leaflet的生态也是比较强大的，这里介绍一种扩展的方法，介绍一款已经实现了功能的组件。通过这款组件，可以快速实现功能的实现。

1、关于leaflet-icon-pulse

        leaflet-icon-pluse是一款采用MIT协议开源的组件，传送门。它基于Leaflet组件进行扩展开发而来。因此与leaflet可以很好的继承使用。来看一张它的演示效果图：

        感兴趣的朋友可以从公开地址获取，clone下来的文件目录如下所示：

2、 使用leaflet-icon-pulse

        leaflet-icon-pulse的使用比较简单，它的源码也不复杂，很容易看懂。其主要包含一个css样式文件和一个javascript脚本文件。编译好的版本文件放在dist目录下面，包括：L.Icon.Pulse.css和L.Icon.Pulse.js。

        L.Icon.Pulse.css文件的内容如下：

.leaflet-pulsing-icon {border-radius: 100%;box-shadow: 1px 1px 8px 0 rgba(0,0,0,0.75);
}.leaflet-pulsing-icon:after {content: "";border-radius: 100%;height: 300%;width: 300%;position: absolute;margin: -100% 0 0 -100%;}@keyframes pulsate {0% {transform: scale(0.1, 0.1);opacity: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}50% {opacity: 1;-ms-filter: none;filter: none;}100% {transform: scale(1.2, 1.2);opacity: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}
}

        L.Icon.Pulse.js的主要代码如下：

(function(window) {L.Icon.Pulse = L.DivIcon.extend({options: {className: '',iconSize: [12,12],fillColor: 'red',color: 'red',animate: true,heartbeat: 1,},initialize: function (options) {L.setOptions(this,options);// cssvar uniqueClassName = 'lpi-'+ new Date().getTime()+'-'+Math.round(Math.random()*100000);var before = ['background-color: '+this.options.fillColor];var after = ['box-shadow: 0 0 6px 2px '+this.options.color,'animation: pulsate ' + this.options.heartbeat + 's ease-out','animation-iteration-count: infinite','animation-delay: '+ (this.options.heartbeat + .1) + 's',];if (!this.options.animate){after.push('animation: none');after.push('box-shadow:none');}var css = ['.'+uniqueClassName+'{'+before.join(';')+';}','.'+uniqueClassName+':after{'+after.join(';')+';}',].join('');var el = document.createElement('style');if (el.styleSheet){el.styleSheet.cssText = css;} else {el.appendChild(document.createTextNode(css));}document.getElementsByTagName('head')[0].appendChild(el);// apply css classthis.options.className = this.options.className+' leaflet-pulsing-icon '+uniqueClassName;// initialize iconL.DivIcon.prototype.initialize.call(this, options);}});L.icon.pulse = function (options) {return new L.Icon.Pulse(options);};L.Marker.Pulse = L.Marker.extend({initialize: function (latlng,options) {options.icon = L.icon.pulse(options);L.Marker.prototype.initialize.call(this, latlng, options);}});L.marker.pulse = function (latlng,options) {return new L.Marker.Pulse(latlng,options);};
})(window);

3、方法及参数简介

        由于L.Icon.Pulse.js比较简单，因此不做复杂的讲解。本小节主要对相关的方法和参数进行简单的说明，方便掌握。

options: {className: '',iconSize: [12,12],fillColor: 'red',color: 'red',animate: true,heartbeat: 1,},

        主要参数列表：

属性描述默认值Possible values
colorcolor of pulse，颜色'red'any CSS color
fillColorcolor of dot 填充颜色'red'any CSS color
iconSizesize of L.divIcon[12,12][width,height]
animateenable pulsingtruetrue|false
heartbeatpulsing beat 频率1number (seconds)

        对组件有了基本的了解和掌握之后就可以进行基本功能的开发了。下一小节将对这部分内容进行深入说明。

二、闪烁实例开发

        本小节将重点讲解如何在Leaflet当中进行Marker实例的开发。通过关键代码的演示和实际效果的展示，让大家掌握组件的使用，可以快速应用到自己的项目当中。

1、创建网页

        首先需要定义一个展示的html页面，主体内容如下所示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Leaflet icon-pulse example</title><link rel="stylesheet" href="/2d/leaflet/leaflet.css" /><script src="/2d/leaflet/leaflet.js?v=1.0.0"></script><style>#map { height: 605px; }</style><link rel="stylesheet" href="../dist/L.Icon.Pulse.css" /><script src="../dist/L.Icon.Pulse.js"></script></head><body><div id="map"></div><script src="index.js?v=1"></script></body>
</html>

        需要注意的是，从dist目录下拷贝css和js文件作为资源文件引入到html页面中。

2、Marker闪烁设置

        定义了基础地图展示容器之后，我们来绑定瓦片资源以及这是闪烁点。在绑定marker之后，同时设置其闪烁的样式。这里我们采用一个简单的javascript脚本来进行配置。这里虚拟了沈阳、上海、长沙、福州、四川、新疆、西藏等10个城市，实际上我们可以根据事件点的重要或者紧急程度。比如地震的震级大小等，设置不同的图表大小，还有依据不同的情况设置不同颜色等。通过icon来进行自定义。

(function() {var map = new L.Map('map', {center: new L.LatLng(32.916485, 107.314453),zoom: 5}),layer = new L.tileLayer('http://localhost:8086/data/xxgc/q0403/{z}/{x}/{y}.png', {minZoom: 0,maxZoom: 7});map.addLayer(layer);var pulsingIcon = L.icon.pulse({iconSize:[20,20],color:'red',fillColor:"red",heartbeat:1,animate:true});var marker = L.marker([40.044438, 86.967773],{icon: pulsingIcon}).bindPopup("新疆某地").addTo(map);L.marker([30.637912, 102.568359],{icon: L.icon.pulse({iconSize:[15,15],color:'#5ab13e',fillColor:"#5ab13e"})}).bindPopup("四川").addTo(map);L.marker([37.788081, 112.587891],{icon: L.icon.pulse({iconSize:[30,30],color:'orange',fillColor:"orange"})}).bindPopup("太原").addTo(map);L.marker([31.466154, 121.245117],{icon: pulsingIcon}).bindPopup("上海").addTo(map);L.marker([28.149503, 112.895508],{icon: L.icon.pulse({iconSize:[26,26],color:'#17b0d3',fillColor:"#17b0d3"})}).bindPopup("长沙").addTo(map);L.marker([22.755921, 108.28125],{icon: pulsingIcon}).bindPopup("南宁").addTo(map);L.marker([25.878994, 119.355469],{icon: L.icon.pulse({iconSize:[25,25],color:'white',fillColor:"white"})}).bindPopup("福州").addTo(map);L.marker([41.672912, 123.486328],{icon: pulsingIcon}).bindPopup("沈阳").addTo(map);L.marker([30.939924, 90.131836],{icon: L.icon.pulse({iconSize:[25,25],color:'#17b0d3',fillColor:"#17b0d3"})}).bindPopup("西藏").addTo(map);L.marker([37.996163, 97.426758],{icon: pulsingIcon}).bindPopup("青海").addTo(map);L.marker([38.513788, 106.347656],{icon: pulsingIcon}).bindPopup("银川").addTo(map);})();

3、实际效果

        通过上述的代码即可完成marker闪烁的效果，下面来看一下实际的效果。

 三、总结

        以上就是本文的主要内容，文章重点讲解如何在Leaflet.js当中进行地图Marker的闪烁特效的开发。如果您当前也有类似的需求，不妨可以看看本文。文章首先讲解了leaflet-icon-pulse这个组件，然后介绍了这个动态组件的主要参数和使用方法，最后介绍了实例的代码开发过程。行文仓促，难免有所遗漏，欢迎各位朋友在评论区批评指正。

        博客撰写参考以下博文：

1、leaflet 实现地图上标记的发散闪烁动画。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/305613.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ActiveMQ + MQTT 集群搭建（虚机版本） + Springboot使用配置

ActiveMQ + MQTT 集群搭建（虚机版本） + Springboot使用配置

文章目录 前言一、ActiveMQ、 MQTT是什么&#xff1f;1.ActiveMQ介绍2.MQTT介绍 二、集群搭建步骤1.下载apache-activemq-5.15.12-bin.tar.gz2.上传apache-activemq-5.15.12-bin.tar.gz到服务器并解压文件到文件夹clusters、master、slave三个文件夹下面形成三个节点&#xff0…
阅读更多...
C++ stl容器string的底层模拟实现

C++ stl容器string的底层模拟实现

目录 前言&#xff1a; 1.成员变量 2.构造函数与拷贝构造函数 3.析构函数 4.赋值重载 5.[]重载 6.比较关系重载 7.reserve 8.resize 9.push_back,append和重载 10.insert 11.erase 12.find 14.迭代器 15.流插入&#xff0c;流提取重载 16.swap 17.c_str 18.完…
阅读更多...
信道延迟的计算方法

信道延迟的计算方法

目录 1.信道延迟影响的因素 2.计算公式 3.实践理解 4.基础知识 1.信道延迟影响的因素 因素1&#xff1a;与源端和宿端距离&#xff1b; 因素2&#xff1a;具体信道中的信号传播速率有关&#xff1b; 2.计算公式 总延迟 T发送延迟T1&#xff08;信号传播速率&#xff09; 线路…
阅读更多...
21 - 寄存器控制器

21 - 寄存器控制器

---- 整理自B站UP主 踌躇月光 的视频 1. 程序计数器 PC 改造 原来的 PC 由于后续的 ALU 会较频繁的变动&#xff0c;因而会经常修改 PC&#xff0c;所以将 PC 中的 ALU 换成 8 位加法器。改造后的 PC&#xff1a; 2. 寄存器控制器的实现 我们控制器主要通过 ROM 实现&#xf…
阅读更多...
FreeBuf 全球网络安全产业投融资观察（3月）

FreeBuf 全球网络安全产业投融资观察（3月）

综述 据不完全统计&#xff0c;2024年3月&#xff0c;全球网络安全市场共发生投融资事件53起&#xff0c;其中国内4起&#xff0c;国外49起。 3月全球络安全产业投融资统计表&#xff08;数据来源&#xff1a;航行资本、36氪&#xff09; 整体而言&#xff0c;国内4起投融资事…
阅读更多...
(2022级）成都工业学院数据库原理及应用实验三：数据定义语言DDL

(2022级）成都工业学院数据库原理及应用实验三：数据定义语言DDL

唉&#xff0c;用爱发电连赞都没几个&#xff0c;博主感觉没有动力了 想要完整版的sql文件的同学们&#xff0c;点赞评论截图&#xff0c;发送到2923612607qq,com&#xff0c;我就会把sql文件以及如何导入sql文件到navicat的使用教程发给你的 基本上是无脑教程了&#xff0c;…
阅读更多...
Stable Diffusion之Ubuntu下部署

Stable Diffusion之Ubuntu下部署

1、安装conda环境 conda create -n webui python3.10.6 2、激活环境 每次使用都要激活 conda activate webui 注意开始位置的变换 关闭环境 conda deactivate webui 3、离线下载SD 代码 https://github.com/AUTOMATIC1111/stable-diffusion-webui https://github.com/Stabilit…
阅读更多...
华为OD技术面试-有序数组第K最小值

华为OD技术面试-有序数组第K最小值

背景 2024-03-15华为od 二面&#xff0c;记录结题过程 有序矩阵中第 K 小的元素 - 力扣&#xff08;LeetCode&#xff09; https://leetcode.cn/problems/kth-smallest-element-in-a-sorted-matrix/submissions/512483717/ 题目 给你一个 n x n 矩阵 matrix &#xff0c;其…
阅读更多...
从 Oracle 到 MySQL 数据库的迁移之旅

从 Oracle 到 MySQL 数据库的迁移之旅

文章目录 引言一、前期准备工作1.搭建新的MySQL数据库2 .建立相应的数据表2.1 数据库兼容性分析2.1.1 字段类型兼容性分析2.1.2 函数兼容性分析2.1.3 是否使用存储过程&#xff1f;存储过程的个数&#xff1f;复杂度&#xff1f;2.1.4 是否使用触发器&#xff1f;个数&#xff…
阅读更多...
Redis从入门到精通(十三)Redis分布式缓存(一)RDB和AOF持久化、Redis主从集群的搭建与原理分析

Redis从入门到精通(十三)Redis分布式缓存(一)RDB和AOF持久化、Redis主从集群的搭建与原理分析

文章目录 第5章 Redis分布式缓存5.1 Redis持久化5.1.1 RDB持久化5.1.1.1 执行时机5.1.1.2 bgsave原理 5.1.2 AOF持久化5.1.2.1 AOF原理5.1.2.2 AOF配置5.1.2.3 AOF文件重写 5.1.3 RDB和AOF的对比 5.2 Redis主从5.2.1 搭建主从结构5.2.2 主从数据同步原理5.2.2.1 全量同步5.2.2.…
阅读更多...
VMware导出虚拟机vmkd格式转换qcow2

VMware导出虚拟机vmkd格式转换qcow2

VMware虚拟机导出qcow2格式可以上传至云服务 1、需要导出的虚拟机 2、克隆虚拟机 3、选择克隆源 4、创建完整克隆 5、完成 6、找到VMware安装路径 7、找到vmware-vdiskmanager所在路径使用cmd或Windows PowerShell进入目录 进入vmware-vdiskmanager目录 cd F:\软件\VMware Wo…
阅读更多...
结合ArcGIS+SWAT模型+Century模型：流域生态系统水-碳-氮耦合过程模拟

结合ArcGIS+SWAT模型+Century模型：流域生态系统水-碳-氮耦合过程模拟

原文链接&#xff1a;结合ArcGISSWAT模型Century模型&#xff1a;流域生态系统水-碳-氮耦合过程模拟https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&tempkeyMTI2NV9sMGRZNUJoVkNVc1ZzSzRuMl9XXzhqX0R3cXpESWFwM1E4cFY4ejNqWFh3VUl0dlZkNWk4b20ydFdFTy1xS2ZObGN0Z0ZXSjly…
阅读更多...
sed 字符替换时目标内容包含 特殊字符怎么处理

sed 字符替换时目标内容包含 特殊字符怎么处理

背景 想写一个自动修改配置的脚本&#xff0c;输入一个 mysql jdbc 的连接路径&#xff0c;然后替换目标配置中的模版内容&#xff0c;明明很简单的一个内容&#xff0c;结果卡在了 & 这个符号上。 & 到底是什么特殊字符呢&#xff1f;结论&#xff1a;它代表要替换的…
阅读更多...
Leetcode 406. 根据身高重建队列

Leetcode 406. 根据身高重建队列

心路历程&#xff1a; 看到二维数组的排序问题&#xff0c;第一反应想到了之前合并区间那道题先对数组按照第一维排序&#xff0c;后来在纸上模拟后发现&#xff0c;如果按照第一维度降维&#xff0c;第二维度升维的方式排序&#xff0c;那么后面插入的元素一定不会影响前面的…
阅读更多...
[AIGC] Spring中的SPI机制详解

[AIGC] Spring中的SPI机制详解

文章目录 1. 什么是SPI2. Spring中的SPI机制3. Spring SPI的工作流程4. Spring SPI的应用 1. 什么是SPI SPI &#xff08;Service Provider Interface&#xff09;是Java中服务提供者接口的缩写&#xff0c;它是Java提供的一种用于被第三方实现或扩展的接口&#xff0c;SPI的作…
阅读更多...
微服务demo（四）nacosfeigngateway（2）gatewayspringsercurity

微服务demo（四）nacosfeigngateway（2）gatewayspringsercurity

一、思路 1、整体思路 用户通过客户端访问项目时&#xff0c;前端项目会部署在nginx上&#xff0c;加载静态文件时直接从nginx上返回即可。当用户在客户端操作时&#xff0c;需要调用后端的一些服务接口。这些接口会通过Gateway网关&#xff0c;网关进行一定的处理&#xff0…
阅读更多...
Redis入门到通过之Redis安装

Redis入门到通过之Redis安装

文章目录 Redis安装说明1.单机安装Redis1.1.安装Redis依赖1.2.上传安装包并解压1.3.启动1.3.1.默认启动1.3.2.指定配置启动1.3.3.开机自启 2.Redis客户端2.1.Redis命令行客户端2.2.图形化桌面客户端2.2.1.安装2.2.2.建立连接 Redis安装说明 大多数企业都是基于Linux服务器来部…
阅读更多...
学习大数据，所需要的java(Maven)基础（1）

学习大数据，所需要的java(Maven)基础（1）

文章目录 使用Maven的优势第三方jar包添加第三方jar包获取jar包之间的依赖关系jar包之间的冲突处理将项目拆分成多个工程模块 实现项目的分布式部署Maven是什么自动化构建工具构建的概念构建环节自动化构建 Maven如何使用安装Maven核心程序maven联网问题Maven中的settings配置在…
阅读更多...
pytorch实现胶囊网络（capsulenet）

pytorch实现胶囊网络（capsulenet）

胶囊网络在hinton刚提出来的时候小热过一段时间&#xff0c;之后热度并没有维持多久。vision transformer之后基本少有人问津了。不过这个模型思路挺独特的&#xff0c;值得研究一下。 这个模型的提出是为了解决CNN模型学习到的特征之间没有空间上的关系&#xff0c;从而对于各…
阅读更多...
开源监控zabbix对接可视化工具grafana教程

开源监控zabbix对接可视化工具grafana教程

今天要给大家介绍的是开源监控工具zabbix对接可视化工具grafana问题。 有一定运维经验的小伙伴大抵都或多或少使用过、至少也听说过开源监控工具zabbix&#xff0c;更进一步的小伙伴可能知道zabbix在数据呈现方面有着明显的短板&#xff0c;因此需要搭配使用第三方的可视化工具…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023