有谁知道我如何使用 CircleMarker 在 leaflet.js 中进行转换? 在旧版本中(0.7,如果我没记错的话)使用以下 css 来实现这个技巧
.leaflet-clickable {
transition: all .3s;
}
但现在不再是了。我使用的是版本1.3.1
最佳答案
设置custom class on your marker并用它来设置您的过渡。例如:
使用此标记
L.circleMarker([0, 0], {
className: 'circle-transition'
}).addTo(map)
您可以在悬停时进行转换
.circle-transition:hover {
fill: red;
fill-opacity: 1;
transition: all 1s
}
还有演示
var map = L.map('map').setView([0, 0], 4);
L.circleMarker([0, 0], {
radius: 100,
className: 'circle-transition',
fillOpacity: 0.5
}).addTo(map)
html, body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
@keyframes fadeIn {
from { fill-opacity:0; }
to { fill-opacity:0.5; }
}
.circle-transition {
animation: 1s ease-out 0s 1 fadeIn;
}
.circle-transition:hover {
fill: red;
fill-opacity: 1;
transition: all 1s
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
<div id='map'></div>
关于Leaflet.js 圆标记过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52944327/