Leaflet中使用leaflet-cion-pulse插件实现波动的图标效果
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中使用leaflet-cion-pulse插件实现波动的图标效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
Leaflet快速入門與加載OSM顯示地圖：
Leaflet快速入門與加載OSM顯示地圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面的基礎上，怎樣使用插件實現波動的圖標效果如下
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
1、插件地址
https://github.com/mapshakers/leaflet-icon-pulse
2、下載插件代碼，引入需要的js文件L.Icon.Pulse.js
3、這里直接把css文件放在html中，不再單獨引入
??????? .leaflet-pulsing-icon {border-radius: 100%;box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);}.leaflet-pulsing-icon:after {content: "";border-radius: 100%;height: 300%;width: 300%;position: absolute;margin: -100% 0 0 -100%;}@keyframes pulsate {0% {transform: scale(0.1, 0.1);opacity: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}50% {opacity: 1;-ms-filter: none;filter: none;}100% {transform: scale(1.2, 1.2);opacity: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}}4、聲明波動圖標并添加到地圖
??????? //波動圖標聲明并設置樣式var pulsingIcon = L.icon.pulse({iconSize: [20, 20],color: 'red'});//圖標添加到地圖上var marker = L.marker([36.09, 120.35], {icon: pulsingIcon}).addTo(map);5、完整示例代碼
? <!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>leaflet加載osm</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}.leaflet-pulsing-icon {border-radius: 100%;box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);}.leaflet-pulsing-icon:after {content: "";border-radius: 100%;height: 300%;width: 300%;position: absolute;margin: -100% 0 0 -100%;}@keyframes pulsate {0% {transform: scale(0.1, 0.1);opacity: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}50% {opacity: 1;-ms-filter: none;filter: none;}100% {transform: scale(1.2, 1.2);opacity: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}}</style> </head><body><div id="map"></div><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script type="text/javascript" src="./js/L.Icon.Pulse.js"></script><script type="text/javascript">var map = L.map('map').setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: ''}).addTo(map);//波動圖標聲明并設置樣式var pulsingIcon = L.icon.pulse({iconSize: [20, 20],color: 'red'});//圖標添加到地圖上var marker = L.marker([36.09, 120.35], {icon: pulsingIcon}).addTo(map);</script> </body></html>?總結
以上是生活随笔為你收集整理的Leaflet中使用leaflet-cion-pulse插件实现波动的图标效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中使用Leaflet.co
- 下一篇： Leaflet中使用leaflet-se