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

it2024-10-13  38

使用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");
最新回复(0)