代码之家 › 专栏 › 技术社区 › Aenaon

传单.js圆马克跃迁

leaflet

Aenaon · 技术社区 · 6 年前

在旧版本中(如果我没弄错的话是0.7),下面的css用于实现这个目的

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

但现在不行了。我正在使用 version 1.3.1

1 回复 | 直到 6 年前

nikoshr 6 年前

设置a 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>

推荐文章

Krubkj lkjlökg · UTMREF/MGRS传单中的地图网格

1 年前

Kiki · TypeError:无法读取null的属性(读取“\u传单\u禁用\u单击”)

3 年前

Murali · 如何将Rshiny select输入带到前一层?目前传单图例阻碍了选择

7 年前

user5405873 · 如何缩放距离标记15km半径内的区域

7 年前

Stefan · 实际需要时,单击即可填写传单弹出窗口

7 年前

Marc Coll · 如何使用sliderInput值选择列并使用它更改映射R?

7 年前

val · 在Shiny中应用传单贴图边界过滤数据

7 年前

edaus · L.GridLayer上的传单JS setOpacity

7 年前

Cezar B · 用于扩展信息框的传单事件侦听器

7 年前

wuk986 · 传单:刷新不带缓存的tilelayer

7 年前