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

最新推荐文章于 2024-06-28 08:30:00 发布

霸道流氓气质

最新推荐文章于 2024-06-28 08:30:00 发布

阅读量1.8k

点赞数

分类专栏： GIS相关文章标签： leaflet

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124049533

版权

GIS相关专栏收录该内容

130 篇文章 49 订阅

订阅专栏

场景

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

Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图

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

注：

博客：
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

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;
            width: 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>

霸道流氓气质

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Leaflet中实现矩形闪烁动画效果

场景Leaflet快速入门与加载OSM显示地图：Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图在上面加载地图显示的基础上，实现矩形闪烁显示效果。注：博客：霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现1、绘制图形 //绘制图形 dispLayer= L.rectangle(.
复制链接

扫一扫