使用css动画给leaflet中的marker添加闪烁点

使用css动画给leaflet中的marker添加闪烁点

添加一个闪烁动画

        @keyframes wxBlinking {
            from {
                width: 40px;
                height: 40px;
                opacity: 0.7;
            }
            to{
                width: 43px;
                height: 43px;
                opacity: 1;
            }
        }
        .blinking {
            animation: wxBlinking 1s infinite alternate;
        }

定义一个marker，将绑有动画的class添加到这个marker中，即可实现闪烁点。

let markerIconDjc = L.icon({
    iconUrl: '../../images/djc.png',
    iconSize: [40, 40],    //  图标的大小    【值1，值2】 为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52
    iconAnchor: [20, 20],  //  图标将对应标记点的位置 这个是重点， 【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52)
});
let markerDjc = L.marker([39.91006,116.39277], {icon:markerIconDjc}).addTo(map).on('click',function(e){                           
L.DomUtil.addClass(markerDjc._icon, "blinking");