如何在Leaflet闪烁中制作标记

Question

是否有一种简单的方法可以使Leaflet地图中的标记闪烁？我的意思是动画闪烁 - 类似于从不透明度1.0到1秒内不透明度0.5然后反转，循环结束的过渡循环。

Answer 1

当你添加一个Marker时，你可以指定一个Icon - 包括className的选项。您可以使用此className选项通过CSS为标记的图标设置动画。

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
  maxZoom: 18
}).addTo(map);

L.marker([51.5, -0.09], {
  icon: L.icon({
    iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
    className: 'blinking'
  })
}).addTo(map);

#map {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

@keyframes fade { 
  from { opacity: 0.5; } 
}

.blinking {
  animation: fade 1s infinite alternate;
}

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="map"></div>

要将标记从闪烁切换到非闪烁，您可以使用Leaflet的DomUtil将blinking类添加到标记的img元素：

// With the class added, the marker will blink:
L.DomUtil.addClass(marker._icon, "blinking");

// Without the class, it won't:
L.DomUtil.removeClass(marker._icon, "blinking");