先看效果

js文件：blinkmarker.js

  1. L.blinkMarker = function (point, property) {
  2.     // 使用js标签,便于操作,这个temDivEle的作用是将divEle通过innerHTML的方式获取为字符串
  3.     var tempDivEle = document.createElement("div");
  4.     var divEle = document.createElement("div");
  5.     var spanEl = document.createElement("span");
  6.     var aEl = document.createElement("a");
  7.     tempDivEle.append(divEle);
  8.     divEle.append(spanEl);
  9.     spanEl.append(aEl);
  10.     // 设置上基础的样式
  11.     spanEl.classList.add("pulse-icon");
  12.     aEl.classList.add("dive-icon");
  13.     // 操作样式
  14.     var style = document.createElement("style");
  15.     style.type = "text/css";
  16.     document.head.appendChild(style);
  17.     sheet = style.sheet;
  18.     // 主体颜色
  19.     if (property) {
  20.         if (property.color) {
  21.             spanEl.style.backgroundColor = property.color;
  22.             if (!property.diveColor) {
  23.                 aEl.style.boxShadow = "0 0 6px 2px " + property.color;
  24.             }
  25.         }
  26.         // 标记大小
  27.         if (property.iconSize) {
  28.             spanEl.style.width = property.iconSize[0] + "px";
  29.             spanEl.style.height = property.iconSize[1] + "px";
  30.         }
  31.         // 发散的color
  32.         if (property.diveColor) {
  33.             // 发散的重度
  34.             if (property.level) {
  35.                 aEl.style.boxShadow = "0 0 " + (property.level * 3) + "px " + property.level + "px " + property.diveColor;
  36.             } else {
  37.                 aEl.style.boxShadow = "0 0 6px 2px " + property.diveColor;
  38.             }
  39.         }
  40.         // 发散的重度
  41.         if (property.level) {
  42.             if (property.diveColor) {
  43.                 aEl.style.boxShadow = "0 0 " + (property.level * 3) + "px " + property.level + "px " + property.diveColor;
  44.             }else if (property.color) {
  45.                 aEl.style.boxShadow = "0 0 " + (property.level * 3) + "px " + property.level + "px " + property.color;
  46.             }else{
  47.                 aEl.style.boxShadow = "0 0 " + (property.level * 3) + "px " + property.level + "px red";
  48.             }
  49.         }
  50.  
  51.         // 闪烁的速度
  52.         if (property.speedTime) {
  53.             aEl.style.setProperty("animation", "pulsate " + property.speedTime + "s infinite")
  54.         }
  55.     }
  56.     var myIcon = L.divIcon({ className: 'my-div-icon', html: tempDivEle.innerHTML });
  57.     var marker = L.marker(point, { icon: myIcon, title: property.title });
  58.     return marker;
  59. }

css样式文件：blinkmarker.css

  1. .pulse-icon {
  2.     display: inline-block;
  3.     width: 15px;
  4.     height: 15px;
  5.     border-radius: 100%;
  6.     background-color: red;
  7.     position: relative;
  8.     box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);
  9. }
  10.  
  11. .dive-icon {
  12.     content: "";
  13.     box-shadow: 0 0 6px 2px red;
  14.     animation: pulsate 1s ease-out;
  15.     animation-iteration-count: infinite;
  16.     animation-delay: 1.1s;
  17.     -webkit-border-radius: 100%;
  18.     border-radius: 100%;
  19.     height: 200%;
  20.     width: 200%;
  21.     animation: pulsate 2s infinite;
  22.     position: absolute;
  23.     margin: -50% 0 0 -50%;
  24. }
  25.  
  26. @keyframes pulsate {
  27.     0% {
  28.         transform: scale(0.1, 0.1);
  29.         opacity: 0;
  30.         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  31.         filter: alpha(opacity=0);
  32.     }
  33.     50% {
  34.         opacity: 1;
  35.         -ms-filter: none;
  36.         filter: none;
  37.     }
  38.     100% {
  39.         transform: scale(1.2,1.2);
  40.         opacity: 0;
  41.         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  42.         filter: alpha(opacity=0);
  43.     }
  44. }

