先看效果

js文件：blinkmarker.js

L.blinkMarker = function (point, property) {

    // 使用js标签,便于操作,这个temDivEle的作用是将divEle通过innerHTML的方式获取为字符串

    var tempDivEle = document.createElement("div");

    var divEle = document.createElement("div");

    var spanEl = document.createElement("span");

    var aEl = document.createElement("a");

    tempDivEle.append(divEle);

    divEle.append(spanEl);

    spanEl.append(aEl);

    // 设置上基础的样式

    spanEl.classList.add("pulse-icon");

    aEl.classList.add("dive-icon");

    // 操作样式

    var style = document.createElement("style");

    style.type = "text/css";

    document.head.appendChild(style);

    sheet = style.sheet;

    // 主体颜色

    if (property) {

        if (property.color) {

            spanEl.style.backgroundColor = property.color;

            if (!property.diveColor) {

                aEl.style.boxShadow = "0 0 6px 2px " + property.color;

            }

        }

        // 标记大小

        if (property.iconSize) {

            spanEl.style.width = property.iconSize[0] + "px";

            spanEl.style.height = property.iconSize[1] + "px";

        }

        // 发散的color

        if (property.diveColor) {

            // 发散的重度

            if (property.level) {

                aEl.style.boxShadow = "0 0 " + (property.level * 3) + "px " + property.level + "px " + property.diveColor;

            } else {

                aEl.style.boxShadow = "0 0 6px 2px " + property.diveColor;

            }

        }

        // 发散的重度

        if (property.level) {

            if (property.diveColor) {

                aEl.style.boxShadow = "0 0 " + (property.level * 3) + "px " + property.level + "px " + property.diveColor;

            }else if (property.color) {

                aEl.style.boxShadow = "0 0 " + (property.level * 3) + "px " + property.level + "px " + property.color;

            }else{

                aEl.style.boxShadow = "0 0 " + (property.level * 3) + "px " + property.level + "px red";

            }

        }

        // 闪烁的速度

        if (property.speedTime) {

            aEl.style.setProperty("animation", "pulsate " + property.speedTime + "s infinite")

        }

    }

    var myIcon = L.divIcon({ className: 'my-div-icon', html: tempDivEle.innerHTML });

    var marker = L.marker(point, { icon: myIcon, title: property.title });

    return marker;

}

css样式文件：blinkmarker.css

.pulse-icon {

    display: inline-block;

    width: 15px;

    height: 15px;

    border-radius: 100%;

    background-color: red;

    position: relative;

    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);

}

.dive-icon {

    content: "";

    box-shadow: 0 0 6px 2px red;

    animation: pulsate 1s ease-out;

    animation-iteration-count: infinite;

    animation-delay: 1.1s;

    -webkit-border-radius: 100%;

    border-radius: 100%;

    height: 200%;

    width: 200%;

    animation: pulsate 2s infinite;

    position: absolute;

    margin: -50% 0 0 -50%;

}

@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);

    }

}

测试实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>闪烁点</title>

    <link rel="stylesheet" type="text/css" href="../leaflet/dist/leaflet.css">

    <script type="text/javascript" src="../leaflet/dist/leaflet.js"></script>

    <!-- 引入闪烁marker -->

    <link rel="stylesheet" type="text/css" href="css/blinkmarker.css">

    <script type="text/javascript" src="js/blinkmarker.js"></script>

    <style type="text/css">

        body {

            padding: 0;

            margin: 0;

        }

        html,

        body,

        #map {

            height: 100%;

        }

    </style>

</head>

<body>

    <div id='map'></div>

</body>

