Как добавить анимацию импульса в асимметричном маркере

У меня проблема с добавлением анимации на маркер в библиотеке листовок

я использую

new L.Icon({ iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
     shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
     iconSize: [25, 41],
     iconAnchor: [12, 41],
     popupAnchor: [1, -34],
     shadowSize: [41, 41]
})

HTML:

<div id='map' style = "height:600px;"></div>`

Я пытался использовать https://github.com/mapshakers/leaflet-icon-pulse

Но это не работает.

так у вас есть идеи, как я могу это сделать?

Еще один, className в значке или divIcon игнорируется, когда я помещаю это в файл .css

javascript angular leaflet openstreetmap ngx-leaflet

04.03.2019 11:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 524

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать этот пример и настроить его в angular

// define the marker path icon for web-pack not to be confused 
const markerIcon = {
      icon: L.icon({
       iconSize: [25, 41],
       iconAnchor: [10, 41],
       popupAnchor: [2, -40],
       // specify the path here
       iconUrl:
          "https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png",
       shadowUrl:
          "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png"
   })
};

// Define an icon called animatedCircleIcon and set the css
const animatedCircleIcon = {
      icon: L.divIcon({
       className: "css-icon",
       html: '<div class = "gps_ring"></div>',
       iconSize: [18, 22]
    })
 };

 // add the marker icon
 L.marker([50.5, 30.5], markerIcon).addTo(map);
 // add the animatedCircleIcon
 L.marker([50.5, 30.5], animatedCircleIcon).addTo(map);

а затем в стилях:

.gps_ring {
  border: 3px solid red;
  -webkit-border-radius: 40px;
  height: 18px;
  width: 18px;
  -webkit-animation: pulsate 1s ease-out;
  -webkit-animation-iteration-count: infinite;
  /*opacity: 0.0*/
}

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    opacity: 0;
  }
}

Демо

Редактировать

Позже я увидел, что вы уже написали асимметричный, поэтому, если вам нужен пример с использованием ngx-leaflet, вы должны использовать этот демо

04.03.2019 13:13