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

最新推荐文章于 2024-06-28 08:30:00 发布

原创最新推荐文章于 2024-06-28 08:30:00 发布 · 6.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css动画 #leaflet

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用Leaflet.js自定义地图Marker，并通过CSS动画实现动态缩放效果。包括两种模式（卫星模式和飞机模式）的动画切换，及其实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义marker的动态效果

定义maker
CSS
模式切换
效果切换

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

定义maker

marker = L.marker([d.latitude, d.longitude], {
	title: d.name,
	icon: L.divIcon({
	className: "dIcon",
		html: `<div class="live"><img src="static/images/xzc.png"><span></span><span></span></div><p id="adminVil" class="adminVil">${d.name}</p>`,
		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");
	}
}

效果切换

在这里插入图片描述