<script type="text/javascript">

    /**

     * 这一部分用于加载地图,我这里用的是离线地图,需要适当修改

     */

    var url = 'http://localhost:9090/img/{z}/{x}/{y}.png';

    var map = L.map('map', {

        center: [34.694, 113.587],

        zoom: 6,

        zoomControl: false

    });

    //将图层加载到地图上，并设置最大的聚焦还有map样式

    L.tileLayer(url, {

        maxZoom: 18,

        minZoom: 3

    }).addTo(map);

    //以下是加载闪烁标记

    // 支持以下属性iconSize: 主体大小(默认15,15),color:主体颜色(默认红色),diveColor: 发散颜色(red),title: 标题,level: 闪烁的粗细(2),speedTime: 发散闪烁的速度(2)

    /**

     L.blinkMarker(LatLng,{iconSize: [50,50],color: 'green',diveColor: 'blue',title: "啦啦啦"})

     */

    L.blinkMarker([36.694, 118.587], {

        iconSize: [50, 50],

        color: 'green',

        diveColor: 'blue',

        level: '3',

        speedTime: 2,

        title: "啦啦啦" }).addTo(map);

    L.blinkMarker([34.694, 112.587], { iconSize: [12, 12], color: 'green',speedTime: 0.5}).addTo(map);

    L.blinkMarker([35.694, 113.587], { iconSize: [18, 18], diveColor: 'aqua' }).addTo(map);

    L.blinkMarker([32.694, 116.587], { iconSize: [25, 25], level: '3', speedTime: 1 }).addTo(map);

    // document.styleSheets[0].addRule('.pulse-icon::after { box-shadow:  0 0 6px 2px green }', 0);

</script>

</html>

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

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

var LeafIcon = L.Icon.extend({

                    options: {

                        iconSize: [60, 50],

                        iconAnchor: [30, 25]

                    }

                });

             var markerIcon = new LeafIcon({ iconUrl: './gif/marker.gif' });

            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. CF-937（D,E）

    CF-937 在补题-- D 分析 我们发现这些因子都是二进制形式的十进制数,n的范围是$1e5$,16的二进制是$10000$,于是可以枚举1~16,把这些因子预处理出来,对于每个n就枚举因子再作除 ...

  2. #错排，组合计数#洛谷 4071 [SDOI2016]排列计数

    题目 多组询问长度为\(n\)的排列中恰好有\(m\)个数对号入座的排列数 分析 首先\(n\)个数中选择\(m\)个数放入那\(m\)个位置显然是\(C(n,m)\) 剩下就是错排\(D(n)=(n ...

  3. Jetty的http2模块

    启用http2模块,执行如下命令: java -jar $JETTY_HOME/start.jar --add-modules=http2 命令的输出,如下: INFO : http2 initial ...

  4. ArkUI中的线程和看门狗机制

    一.前言 本文主要分析ArkUI中涉及的线程和看门狗机制. 二.ArkUI中的线程 应用Ability首次创建界面的流程大致如下: 说明: • AceContainer是一个容器类,由前端.任务执行器 ...

  5. Windows wsl2安装Ubuntu

    wsl(Windows Subsystem for Linux)即适用于Windows的Linux子系统,是一个实现在Windows 10 / 11上运行原生Linux的技术. wsl2 为其迭代版本 ...

  6. 一图读懂HUAWEI HiAI Foundation

    作为华为端侧AI的创新开放平台,HMS Core的HUAWEI HiAI Foundation开放AI算力,助力AI应用高效开发,同时联合多领域打造AI生态,实现日调用600亿次的突破,助力AI生态繁 ...

  7. 1、android Studio 打Jar包

    1.创建一个AndroidStudio 工程 注意下面这个Package Name 2.进入Android Studio工程中 选择Project Flies 选项 然后找到 app->src- ...

  8. 报表如何批量导出成 excel 文件

    需求说明 报表展现后可以通过工具栏中的导出按钮将当前展现的报表导出成 excel 文件,但是在实际使用中通常会要求报表不需要展现,直接通过一些操作将报表导出成 excel 文件,并且往往会要求批量导出 ...

  9. opencv实现数据增强（图片+标签）平移，翻转，缩放，旋转

    面试问到了,让手撕数据增强,图片+标签.这里整理一下,直接上代码. import math import cv2 import numpy as np def pan(img, anns, size= ...

  10. redis cluster 的核心原理分析：gossip 通信、jedis smart 定位、主备切换

    节点间的内部通信机制 基础通信原理 redis cluster 节点间采取 gossip 协议进行通信 gossip:互相之间不断通信,保持整个集群所有节点的数据是完整的 而集中式是将集群元数据(节点 ...