Leaflet map：标记的平滑过渡不透明度变化

Question

我想在鼠标悬停时实现平滑过渡的效果。与弹出窗口相同（相似）。我已经用下面的代码覆盖了它：

var i, j, k = 0;
var opaOn = 0.5;
var opaOff = 1.0;
var waitInterval=20;
    var marker1 = L.marker([54.351194, 18.644001], {
        title: "F-25",
        opacity: opaOn
      })
      .addTo(map)
      .on('mouseover', function(e) {
        localName = 'Marker 1';
        popupName.setContent(localName);
        this.openPopup();
        for (let i = 1; i <= (1.0 - opaOn) * 10; i++) {
          setTimeout(function timer() {
            j = ((i / 10) + opaOn);
            marker1.setOpacity(j);
            popupMaster.setContent("Value: " + j);
          }, i * waitInterval);
        }

      })
      .on('mouseout', function(e) {
        this.closePopup();

        for (let i = 1; i <= (j - opaOn) * 10; i++) {
          setTimeout(function timer() {
            k = (opaOff - (i / 10));
            marker1.setOpacity(k);
            popupMaster.setContent("Value: " + k);
          }, i * waitInterval);
        }


      })
      .on('click', function(e) {
        popupMaster.setContent('hello');
      })
      .bindPopup(popupName);

[这是我之前尝试过的一些版本，虽然有点混乱，但是其思想是，在“ mouseover”的同时，每20ms（waitInterval）从0.5（opaOn）到1.0（opaOff）增加0.1透明度在“鼠标移出”时进行操作。

问题是，当鼠标快速穿过标记时，不透明会变得混乱。我确实知道为什么会发生这种情况，因为“ mouseover”循环在“ mouseout”开始之前未能完成，因此“ mouseover”仍会增加价值，而“ mouseout”会试图减去它。我尝试添加布尔触发器，并且如果条件是如果另一个未完成则无法执行。我试图为“ mouseout”添加setTimeout（），以便它自动等待一段时间，然后开始进行减法-没运气。我尝试了更多不同的变体，但始终存在很小的差异，以允许“脚本”崩溃。

我已经读过异步函数/事件，但是我无法以任何方式在我的项目中实现它。

每个人都帮上忙，在此先感谢！

My project in fiddle

Answer 1

如果您的目标只是添加不透明度的过渡，则可能应使用CSS transitions。

使用这些CSS类

.leaflet-marker-icon {
    opacity: 0.5;
}
.hover {
    transition-property: opacity;
    transition-duration: 1s;
    opacity: 1;
}

在鼠标悬停/鼠标悬停时切换hover类

L.marker([54.351194, 18.644001], {
    title: "F-25"
})
.addTo(map)
.on('mouseover', function(e) {
    popupName.setContent('Marker 1');
    this.openPopup();
    L.DomUtil.addClass(e.target.getElement(), 'hover');
})
.on('mouseout', function(e) {
    this.closePopup();
    L.DomUtil.removeClass(e.target.getElement(), 'hover');
})
.bindPopup(popupName);

还有一个基于您的示例的演示

var center = [54.351194, 18.644001];
var map = L.map('map').setView(center, 11);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 40
}).addTo(map);

var popupName = L.popup({
    closeOnClick: false,
    autoClose: false,
    closeButton: false
});


var points = [
    {latlng: [54.351194, 18.644001], title: "F-25", name: "Marker 1"},
    {latlng: [54.361194, 18.664001], title: "F-26", name: "Marker 2"},
]

points.forEach(function(p) {
    L.marker(p.latlng, {
        title: p.title
    })
    .addTo(map)
    .on('mouseover', function(e) {
        popupName.setContent(p.name);
        this.openPopup();
        L.DomUtil.addClass(e.target.getElement(), 'hover');
    })
    .on('mouseout', function(e) {
        this.closePopup();
        L.DomUtil.removeClass(e.target.getElement(), 'hover');
    })
    .bindPopup(popupName);
});

html, body, #map {
  height: 100%;
}

.leaflet-marker-icon {
  opacity: 0.5;
}

.hover {
  transition-property: opacity;
  transition-duration: 1s;
  opacity: 1;
}

<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>