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

Question

我使用重量为1px的L.circle绘制了一个圆圈。我希望在悬停时用平滑的动画将重量更改为2px。

Answer 1

至于在悬停时更改L.Circle的“权重”（实际上是SVG形状“笔画宽度”），您只需绑定"mouseover"和"mouseout"事件的回调即可：

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

至于流畅的动画，你有两个选择：

• SVG属性上的CSS3过渡。但不幸的是，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/