mouseover上的Leaflet.js多段线颜色变化

Question

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

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

我需要改变这个polyLine的颜色为mouseover上的绿色。我正在使用下面的代码。但它不起作用。

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

     }); 

任何人都可以给我任何想法我怎么能做到这一点？

Answer 1

你应该使用setStylemethod，像这样：

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

此外，要恢复到最初的风格上mouseout，保存风格的变量，并写上：

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