测试实例

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>闪烁点</title>
  7.     <link rel="stylesheet" type="text/css" href="../leaflet/dist/leaflet.css">
  8.     <script type="text/javascript" src="../leaflet/dist/leaflet.js"></script>
  9.     <!-- 引入闪烁marker -->
  10.     <link rel="stylesheet" type="text/css" href="css/blinkmarker.css">
  11.     <script type="text/javascript" src="js/blinkmarker.js"></script>
  12.     <style type="text/css">
  13.         body {
  14.             padding: 0;
  15.             margin: 0;
  16.         }
  17.  
  18.         html,
  19.         body,
  20.         #map {
  21.             height: 100%;
  22.         }
  23.     </style>
  24. </head>
  25.  
  26. <body>
  27.     <div id='map'></div>
  28. </body>
  29. <script type="text/javascript">
  30.     /**
  31.      * 这一部分用于加载地图,我这里用的是离线地图,需要适当修改
  32.      */
  33.     var url = 'http://localhost:9090/img/{z}/{x}/{y}.png';
  34.     var map = L.map('map', {
  35.         center: [34.694, 113.587],
  36.         zoom: 6,
  37.         zoomControl: false
  38.     });
  39.     //将图层加载到地图上，并设置最大的聚焦还有map样式
  40.     L.tileLayer(url, {
  41.         maxZoom: 18,
  42.         minZoom: 3
  43.     }).addTo(map);
  44.  
  45.     //以下是加载闪烁标记
  46.     // 支持以下属性iconSize: 主体大小(默认15,15),color:主体颜色(默认红色),diveColor: 发散颜色(red),title: 标题,level: 闪烁的粗细(2),speedTime: 发散闪烁的速度(2)
  47.     /**
  48.      L.blinkMarker(LatLng,{iconSize: [50,50],color: 'green',diveColor: 'blue',title: "啦啦啦"})
  49.      */
  50.     L.blinkMarker([36.694, 118.587], {
  51.         iconSize: [50, 50],
  52.         color: 'green',
  53.         diveColor: 'blue',
  54.         level: '3',
  55.         speedTime: 2,
  56.         title: "啦啦啦" }).addTo(map);
  57.     L.blinkMarker([34.694, 112.587], { iconSize: [12, 12], color: 'green',speedTime: 0.5}).addTo(map);
  58.     L.blinkMarker([35.694, 113.587], { iconSize: [18, 18], diveColor: 'aqua' }).addTo(map);
  59.     L.blinkMarker([32.694, 116.587], { iconSize: [25, 25], level: '3', speedTime: 1 }).addTo(map);
  60.     // document.styleSheets[0].addRule('.pulse-icon::after { box-shadow:  0 0 6px 2px green }', 0);
  61.  
  62. </script>
  63.  
  64. </html>

原文链接：https://blog.csdn.net/weixin_43464964/java/article/details/105686596

另外一种方法，就是用gif动图去做：

  1. var LeafIcon = L.Icon.extend({
  2.                     options: {
  3.                         iconSize: [60, 50],
  4.                         iconAnchor: [30, 25]
  5.                     }
  6.                 });
  7.              var markerIcon = new LeafIcon({ iconUrl: './gif/marker.gif' });
  8.             let marker=L.marker([item.lat, item.lon], { icon: markerIcon });

