Листовка: изменение прозрачности плавного перехода маркера - PullRequest
Новая
       29

Листовка: изменение прозрачности плавного перехода маркера

1 голос
/ 15 марта 2020

Я хочу добиться эффекта плавного перехода при наведении курсора мыши. То же (похоже), что и всплывающее окно. Я уже рассмотрел это с помощью следующего кода: 

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

Это некоторые из версий, которые я пробовал раньше, это довольно грязно, но идея в том, что он добавляет 0,1 непрозрачности каждые 20 мс (waitInterval ) от 0,5 (opaOn) до 1,0 (opaOff) при наведении мыши и выполнении обратной операции при наведении мыши.

Проблема в том, что когда мышь быстро пересекает маркер, непрозрачность нарушается. Я знаю, почему это происходит, так как 'mouseover' l oop не удалось завершить sh до запуска 'mouseout', поэтому 'mouseover' все еще добавляет значение, в то время как 'mouseout' пытается вычесть его. Я пытался добавить логический триггер, и если условие, что один не может быть выполнен, если другой не завершен sh. Я попытался добавить setTimeout () для 'mouseout', чтобы он автоматически ждал некоторое время, а затем начал делать вычитание - не повезло. Я пробовал еще несколько других вариантов, но всегда был небольшой пробел, позволяющий «сценарию» обработать sh.

Я читал об асинхронных функциях / событиях, но не смог реализовать его как-нибудь в моем проекте.

Каждое немного помогает парням, заранее спасибо!

Мой проект в скрипке

1 Ответ

0 голосов
/ 16 марта 2020

Если ваша цель - просто добавить переход на непрозрачность, вам, вероятно, следует использовать CSS переходов .

С этими CSS классами 

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

переключить класс leaflet-marker-hover на mouseover / mouseout

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