如何在标记上以非对称方式添加脉冲动画
How to add pulse animation in asymmetric on marker
我在传单库中的标记上添加动画时遇到问题
我用
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
但是没有用。
你知道我该怎么做吗?
还有一个,当我将其放入 .css 文件
时,图标中的 className
或 divIcon
将被忽略
你可以使用这个 并在 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 的例子,你应该使用这个 demo
我在传单库中的标记上添加动画时遇到问题
我用
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
但是没有用。
你知道我该怎么做吗?
还有一个,当我将其放入 .css 文件
时,图标中的className
或 divIcon
将被忽略
你可以使用这个
// 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 的例子,你应该使用这个 demo