leaflet 实现地图上标记的发散闪烁动画的更多相关文章

  1. leaflet在地图上加载本地图片

    <link href="~/Scripts/Leaflet/leaflet.css" rel="stylesheet" /><script s ...

  2. ArcGIS API For Javascript ：如何在地图上做出点位脉冲闪烁的效果

    日常地图表达中我们通常使用的地图符号多是静态地图符号,时间久了会造成视觉审美疲劳,也没有现代感. 在这种背景下,对现有地图符号进行简单处理,即可得到色彩鲜艳,对比度强烈,活灵活现的地图表达形式. 灵感 ...

  3. Android中Google地图路径导航，使用mapfragment地图上画出线路(google map api v2)详解

    在这篇里我们只聊怎么在android中google map api v2地图上画出路径导航,用mapfragment而不是mapview,至于怎么去申请key,manifest.xml中加入的权限,系 ...

  4. vue 百度地图实现标记多个maker，并点击任意一个maker弹出对应的提示框信息， （附： 通过多个地址，标记多个marker 的 方法思路）

    通过点击不同筛选条件,筛选出不同企业所在的地点, 根据每个企业的经纬度 在地图上标记多个maker,点击任意一个maker,会弹出infoWindow 信息窗口: 说明:  因每个人写法不同.需求不同 ...

  5. 如何在iOS地图上高效的显示大量数据

    2016-01-13 / 23:02:13 刚才在微信上看到这篇由cocoachina翻译小组成员翻译的文章,觉得还是挺值得参考的,因此转载至此,原文请移步:http://robots.thought ...

  6. [ios3-地图] 如何在iOS地图上高效的显示大量数据 [转]

    [转至:http://blog.csdn.net/pjk1129/article/details/17358337] 原文:How To Efficiently Display Large Amoun ...

  7. google maps js v3 api教程(2) -- 在地图上添加标记

    原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图 ...

  8. Google Map API v2 （三）----- 地图上添加标记（Marker），标记info窗口，即指定经纬度获取地址字符串

    接上篇 http://www.cnblogs.com/inkheart0124/p/3536322.html 1,在地图上打个标记 private MarkerOptions mMarkOption; ...

  9. Swift - 使用MapKit显示地图，并在地图上做标记

    通过使用MapKit可以将地图嵌入到视图中,MapKit框架除了可以显示地图,还支持在地图上做标记. 1,通过mapType属性,可以设置地图的显示类型 MKMapType.Standard :标准地 ...

  10. leaflet 利用ajax 将前端地图上的数据post到后台

    生成Google地图,在地图上单击后,将该点的经纬度反馈给后台. 前端HTML代码: <!DOCTYPE html> <html> <head> <meta ...

随机推荐

  1. JDBC复习：创建MySQL数据表

    1 try { 2 conn=JDBCUtil.getConnection(); 3 preparedStatement = conn.prepareStatement(DROP_TABLE_1); ...

  2. 提高生产力！这10个Lambda表达式必须掌握，开发效率嘎嘎上升！

    在Java8及更高版本中,Lambda表达式的引入极大地提升了编程的简洁性和效率.本文将围绕十个关键场景,展示Lambda如何助力提升开发效率,让代码更加精炼且易于理解. 集合遍历 传统的for-ea ...

  3. 初学STM32 SDIO(一)

    1. SDIO协议简介 ​ SDIO全称是安全数字输入/输出接口 ,控制器对SD卡进行读写通信操作一般有两种通信接口可选,一种是SPI接口,另外一种就是SDIO接口. 多媒体卡(MMC).SD卡. S ...

  4. 【FAQ】视频编辑服务常见问题及解答

    Q1问题描述 1. 访问贴纸等素材的时候提示"网络异常,请重试"怎么办? 2. 使用AI能力时,提示"errorCode:20124 errorMsg:Method no ...

  5. js复制文字到剪切板

    此方法仅适用于 IE demo <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  6. Mysql之SQL语句初级用法

    前言 本文通过简单的示例去了解Mysql的DDL.DML.DCL的语句用法. 一.DDL语句 DDL(Data Definition Language)语句: 数据定义语言,主要是进行定义/改变表的结 ...

  7. 重新点亮linux 命令树————网络配置的查看[十一三]

    前言 简单整理一下网络配置. 正文 通过ifconfig 查看. 这个就是ip地址. 网卡mac地址. 还有一块信息非常重要: 这个io开头的信息,这里面就是我们127.0.0.1的信息. 那么就来演 ...

  8. 《c#高级编程》第4章C#4.0中的更改（七）——命名参数和可选参数

    一.概念 C#中的命名参数和可选参数是两种函数参数的特殊形式,它们可以提高代码的可读性和灵活性. 命名参数 命名参数允许我们在调用函数时指定参数名称,从而不必按照函数定义时的参数顺序进行传参.这样做可 ...

  9. kubernetes CNI(Container Network Inferface)

    为什么需要 CNI 在 kubernetes 中,pod 的网络是使用 network namespace 隔离的,但是我们有时又需要互相访问网络,这就需要一个网络插件来实现 pod 之间的网络通信. ...

  10. 【笔记】go语言--go语言的依赖管理

    [笔记]go语言--go语言的依赖管理 GO语言的依赖管理 依赖的概念,依赖就是第三方的库,即别人已经做好的库 依赖管理的三个阶段 GOPATH,GOVENDOR, go mod 三个阶段 - GOP ...