时间戳

首页 > 解决方案 > Leaflet.js circleMarker 过渡

leaflet - Leaflet.js circleMarker 过渡

问题描述

有谁知道我如何在leaflet.js 中使用circleMarker 进行转换？在旧版本中（如果我没记错的话，是 0.7）下面的 css 用来做这个把戏

.leaflet-clickable {
        transition: all .3s;
    }

但不再是了。我在用version 1.3.1

标签： leaflet

解决方案

在您的标记上设置一个自定义类并使用它来设置您的过渡。例如：

使用这个标记 

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>

推荐阅读