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

Posted 2023-03-06

【中文标题】Leaflet map：marker的平滑过渡不透明度变化

【英文标题】：Leaflet map: marker's smooth transition opacity change

【发布时间】：2020-06-26 23:53:14

【问题描述】：

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

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

这是我之前尝试过的一些版本，它有点乱，但想法是它在“鼠标悬停”时每 20 毫秒（waitInterval）增加 0.1 不透明度，从 0.5（opaOn）到 1.0（opaOff），并且做'mouseout' 时向后操作。

问题是当鼠标快速穿过标记时，不透明度会混乱。我知道它为什么会发生，因为 'mouseover' 循环没有在 'mouseout' 开始之前完成，所以 'mouseover' 仍然增加价值，而 'mouseout' 试图减去它。 我尝试添加布尔触发器和 if 如果另一个没有完成则无法执行的条件。我试图为'mouseout'添加setTimeout（），以便它自动等待一段时间然后开始做减法 - 不走运。我尝试了一些更不同的变体，但总是存在允许“脚本”崩溃的小间隙。

我已阅读有关异步函数/事件的信息，但无论如何我都无法在我的项目中实现它。

每一点都对大家有帮助，在此先感谢！

My project in fiddle

【参考方案1】：

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

使用这些 CSS 类

.leaflet-marker-icon 
    opacity: 0.5;

.leaflet-marker-hover 
    transition-property: opacity;
    transition-duration: 1s;
    opacity: 1;

在mouseover/mouseout 上切换leaflet-marker-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(), 'leaflet-marker-hover');
)
.on('mouseout', function(e) 
    this.closePopup();
    L.DomUtil.removeClass(e.target.getElement(), 'leaflet-marker-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(), 'leaflet-marker-hover');
    )
    .on('mouseout', function(e) 
        this.closePopup();
        L.DomUtil.removeClass(e.target.getElement(), 'leaflet-marker-hover');
    )
    .bindPopup(popupName);
);

html, body, #map 
  height: 100%;


.leaflet-marker-icon 
  opacity: 0.5;


.leaflet-marker-hover 
  transition-property: opacity;
  transition-duration: 1s;
  opacity: 1;

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />

<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>

<div id="map"></div>