Leaflet.js鼠标悬停时的折线颜色变化

Question

我有一个使用Leaflet中的点列表绘制的polyLine。这是代码

road= new L.Polyline(pointList, {
    color: color,
    weight: 10,
    lineCap:"square",
    lineJoin:"bevel",
    opacity: 0.6,
    smoothFactor: 1
    }); 

我需要在鼠标悬停时将此polyLine的颜色更改为绿色。我使用以下代码。但它没有用。

road.on('mouseover', function (e) {
         var layer=e.target;
         layer.options["color"]="green";
         console.log(layer.options["color"]);

        });

任何人都可以告诉我我该怎么办？

Answer 1

您应该使用setStyle method，如下所示：

road.on('mouseover', function() {
    this.setStyle({
        color: 'red'   //or whatever style you wish to use;
    });
});

此外，要恢复mouseout上的初始样式，请将该样式保存在变量中，并写入：

road.on('mouseout', function() {
    this.setStyle(initialStyle)
});