leaflet给自定义marker添加动态效果

实现动态效果主要依靠css动画

定义maker

marker = L.marker([d.latitude, d.longitude], {
	title: d.name,
	icon: L.divIcon({
	className: "dIcon",
		html: `
${d.name}
`,
		iconSize: [90, 36]
	})
});

CSS

.live {
  position: relative;
  left: 40%;
  width: 18px;
  height: 18px;
}

/*s模式下动画状态*/
@keyframes s-living {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.5);
    border-color: rgba(255, 255, 255, 0.9);
  }

  50% {
    transform: scale(2);
    border-color: rgba(255, 255, 255, 0.75);
  }

  75% {
    transform: scale(2.5);
    border-color: rgba(255, 255, 255, 0.5);
  }

  100% {
    transform: scale(3);
    border-color: rgba(255, 255, 255, 0.1);
  }
}
/*p模式下动画状态*/
@keyframes p-living {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.5);
    border-color: rgba(41, 129, 202, 0.9);
  }

  50% {
    transform: scale(2);
    border-color: rgba(41, 129, 202, 0.75);
  }

  75% {
    transform: scale(2.5);
    border-color: rgba(41, 129, 202, 0.5);
  }

  100% {
    transform: scale(3);
    border-color: rgba(41, 129, 202, 0.1);
  }
}

.satellite .live span{
  position: absolute;
  width: 18px;
  height: 18px;
  left: 0;
  bottom: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  -webkit-animation: s-living 3s linear infinite;
  z-index: 50;
}
.plane .live span{
  position: absolute;
  width: 18px;
  height: 18px;
  left: 0;
  bottom: 0;
  border: 1px solid #2981ca;
  border-radius: 50%;
  -webkit-animation: p-living 3s linear infinite;
  z-index: 50;
}

.live span:nth-child(2){
  -webkit-animation-delay: 1.5s;
}

模式切换

styleChange() {
	if (this.styleChanged) {
		$("#main").removeClass("satellite").addClass("plane");
	} else {
        $("#main").removeClass("plane").addClass("satellite");
	}
}

效果切换