Leaflet中实现矩形闪烁动画效果

场景

Leaflet快速入门与加载OSM显示地图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880

在上面加载地图显示的基础上，实现矩形闪烁显示效果。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、绘制图形

        //绘制图形
        dispLayer= L.rectangle([[36.08, 120.36], [36.10, 120.37]], {
            //颜色
            color: "red"
        }).addTo(map);

2、在setInterval()函数中反复添加、删除该图层，以达到闪烁的效果

        startFeatureFlash();
        /**开始闪烁
        */
        function startFeatureFlash() {
            //flag为ture时，图形消失；反之，图形显现
            var flag = true;
            //开启计时器
            id = setInterval(function () {
                if (flag) {
                    //移除图形
                    map.removeLayer(dispLayer);
                    flag = false;
                }
                else {
                    //添加图形
                    map.addLayer(dispLayer);
                    flag = true;
                }
            }, 500);
        }

3、完整示例代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>leaflet要素动画</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
             100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script type="text/javascript">
        var map = L.map('map').setView([36.09, 120.35], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: ''
        }).addTo(map);

        //绘制图形
        dispLayer= L.rectangle([[36.08, 120.36], [36.10, 120.37]], {
            //颜色
            color: "red"
        }).addTo(map);

       
        startFeatureFlash();
        /**开始闪烁
        */
        function startFeatureFlash() {
            //flag为ture时，图形消失；反之，图形显现
            var flag = true;
            //开启计时器
            id = setInterval(function () {
                if (flag) {
                    //移除图形
                    map.removeLayer(dispLayer);
                    flag = false;
                }
                else {
                    //添加图形
                    map.addLayer(dispLayer);
                    flag = true;
                }
            }, 500);
        }
    </script>
</body>

</html>

相关阅读:
短信
solr测试用的配置
中文词启动
配置域
applicationContext-redis.xml
Redis端口配置
springDataRedis 依赖
FastDFSClient上传图片工具类
security 页面测试
PHP图片压缩功能（按比例图片缩放）(转载)

原文地址：https://www.cnblogs.com/badaoliumangqizhi/p/16119479.html