пульсирующий круг в листовке при клике

У меня есть листовка-карта. Я использую круги для маркеров, потому что у меня есть встроенное масштабирование, и я хочу, чтобы радиус кругов анимировался во время масштабирования. Я также хочу, чтобы круги «пульсировали», если по ним щелкнуть. Я вижу в Интернете много документации по пульсирующим маркерам для листовок, но ни одной по пульсирующим кругам. Есть ли здесь простое решение?

JQuery:

var map = L.map('map').setView([40.449620, -79.939990], 13);

L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}{r}.{ext}', {
    maxZoom: 19,
    ext: 'png',
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'//,
}).addTo(map);

map.on('click', function(e) {
    var currentZoom = map.getZoom();
    if (currentZoom == 13) {
        map.flyTo(e.latlng, 15, { //zoom in on click
                animate: true,
                duration: 1,
                easeLinearity: 1
        });
    }
});
$.post('php/get-buildings.php', function(output){
    var obj = jQuery.parseJSON( output );

    var color;

    customCircle = L.Circle.extend({
       options: { 
          //some more options here
       }
    });

     for (var i=0; i<obj.length; i++) {

        if (obj[i].there_2017 == 'No') {
            color = '#000';
        } else {
            color = '#1565C0';
        }
        //var circle = L.circle([obj[i].lat,obj[i].lng], {
        var circle = new customCircle([obj[i].lat,obj[i].lng], {
            color: '#000',
            weight: 0.5,
            fillColor: color,
            fillOpacity: 1,
            borderWidth: 2,
            radius: 40,
            //some more properties
        }).addTo(map).on("click", circleClick);

        function circleClick(e) {
          var clickedCircle = e.target;
          clickedCircle.setStyle({'weight': '3'});  want to animate this
        }

    }//end for
});

leaflet pulse
person LauraNMS    schedule 17.01.2019    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Чтобы получить пульсирующий круговой маркер, используйте divIcon и создайте пульсирующий маркер, который вам нравится, с помощью css.

JS-код:

const generatePulsatingMarker = function (radius, color) {
  const cssStyle = `
    width: ${radius}px;
    height: ${radius}px;
    background: ${color};
    color: ${color};
    box-shadow: 0 0 0 ${color};
  `
  return L.divIcon({
    html: `<span style="${cssStyle}" class="pulse"/>`,
    // empty class name to prevent the default leaflet-div-icon to apply
    className: ''
  })
}

const pulsatingIcon = generatePulsatingMarker(10, 'red');
L.marker([51.497, -0.09], {icon: pulsatingIcon}).addTo(map);

и пульсирующий маркер CSS:

.pulse {
  display: block;
  border-radius: 50%;
  cursor: pointer;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 0;
  }
  70% {
    -moz-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
     box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
     box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

пример скрипта здесь

Кроме того, если вы хотите, чтобы маркер пульсировал только при нажатии, добавьте соответствующий класс css «pulse» в событие щелчка.

person Istopopoki    schedule 18.01.2019
comment
#Истопопоки: Почти готово! Пульсирующий divIcon имеет белый фон вместо прозрачного. На вашей скрипке это не так, но я не вижу, что я делаю неправильно. function markerClick(e) { var clickedMarker = e.target; var pulsatingIcon = generatePulsatingMarker(10, '#f49934'); L.marker([clickedMarker._latlng.lat, clickedMarker._latlng.lng], {icon: pulsatingIcon}).addTo(map); } - person LauraNMS; 18.01.2019
comment
const generatePulsatingMarker = функция (радиус, цвет) { const margin = 0 const cssStyle = margin-left:-${margin}px; margin-top:-${margin}px; width: ${radius}px; height: ${radius}px; background: ${color}; color: ${color}; box-shadow: 0 0 0 ${color}; return L.divIcon({ html: <span style="${cssStyle}" class="pulse"/>, }) } - person LauraNMS; 18.01.2019
comment
Я исправил это: в объявлении const: return L.divIcon({ className: 'dummy', html: <span style="${cssStyle}" class="pulse"/> - person LauraNMS; 18.01.2019