如何在标记上添加不对称的脉冲动画答案

【问题标题】：How to add pulse animation in asymmetric on marker如何在标记上添加不对称的脉冲动画
【发布时间】：2019-04-13 21:57:52
【问题描述】：

我在传单库中的标记上添加动画时遇到问题

我用

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 在 Icon 或 divIcon 被忽略，当我把它放在 .css 文件中时

【问题讨论】：

嗨@Arek Szumacher 你检查我的答案了吗？它解决了你的问题吗？
我找到了方法。在 Angular 项目中，在结构中，不应该在 .css 中添加类，而是在全局样式 .scss 中添加类

标签： javascript angular leaflet openstreetmap ngx-leaflet

【解决方案1】：

您可以使用这个example 并调整它的角度

// 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;
  }
}

Demo

编辑

我后来看到你已经写了非对称的，所以如果你想要一个使用 ngx-leaflet 的例子，你应该使用这个demo

【讨论】：