Mapbox：在悬停时更改圆圈的重量

Question

我使用 L.circle 绘制了一个粗细为 1px 的圆。我想在鼠标悬停时将权重更改为 2px，动画流畅。

Answer 1

至于在悬停时更改 L.Circle 的 "weight"（实际上是它的 SVG 形状 "stroke-width"），您只需在 "mouseover" 和"mouseout" 事件：

myCircle.on({
  "mouseover": function () {
    myCircle.setStyle({
      weight: 2
    })
  },
  "mouseout": function () {
    myCircle.setStyle({
      weight: 1
    })
  }
});

至于流畅的动画，你有2种选择：

CSS3 SVG 属性的过渡。但不幸的是，IE 不支持它们。
回退到自己实现动画/过渡，通常使用 setInterval 或 requestAnimationFrame，并逐渐调整权重。

在 SVG 属性上使用 CSS3 过渡：

JavaScript:

var myCircle = L.circle(myLatLng, myRadius, {
  weight: 1,
  className: "test"
})

CSS:

.test {
  transition: stroke-width 1s; /* duration with unit */
}

演示：http://jsfiddle.net/ve2huzxw/115/

Mapbox：在悬停时更改圆圈的重量

Mapbox: Change weight of circle on hover

leaflet

mapbox